/* ============================================================
   SMIT SECURITIES — Master Stylesheet
   Brand: Deep Navy #0A1628 + Luminous Electric Blue Gradient #7EC8F0 → #2563C0
   100% Fully Responsive & Smooth Scrolling for All Devices
============================================================ */

/* ===== CSS CUSTOM PROPERTIES & DESIGN TOKENS ===== */
:root {
    --navy-950: #050D18;
    --navy-900: #07111F;
    --navy-800: #0A1628;
    --navy-750: #0D1C33;
    --navy-700: #0F2040;
    --navy-600: #152B52;
    --navy-500: #1C3B6E;

    /* Vibrant Cyan & Royal Blue Palette */
    --blue-800: #143A7B;
    --blue-700: #1A4A9E;
    --blue-600: #2055B8;
    --blue-500: #2563C0;
    --blue-400: #3B82F6;
    --blue-300: #4A9AE0;
    --blue-200: #7EC8F0;
    --blue-100: #BAE6FD;
    --blue-50: #E0F2FE;

    --cyan-400: #38BDF8;
    --cyan-300: #7DD3FC;

    --green: #22C55E;
    --red: #EF4444;
    --white: #FFFFFF;
    --gray-100: #F1F5F9;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;

    --font-body: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --nav-height: 82px;
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --trans: all 0.3s var(--ease-in-out);
    --trans-slow: all 0.6s var(--ease-out-cubic);
}

/* ===== GLOBAL RESETS & BASE STYLES ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 16px);
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--navy-900);
    color: var(--white);
    line-height: 1.6;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-h1,
.wwh-heading,
.rsc-heading,
.story-lead-h,
.story-quote-text,
.val-title,
.cat-title,
.sg-title,
.art-title,
.svc-title,
.rsc-prod-title,
.hww-step-title,
.feat-title,
.bni-card-h,
.spec-title,
.feat-article-h,
.feat-article-subh,
.contact-form-h,
.loc-city {
    font-family: var(--font-display);
    font-weight: 700;
}

img,
svg,
canvas,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--navy-950);
}

::-webkit-scrollbar-thumb {
    background: var(--blue-500);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blue-400);
}

/* ===== FLUID CONTAINER & UTILITY CLASSES ===== */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 14px;
}

.section-tag::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
    border-radius: 2px;
    flex-shrink: 0;
}

.gradient-text,
.gold-text,
.blue-text {
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 45%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.25);
    border-radius: 100px;
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: var(--trans);
    white-space: nowrap;
}

.trust-chip:hover {
    background: rgba(37, 99, 192, 0.25);
    color: var(--white);
    border-color: rgba(74, 154, 224, 0.45);
}

/* ===== SCROLL REVEAL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.75s var(--ease-out-cubic), transform 0.75s var(--ease-out-cubic);
    will-change: opacity, transform;
}

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

.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;
}

/* ===== BUTTON SYSTEM ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    transition: var(--trans);
    white-space: nowrap;
    user-select: none;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn:hover::after {
    transform: translateX(100%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-300) 100%);
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(37, 99, 192, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 192, 0.55);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid rgba(74, 154, 224, 0.45);
    color: var(--blue-300);
    border-radius: 10px;
}

.btn-outline:hover {
    background: rgba(74, 154, 224, 0.12);
    border-color: var(--blue-300);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 9px 20px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-md {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 10px;
}

.btn-lg {
    padding: 15px 36px;
    font-size: 16px;
    border-radius: 12px;
}

/* ============================================================
   NAVBAR & MOBILE DRAWER
============================================================ */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 18px 0;
    transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid transparent;
}

#nav.scrolled {
    padding: 12px 0;
    background: rgba(7, 17, 31, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(37, 99, 192, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0px;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.nav-logo-name {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--white);
}

.nav-logo-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-top: 3px;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.25s ease;
    position: relative;
    padding: 4px 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blue-300);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active-link {
    color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active-link::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.25);
    z-index: 1002;
    transition: var(--trans);
}

.hamburger:hover {
    background: rgba(37, 99, 192, 0.25);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: var(--trans);
}

/* Mobile menu */
.mob-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(5, 13, 24, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 60px 24px;
    overflow-y: auto;
}

.mob-menu.open {
    display: flex;
}

.mob-menu a {
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mob-menu a:hover {
    color: var(--blue-300);
    transform: translateY(-2px);
}

.mob-close {
    position: absolute;
    top: 22px;
    right: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
    transition: var(--trans);
}

.mob-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   SECTION 1: HERO - MAIN FIRST SECTION (.new-hero-section)
============================================================ */
.new-hero-section {
    position: relative;
    padding: clamp(130px, 14vw, 190px) 0 clamp(40px, 6vw, 90px);
    overflow: hidden;
    /* min-height: 100vh; */
}

.new-hero-section::after {
    content: " ";
    position: absolute;
    background-image: url('../img/Gradient1_BG.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.new-hiro-inner {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 192, 0.14);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 100px;
    padding: 7px 18px;
    margin-bottom: 24px;
    max-width: 100%;
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: glow 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.badge-txt {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue-200);
    letter-spacing: 0.5px;
}

.hero-h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 5.2vw, 46px);
    line-height: 1.12;
    margin-bottom: 20px;
}

.hero-h1 .line {
    display: block;
    overflow: hidden;
}

.hero-h1 .line span {
    display: block;
    animation: lineUp 0.9s var(--ease-out-cubic) both;
    transform: translateY(110%);
    opacity: 0;
}

.hero-h1 .line:nth-child(1) span {
    animation-delay: 0.15s;
}

.hero-h1 .line:nth-child(2) span {
    animation-delay: 0.35s;
}

@keyframes lineUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.new-hiro-inner .hero-sub {
    font-size: clamp(14.5px, 1.8vw, 17px);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    max-width: 800px;
    margin: 24px auto 36px;
    opacity: 0;
    animation: fadeSlide 0.9s var(--ease-out-cubic) 0.6s both;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeSlide 0.9s var(--ease-out-cubic) 0.8s both;
}

.trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(37, 99, 192, 0.18);
    opacity: 0;
    animation: fadeSlide 0.9s var(--ease-out-cubic) 1s both;
}

.trust-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-400);
}

/* ============================================================
   SECTION 2: PARTNERS / CLIENTS
============================================================ */
.partners-hero-section {
    /* background-image: url('../img/Gradient_BG.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat; */
    position: relative;
}

.partners {
    padding: 44px 0;
}

.partners-wrap {
    display: flex;
    align-items: center;
    gap: 36px;
}

.partners-label {
    flex-shrink: 0;
    width: 200px;
}

.partners-label p {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-400);
    line-height: 1.45;
}

.partners-slider {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 44px;
    width: max-content;
    animation: partnerScroll 24s linear infinite;
}

.partners-slider:hover .partners-track {
    animation-play-state: paused;
}

.p-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-400);
    white-space: nowrap;
    transition: color 0.25s ease;
    cursor: default;
    user-select: none;
}

.p-logo:hover {
    color: var(--white);
}

.p-logo svg {
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}

.p-logo:hover svg {
    opacity: 1;
}

.p-logo span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@keyframes partnerScroll {
    0% {
        transform: translateX(0);
    }

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

/* ============================================================
   SECTION 3: WHO WE HELP (.wwh-section)
============================================================ */
.wwh-section {
    position: relative;
    width: 100%;
    padding: clamp(36px, 4.5vw, 60px) 0 clamp(30px, 4vw, 60px);
    overflow: hidden;
}

.wwh-inner {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wwh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 192, 0.14);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-200);
    margin-bottom: 12px;
    width: fit-content;
}

.wwh-heading {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.16;
    color: var(--white);
    letter-spacing: -0.3px;
    margin: 0;
}

.wwh-heading .line {
    display: block;
    overflow: hidden;
}

.wwh-heading .line span {
    display: block;
}

.wwh-heading em {
    font-style: normal;
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 45%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wwh-stage {
    padding: 0;
    position: relative;
    width: 100%;
}

.wwh-grid {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: left;
    padding: 0;
}

.wwh-card {
    position: relative;
    padding: 28px 24px;
    border-radius: 20px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(14, 28, 54, 0.75) 0%, rgba(8, 18, 36, 0.88) 100%);
    border: 1px solid rgba(74, 154, 224, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    /* CRITICAL FIX: Only transition color, shadow and background — NEVER transform (to prevent GSAP hover blinking) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
    color: #ffffff;
}

.wwh-card:hover {
    border-color: rgba(56, 189, 248, 0.65) !important;
    background: linear-gradient(180deg, rgba(18, 36, 68, 0.85) 0%, rgba(10, 22, 44, 0.95) 100%) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.wwh-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 192, 0.25);
    border: 1px solid rgba(74, 154, 224, 0.35);
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.wwh-icon svg {
    width: 24px;
    height: 24px;
    stroke: #38bdf8;
}

.wwh-card:hover .wwh-icon {
    transform: scale(1.08);
    background: rgba(56, 189, 248, 0.35);
    border-color: #38bdf8;
}

.wwh-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 10px;
    font-family: var(--font-display);
}

.wwh-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

/* ============================================================
   SECTION 4: HERO SECONDARY & PORTFOLIO (.hero-rsc-section)
   WITH FIXED PTCANVAS POSITIONING (NO EXCESS HEIGHT)
============================================================ */
.hero-rsc-section {
    /* background-image: url('../img/smit-bg0re.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; */
    position: relative;
}

.hero {
    position: relative;
    padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 6vw, 90px);
    overflow: hidden;
    min-height: 0;
}

/* Absolute positioned background canvas and decor elements */
#ptCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.hero-bg,
.hero-grid,
.orb {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero-bg {
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 10%, rgba(37, 99, 192, 0.2), transparent 70%);
}

.hero-grid {
    inset: 0;
    background-image: linear-gradient(rgba(37, 99, 192, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 192, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.orb {
    border-radius: 50%;
    filter: blur(80px);
    -webkit-filter: blur(80px);
    opacity: 0.35;
}

.orb-a {
    width: 320px;
    height: 320px;
    background: var(--blue-600);
    top: 10%;
    left: 5%;
}

.orb-b {
    width: 280px;
    height: 280px;
    background: var(--blue-300);
    bottom: 10%;
    right: 5%;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero-sub-ui {
    list-style: disc;
    padding-left: 20px;
    text-align: left;
    line-height: 1.85;
    color: #1E293B;
    font-size: clamp(14px, 1.6vw, 16px);
    margin: 16px 0 28px;
}

.hero-sub-ui li {
    margin-bottom: 8px;
    color: #999b9f;
    font-weight: 500;
}

.hero-sub-ui li strong {
    color: #dfdfdf;
    font-weight: 800;
}

.hero-rsc-section .hero-badge {
    background: rgba(37, 99, 192, 0.1);
    border: 1.5px solid rgba(37, 99, 192, 0.35);
}

.hero-rsc-section .badge-txt {
    color: #6b98b4;
    font-weight: 800;
}

.hero-rsc-section .hero-h1,
.hero-rsc-section .head-title-values {
    color: #fff;
    font-weight: 800;
}

.hero-rsc-section .trust-strip {
    border-top: 1px solid rgba(37, 99, 192, 0.22);
}

.hero-rsc-section .trust-lbl {
    color: #334155;
    font-weight: 800;
}

.hero-rsc-section .trust-chip {
    background: rgba(37, 99, 192, 0.1);
    border: 1px solid rgba(37, 99, 192, 0.3);
    color: #a8aaab;
    font-weight: 700;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    perspective: 1000px;
}

.portfolio-card {
    background: linear-gradient(145deg, rgba(10, 22, 40, 0.96), rgba(15, 31, 58, 0.9));
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 24px;
    padding: clamp(18px, 2.8vw, 26px);
    width: 100%;
    max-width: 440px;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(37, 99, 235, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    overflow: visible;
}

.portfolio-card:hover {
    box-shadow: 0 30px 85px rgba(0, 0, 0, 0.55),
                0 0 50px rgba(56, 189, 248, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* 1. Live Market Status Bar */
.pc-live-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 14px;
    background: rgba(37, 99, 192, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 100px;
    font-size: 11px;
}

.pc-market-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pc-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: liveDotBlink 1.4s ease-in-out infinite;
}

@keyframes liveDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.pc-index-ticker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
}

.pc-ticker-name {
    color: #cbd5e1;
}

.pc-ticker-val {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
}

.pc-ticker-gain {
    color: #10B981;
    display: inline-flex;
    align-items: center;
    background: rgba(16, 185, 129, 0.14);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* 2. Header & Live Value Counter */
.pc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pc-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.pc-value {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 32px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
}

.pc-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10B981;
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.pc-badge-sub {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
}

/* 3. Timeframe Filter Tabs */
.pc-time-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: rgba(7, 17, 31, 0.6);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pc-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pc-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.pc-tab.active {
    background: linear-gradient(135deg, #2563EB, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

/* 4. Chart Wrap & High-Precision Vector SVG */
.sparkline-wrap {
    position: relative;
    margin: 10px 0 14px;
    height: 155px;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.15) 0%, rgba(10, 22, 40, 0.7) 75%);
    border: 1px solid rgba(56, 189, 248, 0.18);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 24px rgba(16, 185, 129, 0.04);
}

.spark-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.chart-y-axis {
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.55);
    pointer-events: none;
    z-index: 3;
    font-family: var(--font-display);
    letter-spacing: 0.3px;
}

/* 5. Animated Stock Curves & Shimmer Beam */
.stock-area {
    fill: url(#stockAreaGrad);
    transform-origin: bottom;
    opacity: 0.95;
    animation: stockAreaFade 1.6s ease-out both;
}

.stock-area-sub {
    fill: url(#stockAreaSubGrad);
    transform-origin: bottom;
    animation: stockAreaBreathe 4.5s ease-in-out infinite alternate;
}

@keyframes stockAreaFade {
    0% { opacity: 0; transform: scaleY(0.4); }
    100% { opacity: 0.95; transform: scaleY(1); }
}

@keyframes stockAreaBreathe {
    0% { opacity: 0.4; transform: scaleY(0.96) translateY(2px); }
    100% { opacity: 0.85; transform: scaleY(1.04) translateY(-2px); }
}

.stock-line {
    fill: none;
    stroke: url(#stockLineGrad);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.7));
    stroke-dasharray: 750;
    stroke-dashoffset: 750;
    animation: drawStockLine 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes drawStockLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* Traveling Laser Shimmer Beam along the stock curve */
.stock-line-laser {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60 700;
    stroke-dashoffset: 750;
    filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 12px #10B981);
    animation: travelLaserBeam 3.8s cubic-bezier(0.4, 0, 0.2, 1) 2.2s infinite;
}

@keyframes travelLaserBeam {
    0% {
        stroke-dashoffset: 750;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -60;
        opacity: 0;
    }
}

/* 6. Glowing Peak Node (Live Market Radar Head) */
.stock-live-node {
    opacity: 0;
    animation: liveNodePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards;
    cursor: pointer;
}

@keyframes liveNodePop {
    0% {
        opacity: 0;
        transform: translate(395px, 14px) scale(0);
    }
    100% {
        opacity: 1;
        transform: translate(395px, 14px) scale(1);
    }
}

.stock-node-core {
    fill: #10B981;
    filter: drop-shadow(0 0 8px #10B981);
}

.stock-node-center {
    fill: #ffffff;
}

.stock-node-wave {
    fill: none;
    stroke: #10B981;
    stroke-width: 1.5;
    transform-origin: center;
    animation: liveWaveRing 2.2s ease-out infinite;
}

.stock-wave-1 {
    animation-delay: 0s;
}

.stock-wave-2 {
    animation-delay: 1.1s;
}

@keyframes liveWaveRing {
    0% {
        r: 5.5;
        opacity: 0.95;
        stroke-width: 2;
    }
    100% {
        r: 22;
        opacity: 0;
        stroke-width: 0.5;
    }
}

/* 7. Floating Peak Price Pill */
.chart-price-pill {
    position: absolute;
    top: 6px;
    right: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(5, 150, 105, 0.96));
    color: #fff;
    border: 1px solid rgba(52, 211, 153, 0.5);
    border-radius: 8px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    animation: pillFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
    transition: all 0.3s ease;
}

@keyframes pillFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cpp-tag {
    font-size: 8px;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cpp-val {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-display);
}

/* 8. Bullish Trading Volume Bars */
.chart-volume-bars {
    position: absolute;
    bottom: 3px;
    left: 45px;
    right: 12px;
    height: 22px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 2;
}

.vol-bar {
    flex: 1;
    height: var(--h, 30%);
    border-radius: 2px 2px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: volBarGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.vol-bar.up {
    background: linear-gradient(to top, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.7));
}

.vol-bar.down {
    background: linear-gradient(to top, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.5));
}

.vol-bar.active-breakout {
    background: linear-gradient(to top, rgba(56, 189, 248, 0.5), #10B981);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

@keyframes volBarGrow {
    to {
        transform: scaleY(1);
    }
}

/* Scanning vertical laser line on hover */
.chart-laser-line {
    stroke: rgba(56, 189, 248, 0.5);
    stroke-width: 1.5;
    stroke-dasharray: 4, 3;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 9. Interactive Hover Tooltip */
.chart-hover-tooltip {
    position: absolute;
    background: rgba(10, 22, 40, 0.96);
    border: 1px solid rgba(56, 189, 248, 0.5);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.25);
    z-index: 10;
    white-space: nowrap;
}

.chart-hover-tooltip.active {
    opacity: 1;
}

.cht-time {
    color: #94a3b8;
    font-size: 9px;
    margin-bottom: 2px;
}

.cht-val {
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    font-family: var(--font-display);
}

.cht-gain {
    color: #10B981;
    font-weight: 700;
    font-size: 10px;
}

.pc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.ps-item {
    background: rgba(37, 99, 192, 0.08);
    border: 1px solid rgba(37, 99, 192, 0.14);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    transition: var(--trans);
}

.ps-val {
    font-size: 14px;
    font-weight: 800;
    display: block;
    margin-bottom: 2px;
}

.ps-lbl {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 500;
}

/* Floating micro-cards */
.float-card {
    position: absolute;
    background: rgba(7, 17, 31, 0.96);
    border: 1px solid rgba(37, 99, 192, 0.38);
    border-radius: 14px;
    padding: 10px 14px;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    z-index: 3;
}

.fc-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-300));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.fc-label {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 500;
}

.fc-value {
    font-size: 13px;
    font-weight: 800;
}

.fc-1 {
    top: -18px;
    left: -20px;
    animation: fc1float 5.5s ease-in-out infinite;
}

.fc-2 {
    bottom: -18px;
    right: -20px;
    animation: fc2float 6.5s ease-in-out infinite;
}

@keyframes fc1float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes fc2float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

/* ============================================================
   SECTION 5: EQUITY TRADING (#equity)
============================================================ */
.eq {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;
}

.eq-wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    margin-bottom: 60px;
}

.eq-content h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.eq-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(15px, 1.7vw, 18px);
    color: var(--blue-300);
    margin-bottom: 18px;
}

.eq-lede {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.eq-exchanges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.eq-visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ============================================================
   EQUITY SECTION: SMARTPHONE PORTFOLIO & ORBITAL ECOSYSTEM
============================================================ */
.equity-portfolio-ecosystem {
    position: relative;
    width: 100%;
    max-width: 520px;
    min-height: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 20px 0;
}

/* 1. Concentric Circular Radar Orbit Rings */
.eq-orbit-system {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.eq-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(74, 154, 224, 0.25);
    box-sizing: border-box;
    transform-origin: center center;
}

.eq-orbit-ring-1 {
    width: 320px;
    height: 320px;
    border-color: rgba(56, 189, 248, 0.32);
    animation: eqRotateOrbit 40s linear infinite;
}

.eq-orbit-ring-2 {
    width: 430px;
    height: 430px;
    border-color: rgba(74, 154, 224, 0.20);
    animation: eqRotateOrbitReverse 60s linear infinite;
}

.eq-orbit-ring-3 {
    width: 510px;
    height: 510px;
    border-color: rgba(74, 154, 224, 0.12);
    animation: eqRotateOrbit 80s linear infinite;
}

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

@keyframes eqRotateOrbitReverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* 2. Floating Orbiting Glass Service Cards */
.eq-orbit-card {
    position: absolute;
    z-index: 10;
    background: rgba(10, 24, 48, 0.88);
    border: 1.5px solid rgba(74, 154, 224, 0.38);
    border-radius: 16px;
    padding: 10px 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.eq-orbit-card:hover {
    border-color: #38bdf8;
    background: rgba(14, 32, 64, 0.95);
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.4);
    z-index: 25;
}

/* Specific hover override for IPO to preserve horizontal centering */
.eq-orbit-ipo:hover {
    transform: translateX(-50%) scale(1.08) translateY(-4px) !important;
}

.eq-orbit-card .oc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #38bdf8;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.eq-orbit-card:hover .oc-icon {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #ffffff;
    transform: rotate(-6deg);
}

.eq-orbit-card .oc-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: #ffffff;
}

/* Positions & Floating Animations */
.eq-orbit-ipo {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    animation: eqFloatIpo 5s ease-in-out infinite;
}

.eq-orbit-trading {
    top: 20%;
    left: 0%;
    animation: eqFloatTrading 6s ease-in-out infinite 0.5s;
}

.eq-orbit-wealth {
    top: 20%;
    right: 0%;
    animation: eqFloatWealth 6.2s ease-in-out infinite 0.8s;
}

.eq-orbit-mf {
    bottom: 12%;
    left: 0%;
    animation: eqFloatMf 5.5s ease-in-out infinite 1.2s;
}

.eq-orbit-advisory {
    bottom: 12%;
    right: 0%;
    animation: eqFloatAdvisory 5.8s ease-in-out infinite 1.5s;
}

@keyframes eqFloatIpo {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -8px); }
}

@keyframes eqFloatTrading {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes eqFloatMf {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes eqFloatWealth {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes eqFloatAdvisory {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 3. Central Smartphone Device Frame */
.eq-phone-device-wrap {
    position: relative;
    z-index: 5;
    margin-top: 18px;
    animation: eqFloatPhone 6s ease-in-out infinite;
}

@keyframes eqFloatPhone {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.eq-phone-chassis {
    width: 272px;
    max-width: 100%;
    height: 520px;
    background: #020617;
    border-radius: 38px;
    border: 7px solid #1e293b;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 45px rgba(37, 99, 192, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.eq-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 17px;
    background: #090e17;
    border-radius: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.eq-phone-camera {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1e293b;
    box-shadow: inset 0 0 2px #38bdf8;
}

.eq-phone-speaker {
    width: 26px;
    height: 3.5px;
    border-radius: 4px;
    background: #1e293b;
}

.eq-phone-screen {
    flex: 1;
    background: #ffffff;
    color: #0f172a;
    padding: 30px 10px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Urbanist', sans-serif;
    text-align: left;
}

.eq-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
}

.eq-app-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.eq-app-live-chip {
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #059669;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.eq-app-live-chip .pulse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    animation: appPulse 1.5s infinite;
}

.eq-portfolio-metrics {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin-bottom: 8px;
}

.eq-pm-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eq-pm-col.text-right {
    text-align: right;
    align-items: flex-end;
}

.eq-pm-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 1px;
}

.eq-pm-val {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    font-family: var(--font-display);
    white-space: nowrap;
}

.eq-pm-val.text-green {
    color: #16a34a;
}

.eq-pm-val small {
    font-size: 9px;
    font-weight: 700;
    display: inline-block;
}

.eq-portfolio-tabs {
    display: flex;
    border-bottom: 1.5px solid #e2e8f0;
    margin-bottom: 8px;
}

.eq-p-tab {
    flex: 1;
    padding: 6px 0;
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    text-align: center;
}

.eq-p-tab.active {
    color: #16a34a;
}

.eq-p-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 0;
    right: 0;
    height: 2px;
    background: #16a34a;
    border-radius: 2px;
}

.eq-app-search-bar {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.eq-app-filter-icon {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
}

.eq-holdings-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.eq-holdings-list::-webkit-scrollbar {
    width: 3px;
}

.eq-holdings-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.eq-holding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 7px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    transition: background 0.2s ease;
    gap: 4px;
}

.eq-holding-row:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.eq-hr-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1.1;
}

.eq-hr-symbol {
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    font-family: var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eq-hr-sub {
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}

.eq-hr-sub strong {
    color: #334155;
}

.eq-hr-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eq-hr-qty-badge {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1.5px 5px;
    font-size: 8.5px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.eq-hr-qty-badge strong {
    color: #0f172a;
    font-weight: 800;
}

.eq-hr-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.eq-hr-profit {
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}

.eq-hr-ltp {
    font-size: 8.5px;
    color: #64748b;
    white-space: nowrap;
}

.eq-hr-ltp strong {
    color: #0f172a;
}

.eq-phone-home-indicator {
    width: 80px;
    height: 3.5px;
    background: #cbd5e1;
    border-radius: 4px;
    margin: 5px auto 0;
}

.eq-phone-shadow-glow {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    max-width: 85%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(56, 189, 248, 0.45) 0%, rgba(37, 99, 192, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    z-index: 2;
}

/* Responsive Rules for Equity Portfolio Ecosystem */
@media (max-width: 991px) {
    .equity-portfolio-ecosystem {
        min-height: auto;
        padding: 16px 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .equity-portfolio-ecosystem {
        min-height: auto !important;
        padding: 10px 0 !important;
        margin: 0 auto 16px auto !important;
        max-width: 300px !important;
    }

    /* Hide orbiting cards and rings completely on mobile as requested */
    .eq-orbit-card {
        display: none !important;
    }

    .eq-orbit-system {
        display: none !important;
    }

    .eq-phone-device-wrap {
        margin-top: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        animation: none !important;
    }

    .eq-phone-chassis {
        width: 100% !important;
        max-width: 276px !important;
        height: 500px !important;
        border-radius: 32px !important;
        border: 6px solid #1e293b !important;
    }

    .eq-phone-screen {
        padding: 28px 8px 8px !important;
    }
}

@media (max-width: 480px) {
    .eq-phone-chassis {
        max-width: 265px !important;
        height: 480px !important;
        border-radius: 28px !important;
        border: 5px solid #1e293b !important;
    }

    .eq-phone-notch {
        width: 72px !important;
        height: 15px !important;
        top: 6px !important;
    }

    .eq-phone-screen {
        padding: 26px 7px 7px !important;
    }

    .eq-portfolio-metrics {
        padding: 6px 7px !important;
        gap: 5px 6px !important;
        margin-bottom: 6px !important;
    }

    .eq-pm-lbl {
        font-size: 8.5px !important;
    }

    .eq-pm-val {
        font-size: 11px !important;
    }

    .eq-pm-val small {
        font-size: 8px !important;
    }

    .eq-p-tab {
        font-size: 10px !important;
        padding: 5px 0 !important;
    }

    .eq-app-search-bar {
        font-size: 9.5px !important;
        padding: 4px 6px !important;
        margin-bottom: 5px !important;
    }

    .eq-holding-row {
        padding: 5px 6px !important;
    }

    .eq-hr-symbol {
        font-size: 10px !important;
    }

    .eq-hr-sub {
        font-size: 8.5px !important;
    }

    .eq-hr-qty-badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }

    .eq-hr-profit {
        font-size: 9px !important;
    }

    .eq-hr-ltp {
        font-size: 8px !important;
    }
}

.eq-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 6px;
}

.eq-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-300);
    box-shadow: 0 0 8px var(--blue-300);
}

.eq-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 18px;
}

.eq-chart-wrap {
    width: 100%;
    margin-bottom: 20px;
}

.eq-card-exchanges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(37, 99, 192, 0.16);
}

.eq-badge {
    position: absolute;
    right: -10px;
    top: 24px;
    z-index: 3;
}

/* Steps System */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-300), var(--blue-600));
    z-index: 0;
}

.step {
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.step-num-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: var(--navy-800);
    border: 2px solid var(--blue-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--trans);
}

.step:hover .step-num-ring {
    border-color: var(--blue-300);
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(37, 99, 192, 0.2);
}

.step-n {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.step-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.step-ico {
    font-size: 24px;
    margin-bottom: 8px;
}

/* ============================================================
   SECTION 6: FINANCIAL OPPORTUNITIES & PHONE MOCKUP (#secure-signup)
============================================================ */
.rsc-section {
    position: relative;
    width: 100%;
    padding: clamp(60px, 8vw, 120px) 0;
    overflow: hidden;
}

.rsc-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 500px at 50% 45%, rgba(37, 99, 192, 0.12), transparent 70%);
    pointer-events: none;
}

.rsc-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 12px;
}

.rsc-heading {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 46px);
    line-height: 1.2;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto 16px;
}

.rsc-subtext {
    text-align: center;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.7;
    color: var(--gray-400);
    max-width: 540px;
    margin: 0 auto 60px;
}

.rsc-wrap {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    align-items: center;
    gap: 32px;
}

.rsc-col {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.rsc-feature-slot {
    position: relative;
    min-height: 140px;
    width: 100%;
}

.rsc-feature {
    position: absolute;
    top: 0;
    max-width: 300px;
    width: 100%;
    opacity: 0.35;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.rsc-col-left .rsc-feature {
    left: 0;
}

.rsc-col-right .rsc-feature {
    right: 0;
}

.rsc-feature.active {
    opacity: 1;
}

.rsc-feature.group-hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.rsc-feature-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    color: var(--gray-500);
    transition: color 0.4s ease;
}

.rsc-feature.active .rsc-feature-icon {
    color: var(--blue-300);
}

.rsc-feature h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

.rsc-feature p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--gray-400);
    font-weight: 500;
}

.rsc-phone-wrap {
    display: flex;
    justify-content: center;
    position: relative;
}

.rsc-phone {
    position: relative;
    width: 270px;
    height: 520px;
    border-radius: 36px;
    background: linear-gradient(180deg, #FFFFFF, #EDF2FC);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
    overflow: hidden;
}

.rsc-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.rsc-screen {
    position: relative;
    width: 100%;
    height: 100%;
    color: #111111;
}

.rsc-state {
    position: absolute;
    inset: 0;
    padding: 56px 20px 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.rsc-state.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.rsc-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--blue-600);
    margin-bottom: 16px;
}

.rsc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-600);
    box-shadow: 0 0 6px var(--blue-600);
}

.rsc-prod-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 192, 0.1);
    border: 1px solid rgba(37, 99, 192, 0.25);
    margin: 4px auto 14px;
    color: var(--blue-600);
    flex-shrink: 0;
}

.rsc-prod-icon-wrap svg {
    width: 30px;
    height: 30px;
}

.rsc-prod-title {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 4px;
}

.rsc-prod-desc {
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: #555555;
    margin-bottom: 16px;
}

.rsc-prod-stats {
    margin-top: auto;
}

.rsc-prod-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11.5px;
}

.rsc-prod-stat-row:last-of-type {
    border-bottom: none;
}

.rsc-prod-stat-label {
    color: #666666;
    font-weight: 600;
}

.rsc-prod-stat-value {
    color: #111111;
    font-weight: 700;
}

.rsc-group-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.rsc-group-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    transition: var(--trans);
}

.rsc-group-dot.active {
    background: var(--blue-600);
    width: 18px;
    border-radius: 4px;
}

/* ============================================================
   SECTION 7: PRE-IPO & FUNDRAISING (#pre-ipo-fundraising)
============================================================ */
.pio-why-section {
    background-image: url('../img/bg-smit0-3.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

.pio {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;
}

.pio-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.pio-visual {
    position: relative;
    width: 100%;
}

.pio-photo {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 192, 0.24);
    aspect-ratio: 4 / 3.1;
}

.pio-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pio-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(5, 13, 24, 0.75) 100%);
    pointer-events: none;
}

.pio-badges {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.pio-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: rgba(7, 17, 31, 0.94);
    border: 1px solid rgba(37, 99, 192, 0.3);
    border-radius: 100px;
    padding: 8px 16px 8px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
}

.pio-badge-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-300));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pio-badge-check svg {
    width: 11px;
    height: 11px;
}

.pio-content .section-head {
    text-align: left;
    margin-bottom: 28px;
}

.pio-content .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}

.pio-content .section-head p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.pio-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 32px;
}

.pio-card {
    background: rgba(13, 28, 51, 0.55);
    border: 1px solid rgba(37, 99, 192, 0.15);
    border-radius: 16px;
    padding: 22px 20px;
    transition: var(--trans);
}

.pio-card:hover {
    background: rgba(37, 99, 192, 0.15);
    border-color: rgba(74, 154, 224, 0.35);
    transform: translateY(-3px);
}

.pio-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37, 99, 192, 0.25), rgba(74, 154, 224, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--blue-300);
}

.pio-card-icon svg {
    width: 18px;
    height: 18px;
}

.pio-card-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 6px;
}

.pio-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pio-card-desc {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
}

.pio-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-300);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.pio-card-link svg {
    width: 14px;
    height: 14px;
}

.pio-card-link:hover {
    gap: 9px;
    color: var(--white);
}

.pio-cta {
    display: flex;
}

/* ============================================================
   SECTION 8: WHY CHOOSE US (#why)
============================================================ */
.why {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
}

.why-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.why-visual {
    position: relative;
    width: 100%;
}

.donut-card {
    background: rgba(7, 17, 31, 0.92);
    border: 1px solid rgba(37, 99, 192, 0.24);
    border-radius: 22px;
    padding: clamp(20px, 3.5vw, 36px);
    position: relative;
    overflow: hidden;
}

.donut-card-title {
    font-size: 12px;
    color: var(--gray-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.donut-card-h {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 22px;
}

.donut-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.donut-wrap svg {
    max-width: 190px;
    height: auto;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dc-val {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(130deg, var(--white), var(--blue-200));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dc-lbl {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 600;
}

.breakdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(37, 99, 192, 0.07);
    border-radius: 8px;
}

.bd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bd-name {
    font-size: 11px;
    color: var(--gray-400);
}

.bd-pct {
    font-size: 13px;
    font-weight: 700;
}

.w-badge {
    position: absolute;
    background: rgba(7, 17, 31, 0.96);
    border: 1px solid rgba(37, 99, 192, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 3;
}

.wb-1 {
    top: -16px;
    right: -16px;
    animation: wb1 5s ease-in-out infinite;
}

.wb-2 {
    bottom: -16px;
    left: -16px;
    animation: wb2 6.5s ease-in-out infinite;
}

@keyframes wb1 {

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

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

@keyframes wb2 {

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

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

.wb-lbl {
    font-size: 10px;
    color: var(--gray-400);
    margin-bottom: 2px;
}

.wb-val {
    font-size: 15px;
    font-weight: 800;
}

.why-content .section-head {
    text-align: left;
    margin-bottom: 28px;
}

.why-content .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}

.why-content .section-head p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: rgba(13, 28, 51, 0.5);
    border: 1px solid rgba(37, 99, 192, 0.1);
    border-radius: 14px;
    transition: var(--trans);
}

.feature:hover {
    background: rgba(37, 99, 192, 0.14);
    border-color: rgba(74, 154, 224, 0.35);
    transform: translateX(4px);
}

.feat-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37, 99, 192, 0.22), rgba(74, 154, 224, 0.14));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.feat-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.feat-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
}

/* ============================================================
   SECTION 9: GENERATIONAL TRUST (#generational-trust)
============================================================ */
.gt {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;
}

.gt-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.gt-visual {
    position: relative;
    width: 100%;
}

.gt-photo {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 192, 0.24);
    aspect-ratio: 4 / 3.1;
}

.gt-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gt-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(5, 13, 24, 0.75) 100%);
    pointer-events: none;
}

.gt-badges {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.gt-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: rgba(7, 17, 31, 0.94);
    border: 1px solid rgba(37, 99, 192, 0.3);
    border-radius: 100px;
    padding: 8px 16px 8px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
}

.gt-badge-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-300));
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-badge-check svg {
    width: 11px;
    height: 11px;
}

.gt-ring-badge {
    position: absolute;
    top: -14px;
    left: -14px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(7, 17, 31, 0.96);
    border: 1.5px solid rgba(74, 154, 224, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 2;
    color: var(--blue-300);
}

.gt-ring-badge svg {
    width: 26px;
    height: 26px;
}

.gt-content .gt-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 14px;
}

.gt-content .gt-tag::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
    border-radius: 2px;
}

.gt-content h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
}

.gt-evolve {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.gt-evolve span {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 5px 12px;
}

.gt-evolve span.gt-final {
    color: var(--blue-200);
    background: rgba(37, 99, 192, 0.15);
    border-color: rgba(74, 154, 224, 0.4);
    font-weight: 700;
}

.gt-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

.gt-close {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(37, 99, 192, 0.18);
}

.gt-close-1 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.gt-close-2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 50%, var(--blue-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 22px;
}

/* ============================================================
   SECTION 07: BNI - CONNECTED TO THE BUSINESS COMMUNITY (#bni)
============================================================ */
.bni-section {
    position: relative;
    padding: clamp(60px, 8vw, 110px) 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(7, 17, 31, 0.4) 0%, rgba(10, 22, 40, 0.9) 50%, rgba(7, 17, 31, 0.6) 100%);
    /* border-top: 1px solid rgba(37, 99, 192, 0.12); */
}

.bni-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 192, 0.16) 0%, rgba(126, 200, 240, 0.04) 50%, transparent 70%);
    top: 20%;
    right: -100px;
    pointer-events: none;
    z-index: 1;
}

.bni-wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 5vw, 70px);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left Content */
.bni-content {
    display: flex;
    flex-direction: column;
}

.bni-heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    color: var(--white);
    letter-spacing: -0.5px;
    margin-bottom: 22px;
}

/* Member Badge */
.bni-member-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: var(--trans);
    align-self: flex-start;
}

.bni-member-badge:hover {
    background: rgba(37, 99, 192, 0.18);
    border-color: rgba(126, 200, 240, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 99, 192, 0.25);
}

.bni-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 192, 0.4);
}

.bni-badge-icon svg {
    width: 22px;
    height: 22px;
}

.bni-badge-info {
    display: flex;
    flex-direction: column;
}

.bni-badge-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.5px;
}

.bni-badge-sub {
    font-size: 12px;
    color: var(--blue-200);
    font-weight: 600;
}

/* Narrative Copy */
.bni-lede {
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
    font-weight: 500;
}

.bni-lede strong {
    color: var(--white);
    font-weight: 700;
}

.bni-highlight {
    color: var(--blue-200);
    text-shadow: 0 0 12px rgba(74, 154, 224, 0.3);
}

.bni-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 16px;
}

/* Tagline Bar */
.bni-quote-bar {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(37, 99, 192, 0.16) 0%, rgba(13, 28, 51, 0.6) 100%);
    border-left: 4px solid var(--blue-400);
    border-radius: 0 14px 14px 0;
    border-top: 1px solid rgba(74, 154, 224, 0.2);
    border-right: 1px solid rgba(74, 154, 224, 0.2);
    border-bottom: 1px solid rgba(74, 154, 224, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: var(--trans);
}

.bni-quote-bar:hover {
    border-left-color: var(--blue-300);
    transform: translateX(4px);
}

.bni-quote-icon {
    color: var(--blue-300);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bni-quote-main {
    font-family: var(--font-display);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 800;
    background: linear-gradient(130deg, #FFFFFF 0%, #BAE6FD 50%, var(--blue-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.3px;
}

/* Right Column - Visual Photo */
.bni-visual {
    position: relative;
    width: 100%;
}

.bni-photo {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 192, 0.24);
    aspect-ratio: 4 / 3.1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

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

.bni-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(5, 13, 24, 0.6) 100%);
    pointer-events: none;
}

.bni-card {
    position: relative;
    background: rgba(13, 28, 51, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: var(--trans);
}

.bni-card:hover {
    border-color: rgba(126, 200, 240, 0.5);
    box-shadow: 0 24px 60px rgba(37, 99, 192, 0.25);
    transform: translateY(-4px);
}

.bni-card-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(74, 154, 224, 0.35) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.bni-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 10px;
}

.bni-chip-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #34D399;
    letter-spacing: 0.5px;
}

.bni-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 8px #34D399;
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.bni-badge-loc {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue-200);
    background: rgba(37, 99, 192, 0.18);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 100px;
    padding: 5px 14px;
}

/* Network Items Matrix */
.bni-network-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 26px;
}

.bni-net-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    background: rgba(7, 17, 31, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: var(--trans);
}

.bni-net-item:hover {
    background: rgba(37, 99, 192, 0.15);
    border-color: rgba(74, 154, 224, 0.4);
    transform: translateX(6px);
}

.bni-net-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 192, 0.3), rgba(74, 154, 224, 0.18));
    border: 1px solid rgba(74, 154, 224, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-300);
    flex-shrink: 0;
    transition: var(--trans);
}

.bni-net-item:hover .bni-net-icon {
    color: #fff;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
}

.bni-net-icon svg {
    width: 20px;
    height: 20px;
}

.bni-net-data h4 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.bni-net-data p {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Card Footer Stats */
.bni-card-foot {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.bni-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bni-stat-num {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
}

.bni-stat-lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    margin-top: 2px;
}

.bni-foot-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
}

/* Floating Badge */
.bni-float-badge {
    position: absolute;
    bottom: -14px;
    right: -10px;
    background: rgba(7, 17, 31, 0.96);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 3;
    animation: bniFloat 4.5s ease-in-out infinite;
}

.bni-fb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 8px var(--blue-400);
}

@keyframes bniFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================================
   SECTION 10: HOW WE WORK (#how-we-work)
============================================================ */
.hww-service-section {
    background-image: url('../img/bg-smit0-3.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

.hww {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;
}

.hww .container {
    max-width: 940px;
    margin: 0 auto;
}

.hww-head {
    max-width: 640px;
    margin-bottom: 56px;
}

.hww-head h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.2;
}

.hww-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 14px;
}

.hww-tag::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
    border-radius: 2px;
}

.hww-list {
    position: relative;
    padding-left: 28px;
}

.hww-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg, var(--blue-600), rgba(37, 99, 192, 0.1) 92%);
}

.hww-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 16px 24px 8px;
    border-bottom: 1px solid rgba(37, 99, 192, 0.14);
    transition: background 0.3s ease;
}

.hww-step:first-child {
    padding-top: 6px;
}

.hww-step:last-child {
    border-bottom: none;
    padding-bottom: 6px;
}

.hww-step:hover {
    background: rgba(37, 99, 192, 0.06);
    border-radius: 14px;
}

.hww-step::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 30px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--navy-800);
    border: 2px solid var(--blue-400);
    transition: var(--trans);
}

.hww-step:hover::before {
    border-color: var(--blue-200);
    box-shadow: 0 0 0 4px rgba(126, 200, 240, 0.25);
}

.hww-step-top {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hww-ghost {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(74, 154, 224, 0.45);
    transition: var(--trans);
    user-select: none;
}

.hww-step:hover .hww-ghost {
    -webkit-text-stroke-color: var(--white);
}

.hww-step-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 192, 0.3), rgba(74, 154, 224, 0.16));
    border: 1px solid rgba(74, 154, 224, 0.35);
    box-shadow: 0 4px 14px rgba(37, 99, 192, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-300);
    flex-shrink: 0;
    margin: 0;
    transition: all 0.3s ease;
}

.hww-step-icon svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.hww-step:hover .hww-step-icon {
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    border-color: rgba(126, 200, 240, 0.6);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 192, 0.4);
}

.hww-step-text {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hww-step-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 4px;
    line-height: 1.25;
}

.hww-step-desc {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
    max-width: 620px;
    margin: 0;
}

.section-head {
    text-align: center;
    margin-bottom: 50px;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.8vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.section-head p {
    font-size: 15.5px;
    color: #5b5b5b;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ============================================================
   SECTION 13: 3D ISOMETRIC CTA SECTION (#cta)
============================================================ */
.cta-footer-section {
    background-image: url('../img/bg-smit0-3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
}

.cta-section,
.cta {
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(5, 13, 26, 0.95) 0%, rgba(10, 24, 48, 0.92) 50%, rgba(6, 17, 36, 0.98) 100%);
    border-top: 1px solid rgba(74, 154, 224, 0.16);
}

.cta-ambient-glow {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translate(30%, -50%);
    width: 650px;
    height: 550px;
    background: radial-gradient(ellipse 60% 50% at center, rgba(37, 99, 192, 0.28) 0%, rgba(56, 189, 248, 0.08) 45%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.cta-grid-wrap {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left: Typography & Action Block */
.cta-left-content {
    display: flex;
    flex-direction: column;
}

.cta-main-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.16;
    color: var(--white);
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.cta-narrative {
    font-size: clamp(15px, 1.8vw, 16.5px);
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.76);
    margin-bottom: 26px;
    max-width: 580px;
}

.cta-action-block {
    margin-bottom: 24px;
}

.cta-action-lead {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: #BAE6FD;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
}

.cta-action-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.cta-btn-glow {
    box-shadow: 0 8px 24px rgba(37, 99, 192, 0.4);
    transition: var(--trans);
}

.cta-btn-glow:hover {
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.5);
    transform: translateY(-3px);
}

.cta-micro-trust {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.cta-micro-trust span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Right: 3D Isometric Visual Presentation */
.cta-right-visual {
    position: relative;
    width: 100%;
}

.cta-iso-stage {
    perspective: 1200px;
    position: relative;
    width: 100%;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cta-iso-cluster {
    position: relative;
    width: 100%;
    max-width: 440px;
    transform-style: preserve-3d;
    transform: rotateX(14deg) rotateY(-16deg) rotateZ(3deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-iso-stage:hover .cta-iso-cluster {
    transform: rotateX(8deg) rotateY(-10deg) rotateZ(1.5deg) translateY(-6px);
}

/* Isometric Card Base */
.cta-iso-card {
    background: rgba(10, 24, 48, 0.86);
    border: 1.5px solid rgba(74, 154, 224, 0.32);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: var(--trans);
}

/* Back Upper Card */
.cta-iso-card-top {
    position: absolute;
    top: -36px;
    right: -10px;
    width: 88%;
    z-index: 1;
    padding: 20px 22px;
    transform: translateZ(-25px);
    background: linear-gradient(145deg, rgba(16, 36, 70, 0.9), rgba(7, 18, 38, 0.94));
    border-color: rgba(74, 154, 224, 0.28);
}

.cic-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cic-user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cic-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.cic-avatar svg {
    width: 18px;
    height: 18px;
}

.cic-user-text {
    display: flex;
    flex-direction: column;
}

.cic-greeting {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--white);
}

.cic-role {
    font-size: 11px;
    color: var(--blue-200);
    font-weight: 600;
}

.cic-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 8px #34D399;
}

.cic-metric-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cic-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cic-lbl {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
    font-weight: 600;
}

.cic-val {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.5px;
}

.cic-val-sub {
    font-size: 12px;
    font-weight: 700;
    color: #38BDF8;
}

.cic-link-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue-300);
    margin-top: 4px;
}

/* Front Main Portfolio Card */
.cta-iso-card-front {
    position: relative;
    width: 92%;
    z-index: 2;
    padding: 24px 22px;
    margin-top: 48px;
    background: linear-gradient(145deg, rgba(13, 29, 58, 0.94), rgba(6, 16, 34, 0.96));
    border-color: rgba(126, 200, 240, 0.45);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(37, 99, 192, 0.18);
}

.cic-portfolio-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.cph-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
}

.cph-pill {
    font-size: 11px;
    font-weight: 700;
    color: #34D399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 100px;
    padding: 3px 10px;
}

.cic-donut-layout {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cic-donut-box {
    position: relative;
    width: 86px;
    height: 86px;
    min-width: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cic-donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cic-donut-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.cic-donut-bar-1 {
    fill: none;
    stroke: var(--blue-400);
    stroke-width: 8;
    stroke-dasharray: 238;
    stroke-dashoffset: 65;
    stroke-linecap: round;
}

.cic-donut-bar-2 {
    fill: none;
    stroke: #38BDF8;
    stroke-width: 8;
    stroke-dasharray: 238;
    stroke-dashoffset: 195;
    stroke-linecap: round;
}

.cic-donut-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cdc-pct {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
}

.cdc-txt {
    font-size: 8.5px;
    color: var(--blue-200);
    font-weight: 600;
    margin-top: 2px;
}

.cic-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdl-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-cyan {
    background: #38BDF8;
    box-shadow: 0 0 6px #38BDF8;
}

.dot-blue {
    background: var(--blue-400);
    box-shadow: 0 0 6px var(--blue-400);
}

.cdl-text {
    display: flex;
    flex-direction: column;
}

.cdl-text strong {
    font-size: 12px;
    color: var(--white);
    font-weight: 700;
}

.cdl-text span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
}

.cic-rows-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(7, 17, 31, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 11.5px;
}

.crf-label {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.crf-val {
    color: var(--blue-200);
    font-weight: 700;
}

/* 3D Floating Pin Badge */
.cta-iso-pin {
    position: absolute;
    top: 6px;
    left: -16px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-family: var(--font-display);
    box-shadow: 0 10px 24px rgba(37, 99, 192, 0.5);
    z-index: 4;
    animation: ctaPinFloat 4s ease-in-out infinite;
}

@keyframes ctaPinFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.cta-iso-shadow {
    position: absolute;
    bottom: -30px;
    left: 10%;
    width: 80%;
    height: 40px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
    transform: rotateX(75deg);
    pointer-events: none;
}

.cta-iso-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    width: 100%;
    margin-top: 14px;
    font-weight: 500;
}

/* ============================================================
   SECTION 14: GLOBAL FOOTER
============================================================ */
footer {
    position: relative;
    background: linear-gradient(180deg, #050d1a 0%, #030810 100%);
    border-top: 1px solid rgba(74, 154, 224, 0.22);
    padding: clamp(60px, 7vw, 90px) 0 36px;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1000px, 90vw);
    height: 350px;
    background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(37, 99, 192, 0.18) 0%, rgba(56, 189, 248, 0.05) 50%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}

footer .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.85fr 1.15fr 1.1fr;
    gap: clamp(24px, 3.5vw, 48px);
    margin-bottom: 48px;
}

.footer-brand .nav-logo svg {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.footer-brand-tagline {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    margin: 14px 0 10px;
    letter-spacing: 0.3px;
}

.footer-services-inline {
    font-size: 13px;
    line-height: 1.8;
    color: var(--gray-400);
    margin-bottom: 14px;
}

.footer-services-inline a {
    color: var(--gray-400);
    text-decoration: none;
    transition: var(--trans);
}

.footer-services-inline a:hover {
    color: var(--blue-200);
}

.footer-services-inline span.pipe {
    color: rgba(74, 154, 224, 0.35);
    margin: 0 4px;
}

.footer-locations-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-locations-inline a {
    color: var(--blue-200);
    text-decoration: none;
    transition: var(--trans);
}

.footer-locations-inline a:hover {
    color: var(--white);
    text-shadow: 0 0 10px rgba(126, 200, 240, 0.5);
}

.social-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.soc {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 192, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: var(--trans);
}

.soc:hover {
    background: rgba(37, 99, 192, 0.2);
    border-color: var(--blue-400);
    color: var(--white);
    transform: translateY(-2px);
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 13.5px;
    transition: var(--trans);
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-links a:hover {
    color: var(--blue-300);
    transform: translateX(3px);
}

.footer-bottom {
    border-top: 1px solid rgba(37, 99, 192, 0.12);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom p {
    font-size: 12px;
    color: #fff;
}

.footer-bottom a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom a:hover {
    color: var(--gray-300);
}

.sebi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 192, 0.1);
    border: 1px solid rgba(37, 99, 192, 0.22);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue-300);
}

/* ============================================================
   FOOTER USEFUL LINKS SECTION
============================================================ */
.footer-useful-links-box {
    background: linear-gradient(135deg, rgba(13, 28, 51, 0.7) 0%, rgba(8, 18, 33, 0.85) 100%);
    border: 1px solid rgba(74, 154, 224, 0.22);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 36px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer-useful-links-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 200, 240, 0.5), transparent);
}

.ful-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #BAE6FD;
    margin-bottom: 12px;
}

.ful-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
}

.ful-links a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(37, 99, 192, 0.08);
    border: 1px solid rgba(74, 154, 224, 0.15);
    transition: all 0.25s ease;
    display: inline-block;
    letter-spacing: 0.3px;
}

.ful-links a:hover {
    color: #FFFFFF;
    background: rgba(37, 99, 192, 0.3);
    border-color: rgba(126, 200, 240, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 192, 0.3);
}

.ful-pipe {
    color: rgba(74, 154, 224, 0.3);
    font-size: 12px;
    user-select: none;
}

@media (max-width: 768px) {
    .footer-useful-links-box {
        margin-top: 24px;
        padding: 16px 12px;
    }
    .ful-links {
        gap: 6px 6px;
    }
    .ful-pipe {
        display: none;
    }
    .ful-links a {
        font-size: 11px;
        padding: 4px 8px;
    }
}



/* ============================================================
   SCROLL TO TOP FLOATING BUTTON
============================================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(7, 17, 31, 0.88);
    border: 1.5px solid rgba(74, 154, 224, 0.4);
    color: var(--blue-300);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-btn:hover {
    background: var(--blue-600);
    border-color: var(--blue-200);
    color: var(--white);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(37, 99, 192, 0.55);
}

.scroll-top-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES (COMPREHENSIVE AUDIT & ANIMATIONS)
============================================================ */

/* ── 1. LARGE TABLETS & SMALL LAPTOPS (<= 1024px) ── */
@media (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .hero-inner .hero-badge {
        margin: 0 auto 20px;
    }

    .hero-sub-ui {
        max-width: 580px;
        margin: 16px auto 24px;
    }

    .hero-visual {
        max-width: 420px;
        margin: 0 auto;
    }

    .float-card,
    .w-badge,
    .eq-badge,
    .gt-ring-badge {
        display: none !important;
    }

    .wwh-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .steps::before {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* ── 2. TABLETS & PHABLETS (<= 991px) ── */
@media (max-width: 991px) {
    :root {
        --nav-height: 72px;
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .eq-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .eq-content .section-tag,
    .eq-exchanges,
    .eq-cta {
        justify-content: center;
    }

    .eq-visual {
        max-width: 480px;
        margin: 0 auto;
    }

    /* Financial Opportunities / RSC Section on Tablets */
    .rsc-section {
        padding: clamp(40px, 6vw, 70px) 0;
    }

    .rsc-subtext {
        margin-bottom: 28px;
    }

    .rsc-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 24px;
    }

    .rsc-phone-wrap {
        order: 1;
        margin-bottom: 8px;
    }

    .rsc-phone {
        width: 250px;
        height: 380px;
        border-radius: 28px;
    }

    .rsc-state {
        padding: 38px 14px 16px;
    }

    .rsc-prod-icon-wrap {
        width: 48px;
        height: 48px;
        margin: 2px auto 8px;
    }

    .rsc-prod-icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .rsc-prod-title {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .rsc-prod-desc {
        font-size: 11px;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .rsc-prod-stat-row {
        padding: 4px 0;
        font-size: 11px;
    }

    .rsc-col {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .rsc-col-left {
        order: 2;
    }

    .rsc-col-right {
        order: 3;
    }

    .rsc-feature-slot {
        position: relative;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        flex: none;
        margin: 0 auto;
    }

    .rsc-feature {
        position: relative;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(14, 28, 54, 0.75);
        border: 1px solid rgba(74, 154, 224, 0.25);
        border-radius: 16px;
        padding: 18px 20px;
        text-align: center;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .rsc-feature.group-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .rsc-feature:hover,
    .rsc-feature.active {
        transform: translateY(-2px);
        border-color: var(--blue-400);
        box-shadow: 0 10px 24px rgba(37, 99, 192, 0.25);
    }

    .rsc-feature-icon {
        margin: 0 auto 10px;
        color: var(--blue-300);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rsc-feature h3 {
        font-size: 16.5px;
        margin-bottom: 6px;
        color: var(--white);
        text-align: center;
        width: 100%;
    }

    .rsc-feature p {
        font-size: 13px;
        line-height: 1.55;
        color: var(--gray-400);
        text-align: center;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }

    .rsc-group-dots {
        display: none;
    }

    .pio-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pio-visual {
        max-width: 520px;
        margin: 0 auto;
    }

    .pio-content .section-head {
        text-align: center;
    }

    .pio-content .section-head p {
        margin: 0 auto;
    }

    .pio-cta {
        justify-content: center;
    }

    .why-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .why-visual {
        max-width: 480px;
        margin: 0 auto;
    }

    .why-content .section-head {
        text-align: center;
    }

    .why-content .section-head p {
        margin: 0 auto;
    }

    .gt-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gt-visual {
        order: 1;
        max-width: 520px;
        margin: 0 auto;
    }

    .gt-content {
        order: 2;
        text-align: center;
    }

    .gt-content .gt-tag,
    .gt-evolve {
        justify-content: center;
    }

    .gt-close {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bni-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .bni-visual {
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }

    .bni-float-badge {
        display: none;
    }

    .cta-grid-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-left-content {
        text-align: center;
        align-items: center;
    }

    .cta-action-btns {
        justify-content: center;
    }

    .cta-micro-trust {
        justify-content: center;
    }

    .cta-iso-cluster {
        transform: none !important;
        max-width: 480px;
        margin: 0 auto;
    }

    .cta-iso-card-top {
        position: static;
        width: 100%;
        transform: none;
        margin-bottom: 16px;
    }

    .cta-iso-card-front {
        width: 100%;
        margin-top: 0;
    }

    .cta-iso-pin {
        display: none;
    }
}

/* ── 3. STANDARD MOBILE SCREENS (<= 768px) ── */
@media (max-width: 768px) {
    .container {
        padding: 0 18px;
    }

    /* Fixed top spacing for Hero on Mobile */
    .new-hero-section {
        padding: 120px 0 40px;
        margin-top: 0;
        min-height: auto;
    }

    .hero {
        padding: 36px 0;
    }

    .partners-wrap {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .partners-label {
        width: 100%;
    }

    .partners-label p {
        font-size: 13px;
    }

    .partners-track {
        gap: 28px;
    }

    .p-logo span {
        font-size: 12.5px;
    }

    /* Step Cards Modern 2x2 Grid on Mobile */
    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 24px;
    }

    .step {
        background: rgba(12, 26, 48, 0.8);
        border: 1px solid rgba(74, 154, 224, 0.25);
        border-radius: 14px;
        padding: 16px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .step:hover {
        transform: translateY(-3px);
        border-color: var(--blue-300);
        box-shadow: 0 10px 24px rgba(37, 99, 192, 0.25);
    }

    .step-num-ring {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        margin: 0 auto 8px;
        background: rgba(37, 99, 192, 0.18);
        border: 1.5px solid var(--blue-400);
    }

    .step-n {
        font-size: 15px;
        font-weight: 800;
    }

    .step-name {
        font-size: 13.5px;
        color: var(--white);
        margin-bottom: 2px;
        font-weight: 700;
    }

    .step-desc {
        font-size: 11px;
        color: var(--gray-400);
        line-height: 1.4;
    }

    .hero-btns,
    .cta-btns {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 12px;
    }

    .hero-btns .btn,
    .cta-btns .btn {
        width: 100%;
        justify-content: center;
    }

    .pio-badges,
    .gt-badges {
        position: static;
        margin-top: 14px;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .pio-badge,
    .gt-badge {
        width: 100%;
        align-self: stretch;
    }

    .hww-head {
        text-align: center;
        margin-bottom: 30px;
    }

    .hww-head .hww-tag {
        justify-content: center;
    }

    .hww-list {
        padding-left: 18px;
        max-width: 520px;
        margin: 0 auto;
    }

    .hww-step {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 8px 16px 2px;
    }

    .hww-step::before {
        left: -22px;
        top: 20px;
    }

    .hww-step-top {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .hww-ghost {
        font-size: 34px;
        line-height: 1;
        margin: 0;
    }

    .hww-step-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        margin: 0;
    }

    .hww-step-icon svg {
        width: 18px;
        height: 18px;
    }

    .hww-step-text {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .hww-step-title {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .hww-step-desc {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .cta-trust {
        gap: 10px 16px;
    }

    .scroll-top-btn {
        bottom: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
    }
}

/* ── 4. SMALL MOBILE SCREENS (<= 640px) ── */
@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    .wwh-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        justify-items: center;
    }

    .wwh-card {
        min-height: auto;
        padding: 22px 18px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .wwh-icon {
        margin: 0 auto 16px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wwh-card h3 {
        text-align: center;
        font-size: 19px;
        margin-bottom: 8px;
        width: 100%;
    }

    .wwh-card p {
        text-align: center;
        font-size: 14px;
        line-height: 1.55;
        max-width: 380px;
        margin: 0 auto;
    }

    .pio-cards {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
        width: 100%;
        margin: 0 auto 24px auto;
        justify-items: center;
    }

    .pio-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 22px 18px;
    }

    .pio-card-icon {
        margin: 0 auto 12px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pio-card-overline {
        text-align: center;
        width: 100%;
    }

    .pio-card-title {
        text-align: center;
        width: 100%;
    }

    .pio-card-desc {
        text-align: center;
        width: 100%;
        max-width: 380px;
        margin: 0 auto 14px auto;
    }

    .pio-card-link {
        justify-content: center;
        margin: 0 auto;
        display: inline-flex;
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* RSC Mobile Single-Column / Structured Cards */
    .rsc-phone {
        width: 230px;
        height: 350px;
        border-radius: 24px;
    }

    .rsc-state {
        padding: 34px 12px 14px;
    }

    .rsc-prod-icon-wrap {
        width: 44px;
        height: 44px;
        margin: 2px auto 8px;
    }

    .rsc-prod-icon-wrap svg {
        width: 20px;
        height: 20px;
    }

    .rsc-prod-title {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .rsc-prod-desc {
        font-size: 10.5px;
        margin-bottom: 8px;
    }

    .rsc-prod-stat-row {
        padding: 4px 0;
        font-size: 10.5px;
    }

    .rsc-feature-slot {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .rsc-feature {
        padding: 12px 14px;
        text-align: left;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .rsc-feature-icon {
        margin: 0;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }

    .rsc-feature h3 {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .rsc-feature p {
        font-size: 11.5px;
        line-height: 1.45;
    }

    .donut-card {
        padding: 18px 14px;
    }

    .donut-wrap svg {
        max-width: 150px;
    }

    .dc-val {
        font-size: 18px;
    }

    .bni-section {
        padding: 44px 0;
    }

    .bni-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bni-content {
        align-items: center;
        text-align: center;
    }

    .bni-content .section-tag {
        margin: 0 auto 12px auto;
    }

    .bni-heading {
        text-align: center;
        margin-bottom: 16px;
    }

    .bni-member-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        margin: 0 auto 18px auto;
        padding: 10px 16px;
        align-self: center;
    }

    .bni-lede,
    .bni-body {
        text-align: center;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .bni-quote-bar {
        width: 100%;
        max-width: 420px;
        margin: 14px auto 0 auto;
        justify-content: center;
        border-radius: 12px;
        padding: 12px 14px;
    }

    .bni-visual {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    .bni-card {
        padding: 20px 16px;
        border-radius: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .bni-card-head {
        padding-bottom: 14px;
        margin-bottom: 16px;
        gap: 8px;
    }

    .bni-chip-live {
        font-size: 11px;
        padding: 4px 10px;
    }

    .bni-badge-loc {
        font-size: 11px;
        padding: 4px 10px;
    }

    .bni-network-grid {
        gap: 10px;
        margin-bottom: 18px;
    }

    .bni-net-item {
        padding: 12px 12px;
        gap: 10px;
        align-items: center;
        border-radius: 12px;
    }

    .bni-net-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 9px;
    }

    .bni-net-icon svg {
        width: 17px;
        height: 17px;
    }

    .bni-net-data h4 {
        font-size: 13.5px;
        margin-bottom: 2px;
        line-height: 1.25;
    }

    .bni-net-data p {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .bni-card-foot {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding-top: 14px;
        text-align: center;
    }

    .bni-stat-num {
        font-size: 14px;
    }

    .bni-stat-lbl {
        font-size: 9.5px;
        white-space: nowrap;
    }

    .bni-foot-divider {
        display: none;
    }

    .cta-section,
    .cta {
        padding: 50px 0;
    }

    .cta-iso-card-top,
    .cta-iso-card-front {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .cic-donut-layout {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cic-donut-legend {
        align-items: center;
    }

    .cta-action-btns .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 5. EXTRA SMALL MOBILE DEVICES (<= 380px) ── */
@media (max-width: 380px) {
    .container {
        padding: 0 12px;
    }

    .hero-h1 {
        font-size: 26px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 13.5px;
    }

    .trust-chip {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    .breakdowns {
        grid-template-columns: 1fr;
    }

    .rsc-phone {
        width: 210px;
        height: 330px;
    }

    .pc-stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ============================================================
   PAGE 02: ABOUT US CUSTOM SECTIONS & STYLING
============================================================ */

/* Approach Highlight Box */
.about-approach-box {
    margin-top: 24px;
    padding: 18px 24px;
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 14px;
    display: inline-block;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(7, 17, 31, 0.3);
}

.about-approach-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-200);
    margin-bottom: 4px;
}

.about-approach-text {
    /* font-family: var(--font-display); */
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    color: var(--white);
}



/* Story Section */
.about-story-section {
    padding: clamp(60px, 8vw, 120px) 0;
    /* background: var(--navy-900); */
    position: relative;
    overflow: hidden;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

.story-lead-h {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 20px;
}

.story-paras {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--gray-300);
}

.story-quote-card {
    background: rgba(37, 99, 192, 0.14);
    border: 1px solid rgba(74, 154, 224, 0.3);
    /* background: linear-gradient(145deg, var(--navy-800) 0%, var(--navy-950) 100%);
    border: 1px solid rgba(74, 154, 224, 0.3); */
    border-radius: 22px;
    padding: clamp(24px, 4vw, 38px);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.story-quote-card::before {
    content: '“';
    font-family: var(--font-display);
    font-size: 110px;
    line-height: 0.8;
    color: rgba(74, 154, 224, 0.2);
    position: absolute;
    top: 20px;
    left: 20px;
    pointer-events: none;
}

.story-quote-text {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    line-height: 1.35;
    color: var(--white);
    position: relative;
    z-index: 2;
    margin-bottom: 18px;
}

.story-quote-sub {
    font-size: 14px;
    color: var(--blue-200);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===================================================
   VISION & MISSION SECTION (CLEAN MODERN ARCHITECTURE)
=================================================== */
.vision-mission-section {
    padding: clamp(50px, 7vw, 100px) 0;
    position: relative;
    width: 100%;
}

.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3.5vw, 36px);
    width: 100%;
    align-items: stretch;
}

.vm-card {
    position: relative;
    background: linear-gradient(155deg, rgba(13, 28, 54, 0.78) 0%, rgba(7, 16, 32, 0.94) 100%);
    border: 1px solid rgba(74, 154, 224, 0.22);
    border-radius: 22px;
    padding: clamp(32px, 4.5vw, 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    box-sizing: border-box;
    width: 100%;
}

/* Glowing Top Line */
.vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563C0, #38bdf8, #7EC8F0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

.vm-card:hover {
    transform: translateY(-7px);
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(155deg, rgba(16, 35, 68, 0.9) 0%, rgba(9, 20, 38, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.16);
}

.vm-card:hover::before {
    transform: scaleX(1);
}

/* Card Header */
.vm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.vm-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-300);
    background: rgba(37, 99, 192, 0.16);
    border: 1px solid rgba(74, 154, 224, 0.32);
    padding: 7px 16px;
    border-radius: 100px;
}

.vm-badge i {
    font-size: 15px;
    color: #38bdf8;
}

.vm-card-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: rgba(74, 154, 224, 0.35);
    letter-spacing: 1px;
}

/* Card Headline */
.vm-title {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.3vw, 27px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.32;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

/* Subtle Accent Divider */
.vm-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(74, 154, 224, 0.35), rgba(74, 154, 224, 0.06));
    margin-bottom: 22px;
}

/* Description Text */
.vm-desc {
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* Responsive Media Query */
@media (max-width: 991px) {
    .vm-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}





.values-gt-section .section-head h2,
.values-gt-section .head-title-values h2 {
    color: #fff;
}

.values-gt-section .section-head p,
.values-gt-section .head-title-values p {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 500;
}

/* Values Grid */
.values-section {
    padding: clamp(60px, 8vw, 120px) 0;
    position: relative;
    width: 100%;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    width: 100%;
}

.value-card {
    border-radius: 18px;
    padding: 30px 24px;
    position: relative;
    transition: var(--trans);
    display: flex;
    flex-direction: column;
    background: rgba(10, 22, 40, 0.88);
    border: 1px solid rgba(74, 154, 224, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
    width: 100%;
}

.value-card.val-card-wide {
    grid-column: span 2;
}

.value-card:hover {
    border-color: var(--blue-400);
    background: rgba(15, 32, 64, 0.95);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(37, 99, 192, 0.25);
}

.val-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 50%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.val-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.val-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-300);
}

/* BNI About Showcase Extensions */
.bni-card-showcase {
    background: linear-gradient(145deg, var(--navy-900) 0%, #050D18 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.35);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.bni-partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 192, 0.2);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--blue-100);
    margin-bottom: 20px;
}

.bni-card-h {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 20px;
}

.bni-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bni-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--gray-300);
}

.bni-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 8px var(--blue-400);
    flex-shrink: 0;
}

.bni-quote-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--blue-100);
}

/* ===================================================
   FOUNDER & LEADERSHIP VISION SECTION (ABOUT PAGE)
=================================================== */
.about-founder-section {
    padding: clamp(70px, 9vw, 120px) 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 50%, rgba(37, 99, 192, 0.12) 0%, transparent 60%);
    border-top: 1px solid rgba(74, 154, 224, 0.14);
    border-bottom: 1px solid rgba(74, 154, 224, 0.14);
}

.founder-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: clamp(40px, 6vw, 70px);
    align-items: center;
}

/* Left: Portrait Card */
.founder-photo-wrapper {
    position: relative;
}

.founder-photo-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1.5px solid rgba(74, 154, 224, 0.32);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(37, 99, 192, 0.22);
    background: linear-gradient(155deg, rgba(13, 28, 54, 0.9) 0%, rgba(7, 16, 32, 0.98) 100%);
}

.founder-photo-card img {
    width: 100%;
    height: auto;
    max-height: 570px;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.founder-photo-card:hover img {
    transform: scale(1.03);
}

.founder-photo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(6, 14, 26, 0.85) 100%);
}

/* Floating Badges on Portrait */
.founder-badge-top {
    position: absolute;
    top: 22px;
    right: -14px;
    background: rgba(10, 22, 40, 0.92);
    border: 1px solid rgba(74, 154, 224, 0.38);
    border-radius: 14px;
    padding: 10px 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    animation: founderFloat 4s ease-in-out infinite alternate;
}

@keyframes founderFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

.founder-bni-logo {
    background: #E11D48;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

.founder-badge-top-text {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.25;
}

.founder-badge-top-text span {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #93C5FD;
}

.founder-badge-bottom {
    position: absolute;
    bottom: 22px;
    left: -14px;
    background: rgba(10, 22, 40, 0.92);
    border: 1px solid rgba(74, 154, 224, 0.38);
    border-radius: 14px;
    padding: 12px 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.founder-badge-bottom-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563C0 0%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 19px;
    flex-shrink: 0;
}

.founder-badge-bottom-info strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.2px;
}

.founder-badge-bottom-info span {
    font-size: 11px;
    color: #93C5FD;
}

/* Right Content */
.founder-content {
    display: flex;
    flex-direction: column;
}

.founder-super-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #38BDF8;
    margin-bottom: 10px;
}

.founder-title-h {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 900;
    line-height: 1.18;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.founder-sub-motto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #BAE6FD;
    margin-bottom: 18px;
    padding: 6px 14px;
    background: rgba(37, 99, 192, 0.14);
    border: 1px solid rgba(74, 154, 224, 0.28);
    border-radius: 8px;
    width: fit-content;
}

.founder-bio-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 24px;
}

.founder-bio-text strong {
    color: var(--white);
}

/* Highlight Pillars (Fund Raising & Pre-IPO) */
.founder-pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.founder-pillar-card {
    background: linear-gradient(145deg, rgba(13, 28, 54, 0.82) 0%, rgba(7, 16, 32, 0.95) 100%);
    border: 1px solid rgba(74, 154, 224, 0.26);
    border-radius: 16px;
    padding: 18px 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.founder-pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, #38BDF8, #2563C0);
}

.founder-pillar-card:hover {
    border-color: rgba(56, 189, 248, 0.55);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(37, 99, 192, 0.2);
}

.f-pillar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.f-pillar-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(37, 99, 192, 0.22);
    border: 1px solid rgba(74, 154, 224, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38BDF8;
    font-size: 16px;
    flex-shrink: 0;
}

.f-pillar-title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.f-pillar-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* Strategic Quote Banner */
.founder-quote-banner {
    background: linear-gradient(90deg, rgba(37, 99, 192, 0.16) 0%, rgba(7, 17, 31, 0.4) 100%);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.founder-quote-banner i {
    font-size: 24px;
    color: #38BDF8;
    flex-shrink: 0;
}

.founder-quote-banner-text {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.founder-quote-banner-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: #93C5FD;
    display: block;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

/* Service Ecosystem Tags */
.founder-ecosystem-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 26px;
}

.founder-ecosystem-tags span {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(37, 99, 192, 0.1);
    border: 1px solid rgba(74, 154, 224, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
}

.founder-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* About Page Responsive Rules */
@media (max-width: 991px) {

    .about-story-grid,
    .vm-grid,
    .founder-grid,
    .bni-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .founder-photo-wrapper {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .founder-badge-top {
        right: -8px;
    }

    .founder-badge-bottom {
        left: -8px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .value-card.val-card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .founder-pillars-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .values-grid {
        gap: 16px;
    }

    .value-card {
        padding: 22px 18px !important;
    }

    .val-num {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }

    .val-title {
        font-size: 16.5px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 6px !important;
    }

    .val-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 640px) {
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .value-card.val-card-wide {
        grid-column: auto !important;
        grid-column-start: auto !important;
        grid-column-end: auto !important;
    }

    .value-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .val-num {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .val-title {
        font-size: 16px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 6px !important;
    }

    .val-desc {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .about-approach-box {
        width: 100%;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .values-grid {
        gap: 12px !important;
    }

    .value-card {
        padding: 18px 14px !important;
    }

    .val-num {
        font-size: 22px !important;
        margin-bottom: 5px !important;
    }

    .val-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 5px !important;
    }

    .val-desc {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
}

/* ============================================================
   PAGE 03: SERVICES CUSTOM SECTIONS & STYLING
============================================================ */

/* Featured Equity Section */
.featured-equity-section {
    padding: clamp(60px, 8vw, 120px) 0;
    /* background: var(--navy-900); */
    position: relative;
    overflow: hidden;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.featured-equity-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

.exchange-badge-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.exchange-badge {
    background: rgba(37, 99, 192, 0.18);
    border: 1.5px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--blue-100);
    transition: var(--trans);
}

.exchange-badge:hover {
    background: var(--blue-600);
    color: var(--white);
    border-color: var(--blue-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 192, 0.35);
}

.equity-approach-box {
    margin: 22px 0 28px;
    padding: 16px 22px;
    background: rgba(13, 28, 51, 0.7);
    border-left: 4px solid var(--blue-400);
    border-radius: 0 14px 14px 0;
}

.equity-approach-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-200);
    margin-bottom: 4px;
}

.equity-approach-val {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 800;
    color: var(--white);
}

/* Service Grid (9 items) */
.service-catalog-section {
    padding: clamp(60px, 8vw, 60px) 0;
    /* background: var(--navy-950); */
    position: relative;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

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



.sg-card {
    background: rgba(13, 28, 51, 0.65);
    border: 1px solid rgba(37, 99, 192, 0.18);
    border-radius: 20px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
    transition: var(--trans-slow);
    display: flex;
    flex-direction: column;
}

.sg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.sg-card:hover {
    background: rgba(15, 32, 64, 0.9);
    border-color: var(--blue-400);
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(37, 99, 192, 0.22);
}

.sg-card:hover::before {
    transform: scaleX(1);
}

.sg-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(37, 99, 192, 0.15);
    border: 1px solid rgba(74, 154, 224, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--blue-300);
    margin-bottom: 18px;
    transition: var(--trans);
}

.sg-card:hover .sg-icon {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    color: var(--white);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(37, 99, 192, 0.35);
}

.sg-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.sg-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-300);
    margin-bottom: 18px;
    flex-grow: 1;
}

.sg-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-200);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    margin-top: auto;
}

.sg-card:hover .sg-link {
    gap: 10px;
    color: var(--white);
}

/* Specialized Services (Pre-IPO & Fund Raising) */
.specialized-services-section {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--navy-900);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.specialized-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.spec-card {
    background: linear-gradient(145deg, var(--navy-800) 0%, var(--navy-950) 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.3);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 192, 0.2);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue-100);
    margin-bottom: 16px;
}

.spec-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 8px;
}

.spec-subhead {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue-200);
    margin-bottom: 16px;
}

.spec-body {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--gray-300);
    margin-bottom: 18px;
}

.diligence-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 24px;
}

.diligence-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.diligence-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.diligence-icon svg {
    width: 12px;
    height: 12px;
}

.flow-step-chain {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 24px;
}

.flow-step-item {
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.25);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
}

.spec-punchline {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--blue-100);
    margin-bottom: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Services Responsive Queries */
@media (max-width: 991px) {

    .featured-equity-grid,
    .specialized-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .service-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .exchange-badge-group {
        justify-content: center;
    }
}

/* ============================================================
   PAGE 04: INSIGHTS CUSTOM SECTIONS & STYLING
============================================================ */
/* Categories Section */
.insights-cat-section {
    padding: clamp(60px, 8vw, 120px) 0;
    /* background: var(--navy-900); */
    position: relative;
    overflow: hidden;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

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

.cat-card {
    background: rgba(13, 28, 51, 0.65);
    border: 1px solid rgba(37, 99, 192, 0.18);
    border-radius: 20px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
    transition: var(--trans-slow);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

.cat-card.cat-card-wide {
    grid-column: span 2;
}

.cat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.cat-card:hover {
    background: rgba(15, 32, 64, 0.9);
    border-color: var(--blue-400);
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(37, 99, 192, 0.22);
}

.cat-card:hover::before {
    transform: scaleX(1);
}

.cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(37, 99, 192, 0.15);
    border: 1px solid rgba(74, 154, 224, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--blue-300);
    margin-bottom: 18px;
    transition: var(--trans);
}

.cat-card:hover .cat-icon {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    color: var(--white);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(37, 99, 192, 0.35);
}

.cat-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.cat-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--gray-300);
}

/* Featured Article Section */
.featured-article-section {
    padding: clamp(60px, 8vw, 120px) 0;
    /* background: var(--navy-950); */
    position: relative;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.feat-article-card {
    background: linear-gradient(145deg, var(--navy-800) 0%, #060F1D 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.35);
    border-radius: 26px;
    padding: clamp(32px, 5vw, 56px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}

.feat-article-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 192, 0.2);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue-100);
    margin-bottom: 20px;
}

.feat-article-h {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 14px;
}

.feat-article-subh {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
}

.feat-article-paras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--gray-300);
    margin-bottom: 24px;
}

.feat-article-right {
    background: rgba(13, 28, 51, 0.7);
    border: 1px solid rgba(74, 154, 224, 0.25);
    border-radius: 20px;
    padding: clamp(24px, 3.5vw, 36px);
    text-align: center;
    position: relative;
}

.discipline-word {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 42px);
    font-weight: 900;
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 50%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.discipline-sub {
    font-size: 14px;
    color: var(--gray-300);
    line-height: 1.7;
    margin-bottom: 24px;
}

.feat-desktop-btn {
    display: inline-flex;
}

.feat-mobile-btn {
    display: none;
}

/* Article Card Ideas Grid (6 items) */
.articles-catalog-section {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--navy-900);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.art-card {
    background: rgba(13, 28, 51, 0.65);
    border: 1px solid rgba(37, 99, 192, 0.18);
    border-radius: 22px;
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    transition: var(--trans-slow);
    display: flex;
    flex-direction: column;
}

.art-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.art-card:hover {
    background: rgba(15, 32, 64, 0.92);
    border-color: var(--blue-400);
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(37, 99, 192, 0.22);
}

.art-card:hover::before {
    transform: scaleX(1);
}

.art-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.art-num {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 50%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.art-cat-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(37, 99, 192, 0.18);
    border: 1px solid rgba(74, 154, 224, 0.35);
    color: var(--blue-200);
    border-radius: 100px;
    padding: 4px 12px;
}

.art-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--white);
    margin-bottom: 12px;
}

.art-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--gray-300);
    margin-bottom: 20px;
    flex-grow: 1;
}

.art-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.art-read-time {
    font-size: 12px;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 4px;
}

.art-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-200);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.art-card:hover .art-link {
    gap: 10px;
    color: var(--white);
}

/* Insights Responsive Queries */
@media (max-width: 991px) {
    .feat-article-card {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 36px 28px !important;
    }

    .insights-cat-grid,
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cat-card.cat-card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .featured-article-section {
        padding: 40px 0 !important;
    }

    .feat-article-card {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }

    .feat-article-badge {
        font-size: 10.5px !important;
        padding: 5px 12px !important;
        margin-bottom: 14px !important;
    }

    .feat-article-h {
        font-size: clamp(22px, 5.5vw, 30px) !important;
        margin-bottom: 8px !important;
        line-height: 1.22 !important;
    }

    .feat-article-subh {
        font-size: clamp(17px, 4.2vw, 22px) !important;
        margin-bottom: 14px !important;
        line-height: 1.25 !important;
    }

    .feat-article-paras {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .feat-desktop-btn {
        display: none !important;
    }

    .feat-article-right {
        background: linear-gradient(145deg, rgba(13, 28, 51, 0.88), rgba(6, 15, 29, 0.95)) !important;
        border: 1px solid rgba(74, 154, 224, 0.3) !important;
        border-radius: 16px !important;
        padding: 22px 16px !important;
        margin-top: 4px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    }

    .discipline-word {
        font-size: clamp(28px, 7.5vw, 36px) !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
    }

    .discipline-sub {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 14px !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .feat-article-right .trust-chip {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .feat-mobile-btn {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 14px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .insights-cat-grid {
        gap: 16px;
    }

    .cat-card {
        padding: 22px 18px !important;
    }

    .cat-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        margin-bottom: 14px;
    }

    .cat-title {
        font-size: 17.5px;
        margin-bottom: 6px;
    }

    .cat-desc {
        font-size: 14px;
        line-height: 1.65;
    }
}

@media (max-width: 640px) {
    .insights-cat-grid,
    .articles-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .cat-card.cat-card-wide {
        grid-column: auto !important;
        grid-column-start: auto !important;
        grid-column-end: auto !important;
    }

    .cat-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .cat-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
        margin-bottom: 12px;
    }

    .cat-title {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .cat-desc {
        font-size: 13.5px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .feat-article-card {
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }

    .feat-article-right {
        padding: 18px 12px !important;
        border-radius: 14px !important;
    }

    .discipline-word {
        font-size: 26px !important;
    }

    .discipline-sub {
        font-size: 12.5px !important;
    }

    .insights-cat-grid {
        gap: 12px !important;
    }

    .cat-card {
        padding: 18px 14px !important;
    }

    .cat-title {
        font-size: 16px;
    }

    .cat-desc {
        font-size: 13px;
        line-height: 1.55;
    }
}

/* ============================================================
   PAGE 05: CONTACT US CUSTOM SECTIONS & STYLING
============================================================ */

/* Main Contact & Form Section */
.contact-main-section {
    padding: clamp(60px, 8vw, 120px) 0;
    /* background: var(--navy-900); */
    position: relative;
    overflow: hidden;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.contact-layout-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}

.contact-form-card {
    background: linear-gradient(145deg, rgba(13, 28, 51, 0.9) 0%, rgba(7, 17, 31, 0.95) 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.35);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.contact-form-h {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: 8px;
}

.contact-form-sub {
    font-size: 14.5px;
    color: var(--gray-300);
    margin-bottom: 28px;
}

.c-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.c-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.c-field.full-width {
    grid-column: span 2;
}

.c-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue-200);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.c-input,
.c-textarea,
.c-select {
    width: 100%;
    padding: 13px 18px;
    background: rgba(6, 15, 29, 0.85);
    border: 1.5px solid rgba(74, 154, 224, 0.25);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--white);
    transition: var(--trans);
    outline: none;
}

.c-input:focus,
.c-textarea:focus,
.c-select:focus {
    border-color: var(--blue-400);
    background: rgba(8, 20, 38, 0.95);
    box-shadow: 0 0 16px rgba(37, 99, 192, 0.35);
}

.c-input::placeholder,
.c-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.c-textarea {
    resize: vertical;
    min-height: 110px;
}

/* Interest Multi-Select Chips */
.interest-section-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--white);
    margin: 10px 0 12px;
}

.interest-chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.interest-chip {
    position: relative;
    cursor: pointer;
}

.interest-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.interest-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(37, 99, 192, 0.12);
    border: 1px solid rgba(74, 154, 224, 0.3);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray-300);
    transition: var(--trans);
    user-select: none;
}

.interest-chip input:checked+.interest-chip-label {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border-color: var(--blue-300);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(37, 99, 192, 0.4);
    transform: translateY(-1px);
}

.interest-chip-label:hover {
    border-color: var(--blue-400);
    color: var(--white);
}

/* Locations Showcase Section */
.locations-section {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--navy-950);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.loc-card {
    background: linear-gradient(145deg, var(--navy-900) 0%, #060F1D 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.35);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: var(--trans-slow);
    display: flex;
    flex-direction: column;
}

.loc-card:hover {
    border-color: var(--blue-400);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(37, 99, 192, 0.25);
}

.loc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 192, 0.2);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue-100);
    margin-bottom: 16px;
}

.loc-city {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
}

.loc-entity {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-200);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.loc-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 14.5px;
    color: var(--gray-300);
    margin-bottom: 28px;
    flex-grow: 1;
}

.loc-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.loc-info-icon {
    font-size: 18px;
    color: var(--blue-300);
    flex-shrink: 0;
    margin-top: 2px;
}

.loc-dir-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
    background: rgba(37, 99, 192, 0.25);
    border: 1px solid rgba(74, 154, 224, 0.4);
    border-radius: 12px;
    padding: 12px 22px;
    text-decoration: none;
    transition: var(--trans);
    margin-top: auto;
    width: fit-content;
}

.loc-card:hover .loc-dir-btn {
    background: var(--blue-600);
    border-color: var(--blue-300);
    box-shadow: 0 8px 20px rgba(37, 99, 192, 0.35);
    gap: 12px;
}

/* Contact Page Responsive Rules */
@media (max-width: 991px) {

    .contact-layout-grid,
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

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

    .c-field.full-width {
        grid-column: span 1;
    }
}

/* ============================================================
   DEZERV-STYLE LUXURY BRAND PRELOADER (SMIT SECURITIES)
   Ultra-Smooth 120FPS Shimmer & Seamless Curtain Reveal
============================================================ */
html.no-loader #smit-preloader {
    display: none !important;
}

#smit-preloader {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #000000;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: all;
    box-sizing: border-box;
    will-change: transform;
    transition: transform 0.95s cubic-bezier(0.77, 0, 0.175, 1);
}

#smit-preloader.loader-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.smit-loader-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(12px, 3vw, 24px);
    width: 100%;
    max-width: 92vw;
    box-sizing: border-box;
    animation: smitFadeInContent 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#smit-preloader.loader-hidden .smit-loader-content {
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes smitFadeInContent {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

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

.smit-loader-text {
    font-family: var(--font-display);
    font-size: clamp(0.78rem, 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: clamp(0.08em, 0.6vw, 0.22em);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;

    /* 100% Seamless, Silky Smooth Shimmer (Zero Blink / Zero Flash) */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.22) 30%,
            rgba(255, 255, 255, 0.98) 50%,
            rgba(126, 200, 240, 0.95) 54%,
            rgba(255, 255, 255, 0.22) 70%,
            rgba(255, 255, 255, 0.22) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: smitDezervShimmer 2.2s linear infinite;
    filter: drop-shadow(0 0 16px rgba(126, 200, 240, 0.22));
    will-change: background-position;
}

@keyframes smitDezervShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Elegant, subtle glowing accent line (Steady & Luxury) */
.smit-loader-line {
    width: clamp(36px, 8vw, 64px);
    height: 2px;
    margin-top: clamp(8px, 2vw, 14px);
    background: linear-gradient(90deg, transparent, #7EC8F0, transparent);
    opacity: 0.7;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(126, 200, 240, 0.4);
    animation: smitLineGentleGlow 2.2s ease-in-out infinite alternate;
}

@keyframes smitLineGentleGlow {
    0% {
        opacity: 0.4;
        transform: scaleX(0.85);
    }

    100% {
        opacity: 0.85;
        transform: scaleX(1.25);
    }
}

/* Specific Breakpoint Fine-Tuning for Devices */
@media (max-width: 768px) {
    .smit-loader-text {
        font-size: clamp(0.82rem, 3.8vw, 1.4rem);
        letter-spacing: 0.14em;
    }
}

@media (max-width: 480px) {
    .smit-loader-content {
        padding: 0 12px;
        max-width: 96vw;
    }

    .smit-loader-text {
        font-size: clamp(0.72rem, 4.1vw, 0.98rem);
        letter-spacing: 0.09em;
        white-space: nowrap;
    }

    .smit-loader-line {
        margin-top: 10px;
        height: 1.5px;
    }
}

@media (max-width: 360px) {
    .smit-loader-text {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }
}

/* ============================================================
           SMIT MODERN LUXURY SHARE MARKET DYNAMIC CHART (THEME INTEGRATED)
        ============================================================ */
        .new-hero-section {
            position: relative;
            padding: clamp(140px, 14vw, 190px) 0 clamp(50px, 6vw, 90px);
            overflow: hidden;
            background: #061122;
            /* min-height: 100vh; */
        }

        .new-hero-section::after {
            content: " ";
            position: absolute;
            background-image: url('img/Gradient1_BG.png');
            background-size: cover;
            background-position: center bottom;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.95;
            pointer-events: none;
        }

        .new-hiro-inner {
            position: relative;
            z-index: 3;
            text-align: center;
            max-width: 1080px;
            margin: 0 auto;
        }

        /* Eyebrow Badge */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(37, 99, 192, 0.16);
            border: 1px solid rgba(74, 154, 224, 0.35);
            border-radius: 100px;
            padding: 7px 18px;
            margin-bottom: 24px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .badge-pulse {
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 50%;
            animation: heroGlowPulse 2s ease-in-out infinite;
            flex-shrink: 0;
        }

        @keyframes heroGlowPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
            50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
        }

        /* Headline */
        .hero-h1 {
            font-family: var(--font-display);
            font-size: clamp(38px, 5vw, 46px);
            font-weight: 900;
            color: #ffffff;
            line-height: 1.1;
            letter-spacing: -0.5px;
            margin-bottom: 22px;
            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        }

        .hero-h1 .gradient-text {
            background: linear-gradient(135deg, #ffffff 25%, #7ec8f0 70%, #38bdf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Subtext */
        .hero-sub {
            font-size: clamp(15.5px, 1.3vw, 17.5px);
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.68;
            max-width: 820px;
            margin: 0 auto 34px;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
        }

        .hero-sub strong {
            color: #ffffff;
            font-weight: 800;
        }

        /* CTA Buttons */
        .hero-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 44px;
        }

/* ============================================================
   SMIT EQUITY INTELLIGENCE & EXECUTION HUB (NEW USEFUL CONSOLE)
============================================================ */
.eq {
    position: relative;
    padding: clamp(70px, 8vw, 120px) 0;
    overflow: hidden;
}

.eq-wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
    margin-bottom: clamp(50px, 6vw, 80px);
}

.eq-content {
    text-align: left;
}

.eq-sub {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--blue-200);
    font-weight: 700;
    margin-bottom: 16px;
}

.eq-lede {
    font-size: clamp(14.5px, 1.2vw, 16px);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.68;
    margin-bottom: 18px;
}

.eq-exchanges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 192, 0.18);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* ============================================================
   NEW USEFUL EQUITY CONSOLE (REPLACES STATIC SVG CHART)
============================================================ */
.eq-console-card {
    position: relative;
    background: linear-gradient(180deg, rgba(10, 22, 42, 0.88) 0%, rgba(5, 13, 26, 0.96) 100%);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 22px;
    padding: clamp(20px, 2.5vw, 28px);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8),
                0 0 50px rgba(37, 99, 192, 0.18),
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.35s ease;
}

.eq-console-card:hover {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 35px 90px -20px rgba(0, 0, 0, 0.9),
                0 0 60px rgba(56, 189, 248, 0.25);
}

.eqc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(74, 154, 224, 0.16);
    margin-bottom: 16px;
}

.eqc-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.5px;
}

.eqc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.eqc-latency {
    font-size: 11px;
    color: var(--blue-200);
    font-weight: 700;
}

/* 3-Pillar Capability Grid */
.eqc-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.eqc-pillar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(12, 26, 48, 0.65);
    border: 1px solid rgba(74, 154, 224, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.25s ease;
}

.eqc-pillar-item:hover {
    background: rgba(37, 99, 192, 0.25);
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateX(4px);
}

.eqc-pillar-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(37, 99, 192, 0.3);
    border: 1px solid rgba(56, 189, 248, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.eqc-pillar-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}

.eqc-pillar-desc {
    font-size: 11.5px;
    color: var(--gray-400);
    line-height: 1.4;
}

/* Curated Live Stock Radar Matrix */
.eqc-radar-box {
    background: rgba(6, 14, 28, 0.7);
    border: 1px solid rgba(74, 154, 224, 0.16);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 14px;
}

.eqc-radar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(74, 154, 224, 0.1);
}

.eqc-stock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 12px;
    transition: background 0.2s ease;
}

.eqc-stock-row:hover {
    background: rgba(37, 99, 192, 0.2);
}

.eqc-stock-name {
    font-weight: 800;
    color: #ffffff;
}

.eqc-stock-tag {
    font-size: 10px;
    color: var(--gray-400);
    margin-left: 6px;
}

.eqc-stock-price {
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-display);
}

.eqc-stock-gain {
    color: #4ade80;
    font-weight: 700;
    margin-left: 8px;
}

.eqc-stock-cyan {
    color: #38bdf8;
    font-weight: 700;
    margin-left: 8px;
}

/* Console Bottom Verification Ribbon */
.eqc-bottom-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(74, 154, 224, 0.14);
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 600;
}

.eqc-bottom-strip strong {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 991px) {
    .eq-wrap {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SMIT ULTRA-MODERN VISUAL EQUITY CHART WIDGET (MINIMAL TEXT, HIGH-TECH)
============================================================ */
.eq-modern-card {
    position: relative;
    background: linear-gradient(180deg, rgba(9, 21, 40, 0.85) 0%, rgba(4, 10, 22, 0.94) 100%);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 22px;
    padding: clamp(18px, 2.5vw, 26px);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85),
                0 0 50px rgba(37, 99, 192, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.35s ease;
}

.eq-modern-card:hover {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 35px 90px -20px rgba(0, 0, 0, 0.95),
                0 0 65px rgba(56, 189, 248, 0.28);
}

.eqm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(74, 154, 224, 0.16);
}

.eqm-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eqm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.eqm-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--blue-200);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.eqm-filter-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(6, 14, 26, 0.7);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(74, 154, 224, 0.2);
}

.eqm-pill {
    background: transparent;
    border: none;
    color: var(--gray-400);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eqm-pill.active {
    background: rgba(37, 99, 192, 0.45);
    color: #ffffff;
}

/* Metric Display Row */
.eqm-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.eqm-val-big {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

.eqm-val-gain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    padding: 3px 8px;
    color: #4ade80;
    font-size: 12px;
    font-weight: 800;
    margin-left: 8px;
}

.eqm-alpha-badge {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
}

/* Canvas Chart Container */
.eqm-canvas-wrap {
    position: relative;
    width: 100%;
    height: 170px;
    margin-bottom: 16px;
}

#eqVisualCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Sector Breakdown Mini Bars */
.eqm-sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(74, 154, 224, 0.14);
}

.eqm-sec-item {
    background: rgba(12, 26, 48, 0.5);
    border: 1px solid rgba(74, 154, 224, 0.18);
    border-radius: 8px;
    padding: 7px 9px;
    text-align: center;
}

.eqm-sec-name {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.eqm-sec-val {
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
}

/* Curated Bluechip Micro Ticker Strip */
.eqm-mini-ticker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: rgba(6, 14, 28, 0.7);
    border: 1px solid rgba(74, 154, 224, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11.5px;
}

.eqm-mini-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.eqm-mini-item strong {
    color: #ffffff;
    font-weight: 800;
}

.eqm-mini-gain {
    color: #4ade80;
    font-weight: 700;
    font-size: 10.5px;
}

@media (max-width: 640px) {
    .eqm-sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .eqm-mini-ticker {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}


/* Modern High-Tech SVG Chart Styling */
.eqm-canvas-wrap {
    position: relative;
    width: 100%;
    height: 185px;
    margin-bottom: 16px;
    background: rgba(6, 14, 28, 0.55);
    border: 1px solid rgba(74, 154, 224, 0.2);
    border-radius: 14px;
    overflow: hidden;
    padding: 6px 0;
}

.eqm-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.eqm-chart-tag {
    position: absolute;
    background: rgba(8, 20, 38, 0.85);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    user-select: none;
}

.eqm-tag-alpha {
    top: 14px;
    right: 14px;
}

.eqm-tag-nifty {
    bottom: 24px;
    left: 70px;
}

.eqm-dot-green {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}


/* ============================================================
   SMIT LUXURY MODERN MULTI-LAYERED WEBSITE BACKGROUND SYSTEM
============================================================ */
body {
    background-color: #030813 !important;
    background-image: 
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(37, 99, 192, 0.22) 0%, rgba(7, 17, 33, 0) 70%),
        radial-gradient(ellipse 70% 50% at 85% 35%, rgba(56, 189, 248, 0.08) 0%, rgba(3, 8, 19, 0) 60%),
        radial-gradient(ellipse 65% 45% at 15% 65%, rgba(37, 99, 192, 0.10) 0%, rgba(3, 8, 19, 0) 65%),
        radial-gradient(ellipse 80% 50% at 50% 95%, rgba(56, 189, 248, 0.12) 0%, rgba(3, 8, 19, 0) 70%),
        radial-gradient(rgba(74, 154, 224, 0.07) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 32px 32px !important;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    background-attachment: scroll, scroll, scroll, scroll, fixed !important;
    color: #ffffff;
    position: relative;
    overflow-x: hidden;
}

.bg-aurora-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    z-index: 0;
    opacity: 0.7;
}

.aurora-top-right {
    top: 250px;
    right: -100px;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(37, 99, 192, 0.08) 50%, transparent 70%);
}

.aurora-mid-left {
    top: 1450px;
    left: -150px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(37, 99, 192, 0.18) 0%, rgba(32, 116, 176, 0.06) 55%, transparent 70%);
}

.aurora-mid-right {
    top: 2700px;
    right: -120px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.14) 0%, rgba(37, 99, 192, 0.08) 50%, transparent 70%);
}

.aurora-bottom-center {
    bottom: 400px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(37, 99, 192, 0.18) 0%, rgba(56, 189, 248, 0.08) 45%, transparent 75%);
}

.new-hero-section {
    background: transparent !important;
}

.new-hero-section::after {
    opacity: 0.85 !important;
}

.partners-hero-section {
    background: transparent !important;
    /* border-top: 1px solid rgba(74, 154, 224, 0.14); */
    /* border-bottom: 1px solid rgba(74, 154, 224, 0.14); */
    position: relative;
    z-index: 2;
}

.wwh-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.svc-section, .services-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.svc-card, .service-card {
    background: rgba(10, 22, 42, 0.72) !important;
    border: 1px solid rgba(74, 154, 224, 0.25) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
}

.svc-card:hover, .service-card:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.25) !important;
}

.rsc-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.rsc-card {
    background: rgba(10, 22, 42, 0.72) !important;
    border: 1px solid rgba(74, 154, 224, 0.24) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.story-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.story-wrap {
    background: linear-gradient(135deg, rgba(14, 28, 54, 0.75) 0%, rgba(6, 16, 32, 0.85) 100%) !important;
    border: 1px solid rgba(74, 154, 224, 0.3) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 45px rgba(37, 99, 192, 0.18) !important;
}

.faq-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(10, 22, 42, 0.65) !important;
    border: 1px solid rgba(74, 154, 224, 0.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.cta-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.cta-box {
    background: linear-gradient(135deg, rgba(16, 36, 68, 0.85) 0%, rgba(8, 20, 40, 0.95) 100%) !important;
    border: 1px solid rgba(74, 154, 224, 0.4) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 60px rgba(56, 189, 248, 0.25) !important;
}

.footer {
    background: rgba(4, 9, 20, 0.92) !important;
    border-top: 1px solid rgba(74, 154, 224, 0.2) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative;
    z-index: 2;
}


/* ============================================================
   GLOBAL STANDARDIZED SECTION SPACING & RESPONSIVE POLISH
============================================================ */

/* Standardize section vertical breathing space */
.new-hero-section {
    padding: clamp(120px, 12vw, 175px) 0 clamp(40px, 5vw, 70px) !important;
}

.partners {
    padding: clamp(32px, 4vw, 50px) 0 !important;
}

.wwh-section,
.about-story-section,
.vision-mission-section,
.values-section,
.featured-equity-section,
.service-catalog-section,
.specialized-services-section,
.insights-cat-section,
.featured-article-section,
.articles-catalog-section,
.contact-main-section,
.locations-section,
.hero,
.rsc-section,
.pio,
.why,
.gt,
.bni-section,
.hww {
    padding: clamp(55px, 6.5vw, 95px) 0 !important;
    position: relative;
    z-index: 2;
}

.cta-section {
    padding: clamp(60px, 7vw, 105px) 0 !important;
    position: relative;
    z-index: 2;
}

/* Ensure no double padding on wrapper sections */
.partners-hero-section,
.hero-rsc-section,
.pio-why-section,
.hww-service-section,
.cta-footer-section,
.story-mission-section,
.values-gt-section,
.featured-service-section,
.insights-featured-section,
.contact-locations-section {
    padding: 0 !important;
    background: transparent !important;
}

/* Standardize Headings & Subtext spacing */
.section-head,
.wwh-inner,
.rsc-heading,
.rsc-eyebrow,
.story-lead,
.val-header {
    margin-bottom: clamp(24px, 3.5vw, 42px);
}

.section-head h2,
.wwh-heading,
.rsc-heading,
.val-title {
    margin-bottom: 12px;
}

.section-head p,
.wwh-inner p {
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(15px, 1.25vw, 16.5px);
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
}

.rsc-subtext {
    max-width: 680px;
    margin: 0 auto clamp(36px, 5vw, 64px) !important;
    font-size: clamp(15px, 1.25vw, 16.5px);
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
    text-align: center;
}

.rsc-wrap {
    margin-top: clamp(40px, 5.5vw, 70px) !important;
}

/* Ensure All Cards have unified Frosted Glass Styling */
.val-card,
.value-card,
.vm-card,
.cat-card,
.sg-card,
.art-card,
.loc-card,
.stat-card,
.why-card,
.bni-card {
    background: rgba(10, 22, 42, 0.72) !important;
    border: 1px solid rgba(74, 154, 224, 0.22) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.val-card:hover,
.value-card:hover,
.vm-card:hover,
.cat-card:hover,
.sg-card:hover,
.art-card:hover,
.loc-card:hover,
.stat-card:hover,
.why-card:hover,
.bni-card:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(56, 189, 248, 0.22) !important;
}

/* Ensure All Headings Inside Cards are Crisp White */
.val-card h3,
.value-card h3,
.cat-card h3,
.sg-card h3,
.art-card h3,
.loc-card h3,
.stat-card h3,
.why-card h3,
.bni-card h3,
.val-card h4,
.value-card h4,
.cat-card h4 {
    color: #ffffff !important;
    font-weight: 800;
}

.val-card p,
.value-card p,
.cat-card p,
.sg-card p,
.art-card p,
.loc-card p,
.stat-card p,
.why-card p,
.bni-card p {
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.6;
}

/* Strict Zero Horizontal Overflow */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3.5vw, 32px);
    box-sizing: border-box;
}


/* ============================================================
   IPHONE 15 & MOBILE FLUID TYPOGRAPHY & SPACING REFINEMENTS
============================================================ */

/* 1. Universal Proportional Title Sizing on Mobile */
@media (max-width: 768px) {
    /* Hero Title */
    .new-hero-title,
    .hero-title,
    h1 {
        font-size: clamp(26px, 7.8vw, 36px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 16px !important;
    }

    .new-hero-desc,
    .hero-desc {
        font-size: clamp(14px, 3.8vw, 15.5px) !important;
        line-height: 1.55 !important;
        margin-bottom: 24px !important;
    }

    .new-hero-eyebrow {
        font-size: 11px !important;
        padding: 5px 14px !important;
        margin-bottom: 14px !important;
    }

    /* Section Headings */
    .section-head h2,
    .wwh-heading,
    .rsc-heading,
    .eq-content h2,
    .story-lead h2,
    .val-header h2,
    .head-title-values h2,
    .bni-head h2,
    .cta-box h2,
    .contact-head h2,
    .services-head h2,
    .insights-head h2,
    h2 {
        font-size: clamp(22px, 6.2vw, 29px) !important;
        line-height: 1.24 !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 10px !important;
    }

    .section-head p,
    .rsc-subtext,
    .wwh-inner p,
    .eq-sub,
    .story-lead p {
        font-size: clamp(13.5px, 3.8vw, 15px) !important;
        line-height: 1.55 !important;
    }

    .section-tag {
        font-size: 11px !important;
        padding: 4px 12px !important;
        margin-bottom: 10px !important;
    }
}

/* 2. Equity Section Unified Left Alignment */
.eq-content {
    text-align: left !important;
}

.eq-content .section-tag {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.eq-content h2,
.eq-sub,
.eq-lede {
    text-align: left !important;
}

.eq-exchanges {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 12px 0 20px !important;
}

.trust-chip {
    padding: 6px 16px !important;
    background: rgba(37, 99, 192, 0.25) !important;
    border: 1px solid rgba(74, 154, 224, 0.35) !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.eq-cta {
    display: flex !important;
    justify-content: flex-start !important;
}

@media (max-width: 991px) {
    .eq-wrap {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        text-align: left !important;
    }
    
    .eq-content .section-tag,
    .eq-exchanges,
    .eq-cta {
        justify-content: flex-start !important;
    }
}

/* 3. More Than Equity (RSC Section) Tightened Gaps & Hidden Group Fix */
.rsc-feature.group-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 991px) {
    .rsc-section {
        padding: clamp(40px, 6vw, 65px) 0 !important;
    }

    .rsc-wrap {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        margin-top: 24px !important;
        gap: 20px !important;
    }

    .rsc-phone-wrap {
        order: 1 !important;
        margin: 0 auto 12px auto !important;
    }

    .rsc-col {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        align-items: center !important;
    }

    .rsc-col-left {
        order: 2 !important;
    }

    .rsc-col-right {
        order: 3 !important;
    }

    .rsc-feature-slot {
        position: relative !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .rsc-feature {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 18px 20px !important;
        border-radius: 16px !important;
        background: rgba(14, 28, 54, 0.75) !important;
        border: 1px solid rgba(74, 154, 224, 0.25) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        margin: 0 auto !important;
    }

    .rsc-feature.group-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .rsc-feature-icon {
        margin: 0 auto 10px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rsc-feature h3 {
        text-align: center !important;
        font-size: 16.5px !important;
        margin-bottom: 6px !important;
        width: 100% !important;
    }

    .rsc-feature p {
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 640px) {
    .rsc-wrap {
        margin-top: 18px !important;
        gap: 16px !important;
    }

    .rsc-phone {
        width: 220px !important;
        height: 330px !important;
    }

    .rsc-feature {
        padding: 16px 16px !important;
    }

    .rsc-feature h3 {
        font-size: 15.5px !important;
        margin-bottom: 5px !important;
    }

    .rsc-feature p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
}


/* ============================================================
   360-DEGREE FULL WEBSITE MOBILE & DESKTOP SPACING REFINEMENTS
============================================================ */

/* 1. Global Touch-Friendly Tap Targets & Fluid Container Margins */
@media (max-width: 768px) {
    .container {
        padding: 0 18px !important;
    }

    /* Standardize all Section Vertical Breathing Space on Mobile */
    section,
    .wwh-section,
    .about-story-section,
    .vision-mission-section,
    .values-section,
    .featured-equity-section,
    .service-catalog-section,
    .specialized-services-section,
    .insights-cat-section,
    .featured-article-section,
    .articles-catalog-section,
    .contact-main-section,
    .locations-section,
    .hero,
    .rsc-section,
    .pio,
    .why,
    .gt,
    .bni-section,
    .hww,
    .cta-section {
        padding: clamp(38px, 6.5vw, 56px) 0 !important;
    }

    .new-hero-section {
        padding: clamp(100px, 12vw, 130px) 0 clamp(30px, 5vw, 45px) !important;
    }

    /* All Section Headers on Mobile */
    .section-head,
    .wwh-inner,
    .rsc-heading,
    .rsc-eyebrow,
    .story-lead,
    .val-header {
        margin-bottom: 20px !important;
    }

    /* Buttons Full Width on Small Mobile when stacked */
    .hero-actions,
    .cta-actions,
    .eq-cta {
        gap: 10px !important;
    }

    /* All Card Grids Gap Standardization */
    .wwh-grid,
    .pio-cards,
    .why-grid,
    .hww-grid,
    .val-grid,
    .values-grid,
    .vm-grid,
    .cat-grid,
    .insights-cat-grid,
    .services-grid,
    .articles-grid,
    .locations-grid {
        gap: 14px !important;
    }

    .wwh-grid {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        width: 100% !important;
        margin: 0 auto !important;
        justify-items: center !important;
    }

    .wwh-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .wwh-card .wwh-icon {
        margin: 0 auto 16px auto !important;
    }

    .wwh-card h3 {
        text-align: center !important;
        width: 100% !important;
    }

    .wwh-card p {
        text-align: center !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .pio-cards {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        width: 100% !important;
        margin: 0 auto 24px auto !important;
        justify-items: center !important;
        gap: 14px !important;
    }

    .pio-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    .pio-card-icon {
        margin: 0 auto 12px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pio-card-overline {
        text-align: center !important;
        width: 100% !important;
    }

    .pio-card-title {
        text-align: center !important;
        width: 100% !important;
    }

    .pio-card-desc {
        text-align: center !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto 14px auto !important;
    }

    .pio-card-link {
        justify-content: center !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .pio-content .section-head {
        text-align: center !important;
    }

    .pio-content .section-head .section-tag {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .pio-cta {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .bni-wrap {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .bni-content {
        align-items: center !important;
        text-align: center !important;
    }

    .bni-content .section-tag {
        margin: 0 auto 12px auto !important;
    }

    .bni-heading {
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    .bni-member-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 18px auto !important;
        padding: 10px 16px !important;
        align-self: center !important;
    }

    .bni-lede,
    .bni-body {
        text-align: center !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bni-quote-bar {
        width: 100% !important;
        max-width: 420px !important;
        margin: 14px auto 0 auto !important;
        justify-content: center !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
    }

    .bni-visual {
        max-width: 480px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .bni-card {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bni-card-head {
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
        gap: 8px !important;
    }

    .bni-chip-live {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .bni-badge-loc {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .bni-network-grid {
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .bni-net-item {
        padding: 12px 12px !important;
        gap: 10px !important;
        align-items: center !important;
        border-radius: 12px !important;
    }

    .bni-net-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 9px !important;
    }

    .bni-net-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .bni-net-data h4 {
        font-size: 13.5px !important;
        margin-bottom: 2px !important;
        line-height: 1.25 !important;
    }

    .bni-net-data p {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }

    .bni-card-foot {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding-top: 14px !important;
        text-align: center !important;
    }

    .bni-stat-num {
        font-size: 14px !important;
    }

    .bni-stat-lbl {
        font-size: 9.5px !important;
        white-space: nowrap !important;
    }

    .bni-foot-divider {
        display: none !important;
    }

    .bni-float-badge {
        display: none !important;
    }

    .hww-head {
        text-align: center !important;
        margin-bottom: 28px !important;
    }

    .hww-head .hww-tag {
        justify-content: center !important;
        margin: 0 auto 12px auto !important;
    }

    .hww-list {
        padding-left: 18px !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .hww-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 16px 8px 16px 2px !important;
    }

    .hww-step::before {
        left: -22px !important;
        top: 20px !important;
    }

    .hww-step-top {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .hww-ghost {
        font-size: 34px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .hww-step-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    .hww-step-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .hww-step-text {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .hww-step-title {
        font-size: 16px !important;
        margin-bottom: 3px !important;
    }

    .hww-step-desc {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* Card Internal Padding for Clean Mobile Fit */
    .wwh-card,
    .pio-card,
    .why-card,
    .val-card,
    .value-card,
    .vm-card,
    .cat-card,
    .service-card,
    .svc-card,
    .art-card,
    .loc-card,
    .bni-card {
        padding: 20px 18px !important;
        border-radius: 16px !important;
    }

    /* Clean Philosophy / Steps System on Mobile */
    .steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .steps::before {
        display: none !important;
    }

    .step-num-ring {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 10px !important;
    }

    .step-name {
        font-size: 14px !important;
    }

    .step-desc {
        font-size: 11.5px !important;
    }

    /* Footer Mobile Adjustments */
    .footer {
        padding: 40px 0 20px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    .steps {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .step {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        gap: 14px !important;
        background: rgba(14, 28, 54, 0.6) !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(74, 154, 224, 0.2) !important;
    }

    .step-num-ring {
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* ============================================================
   MODERN ICON SYSTEM (REMIX ICONS)
============================================================ */
i[class^="ri-"], i[class*=" ri-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

.pulse-green {
    color: #10B981 !important;
    font-size: 10px;
    margin-right: 6px;
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

.badge-txt i,
.trust-chip i,
.spec-badge i,
.loc-badge i,
.feat-article-badge i,
.bni-partner-badge i,
.bni-badge-loc i,
.sebi-chip i,
.exchange-badge i,
.interest-chip-label i,
.art-read-time i,
.eqm-alpha-badge i,
.cta-actions i,
.btn i {
    margin-right: 6px;
    font-size: 1.15em;
    vertical-align: -1px;
}

.footer-nav li i {
    margin-right: 8px;
    color: var(--blue-400);
    font-size: 15px;
    vertical-align: -1px;
}

.sg-icon i,
.cat-icon i,
.fc-icon i,
.feat-icon i,
.vm-icon-wrap i {
    font-size: 26px;
    line-height: 1;
    color: inherit;
    transition: transform 0.3s ease;
}

.sg-card:hover .sg-icon i,
.cat-card:hover .cat-icon i,
.feat-item:hover .feat-icon i {
    transform: scale(1.12);
}

.loc-info-icon i {
    font-size: 20px;
    color: var(--blue-300);
}

.interest-chip-label i {
    margin-right: 6px;
    font-size: 15px;
    color: var(--blue-300);
    vertical-align: -1px;
}

.interest-chip input:checked + .interest-chip-label i {
    color: #fff;
}

.soc i {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sebi-chip i {
    margin-right: 6px;
    color: var(--cyan);
    font-size: 14px;
    vertical-align: -1px;
}

.trust-chip i {
    margin-right: 5px;
    color: var(--blue-300);
    font-size: 14px;
    vertical-align: -1px;
}

.art-read-time i {
    margin-right: 5px;
    color: var(--blue-300);
    font-size: 13px;
    vertical-align: -1px;
}

.feat-article-badge i {
    margin-right: 5px;
    color: #f59e0b;
    font-size: 13px;
}

.loc-badge i {
    margin-right: 5px;
    color: var(--blue-300);
    font-size: 14px;
    vertical-align: -1px;
}

.mob-close i {
    font-size: 24px;
    line-height: 1;
}

/* ============================================================
   QUANTTRIX-STYLE FLOATING STICKY CAPSULE HEADER & 3D SHOWCASE HERO
   Fully Customized to SMIT Securities Theme & Design System
============================================================ */

/* 1. Master Floating Sticky Capsule Header */
/* ============================================================
   QUANTTRIX-STYLE FLOATING STICKY CAPSULE HEADER (SMIT THEME)
============================================================ */
.qt-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    padding: 20px 0;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid transparent;
}

.qt-header-wrap.scrolled {
    padding: 12px 0;
    background: rgba(7, 17, 31, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(74, 154, 224, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.qt-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.qt-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    z-index: 10;
    flex-shrink: 0;
}

.qt-logo-svg {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(32, 116, 176, 0.35));
    transition: transform 0.3s ease;
}

.qt-brand-logo:hover .qt-logo-svg {
    transform: scale(1.06);
}

.qt-logo-text {
    display: flex;
    flex-direction: column;
}

.qt-logo-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
}

.qt-logo-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #38bdf8;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Center Floating Capsule Pill Navigation */
.qt-nav-capsule {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(8, 22, 48, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.25);
    border-radius: 9999px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.qt-nav-capsule:hover {
    border-color: rgba(74, 154, 224, 0.4);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.qt-nav-item {
    position: relative;
}

.qt-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.qt-nav-link:hover {
    color: #ffffff;
    background: rgba(37, 99, 192, 0.25);
}

.qt-nav-link.active {
    color: #ffffff;
    background: rgba(37, 99, 192, 0.35);
    border: 1px solid rgba(74, 154, 224, 0.35);
    font-weight: 700;
}

/* Right CTA Pill Button */
.qt-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.qt-btn-get-started {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 8px;
    background: linear-gradient(135deg, #2074B0 0%, #38BDF8 100%);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(32, 116, 176, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.qt-btn-get-started .qt-btn-arrow-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(4, 12, 30, 0.35);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.qt-btn-get-started:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    box-shadow: 0 8px 24px rgba(32, 116, 176, 0.45);
    color: #ffffff;
}

.qt-btn-get-started:hover .qt-btn-arrow-circle {
    background: #ffffff;
    color: #1d4ed8;
    transform: translateX(3px);
}

/* Mobile Hamburger Button */
.qt-hamburger-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 26, 58, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.qt-hamburger-btn:hover {
    background: rgba(37, 99, 192, 0.35);
    border-color: #38bdf8;
    color: #38bdf8;
}

/* ============================================================
   2. HERO SECTION CONTAINER (QUANTTRIX 3D SHOWCASE)
============================================================ */
.qt-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: clip;
    color: #ffffff;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 1;
}

.qt-hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(140px, 13vw, 190px) 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* Candlestick Dynamic Background Trading Matrix */
.qt-candlestick-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    opacity: 0.16;
    mask-image: radial-gradient(ellipse 95% 80% at 50% 45%, black 25%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 45%, black 25%, transparent 95%);
}

.qt-candle-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    animation: candleBreathe 8s ease-in-out infinite alternate;
}

.qt-candle-col:nth-child(even) { animation-duration: 9.5s; animation-delay: -2s; }
.qt-candle-col:nth-child(3n) { animation-duration: 11s; animation-delay: -3.5s; }
.qt-candle-col:nth-child(4n) { animation-duration: 7.5s; animation-delay: -1.5s; }

@keyframes candleBreathe {
    0% { transform: translateY(0px) scaleY(1); opacity: 0.55; }
    50% { transform: translateY(-8px) scaleY(1.03); opacity: 0.85; }
    100% { transform: translateY(5px) scaleY(0.98); opacity: 0.6; }
}

.qt-wick {
    width: 2px;
    background: linear-gradient(180deg, rgba(74, 154, 224, 0.05), rgba(74, 154, 224, 0.35), rgba(74, 154, 224, 0.05));
}

.qt-candle-body {
    width: 22px;
    border-radius: 4px;
    background: rgba(30, 80, 180, 0.2);
    border: 1px solid rgba(74, 154, 224, 0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.15), inset 0 0 8px rgba(56, 189, 248, 0.1);
    position: relative;
}

.qt-candle-body.bullish {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.28) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(56, 189, 248, 0.38);
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
}

.qt-candle-body.bullish-alt {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.22) 0%, rgba(37, 99, 235, 0.12) 100%);
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

.qt-candle-body.bearish {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.2) 0%, rgba(15, 23, 42, 0.3) 100%);
    border-color: rgba(74, 154, 224, 0.25);
}

/* SEBI Registration Eyebrow Badge (Static - Matches SMIT theme) */
.qt-sebi-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(5px, 1vw, 7px) clamp(12px, 2vw, 22px);
    background: rgba(10, 26, 54, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.38);
    border-radius: 9999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--font-body);
    font-size: clamp(11.5px, 1.2vw, 13.5px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    margin-bottom: clamp(14px, 2vw, 22px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
    max-width: 100%;
    word-break: break-word;
    text-align: center;
    justify-content: center;
}

.qt-sparkle-icon {
    color: #38bdf8;
    font-size: 14px;
    filter: drop-shadow(0 0 6px #38bdf8);
    flex-shrink: 0;
}

/* Hero Main Headline */
.qt-hero-heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 5.2vw, 58px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: clamp(14px, 2vw, 22px);
    max-width: 980px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    text-wrap: balance;
}

.qt-hero-heading .gradient-text {
    background: linear-gradient(130deg, #BAE6FD 0%, #7EC8F0 45%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* Hero Subtitle */
.qt-hero-subtext {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.6vw, 17px);
    font-weight: 500;
    line-height: 1.65;
    color: rgba(224, 242, 254, 0.85);
    max-width: 760px;
    margin: 0 auto clamp(22px, 3vw, 36px);
    text-wrap: balance;
}

/* Hero Action Buttons */
.qt-hero-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: clamp(36px, 5vw, 65px);
    z-index: 20;
}

.qt-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #2074B0 0%, #38BDF8 100%);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(32, 116, 176, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.qt-hero-btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    box-shadow: 0 10px 28px rgba(32, 116, 176, 0.5);
    color: #ffffff;
}

.qt-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: rgba(10, 24, 48, 0.75);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 9999px;
    border: 1.5px solid rgba(74, 154, 224, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.qt-hero-btn-secondary:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(14, 32, 64, 0.95);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    color: #ffffff;
}

/* ============================================================
   3. 3D SHOWCASE STAGE
============================================================ */
.qt-showcase-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 500px;
    padding-bottom: 0;
    z-index: 10;
}

.qt-cards-mobile-row {
    display: contents;
}

/* 3D Tilted Glass Chart Cards */
.qt-tilt-card {
    position: absolute;
    width: 270px;
    background: linear-gradient(155deg, rgba(14, 30, 60, 0.95) 0%, rgba(7, 18, 38, 0.98) 100%);
    border: 1.5px solid rgba(74, 154, 224, 0.35);
    border-radius: 24px;
    padding: 20px 18px 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    z-index: 8;
    text-align: left;
    color: #ffffff;
    user-select: none;
    transform-origin: center center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

/* Left Tilted Card */
.qt-card-left {
    left: 10px;
    top: 40px;
    transform: perspective(1000px) rotate(-13deg) rotateY(6deg) rotateX(2deg);
}

.qt-card-left:hover {
    transform: perspective(1000px) rotate(-7deg) scale(1.04) translateY(-8px) !important;
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 15px rgba(32, 116, 176, 0.2);
}

/* Right Tilted Card */
.qt-card-right {
    right: 10px;
    top: 40px;
    transform: perspective(1000px) rotate(13deg) rotateY(-6deg) rotateX(2deg);
}

.qt-card-right:hover {
    transform: perspective(1000px) rotate(7deg) scale(1.04) translateY(-8px) !important;
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 15px rgba(32, 116, 176, 0.2);
}

/* Card Header Elements */
.qt-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.qt-card-meta {
    display: flex;
    flex-direction: column;
}

.qt-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.qt-card-subtitle {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 800;
    color: #38bdf8;
    margin-top: 2px;
}

.qt-card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(37, 99, 192, 0.25);
    border: 1px solid rgba(74, 154, 224, 0.4);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.qt-tilt-card:hover .qt-card-action-btn {
    background: #2074b0;
    color: #ffffff;
    border-color: #38bdf8;
    transform: scale(1.1);
}

/* Live Badge for Right Card */
.qt-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 9999px;
    margin-top: 4px;
    width: fit-content;
}

.qt-live-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Visual Graphic: 3D Bar Chart for Left Card */
.qt-bar-chart-visual {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 7px;
    height: 80px;
    padding: 8px 8px 6px;
    background: rgba(4, 12, 26, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.2);
    border-radius: 12px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.qt-bar-col {
    flex: 1;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #38bdf8 0%, #2074b0 100%);
    box-shadow: 0 4px 10px rgba(32, 116, 176, 0.35);
    transition: all 0.3s ease;
    position: relative;
}

.qt-bar-col:nth-child(1) { height: 35%; }
.qt-bar-col:nth-child(2) { height: 55%; }
.qt-bar-col:nth-child(3) { height: 42%; }
.qt-bar-col:nth-child(4) { height: 80%; background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%); }
.qt-bar-col:nth-child(5) { height: 65%; }
.qt-bar-col:nth-child(6) { height: 95%; background: linear-gradient(180deg, #38bdf8 0%, #1e40af 100%); }

.qt-tilt-card:hover .qt-bar-col {
    filter: brightness(1.15);
}

/* Visual Graphic: Area Curve Chart for Right Card */
.qt-area-chart-visual {
    height: 80px;
    width: 100%;
    background: rgba(4, 12, 26, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.2);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.qt-area-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Card Footer Notes */
.qt-card-footer {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.4;
}

/* ============================================================
   4. CENTRAL SMARTPHONE DEVICE
============================================================ */
.qt-phone-peek-wrap {
    position: relative;
    z-index: 12;
    width: 330px;
    max-width: 90vw;
    margin: 0 auto;
}

.qt-phone-frame {
    width: 100%;
    height: 460px;
    background: #030814;
    border-radius: 44px 44px 0 0;
    border: 7px solid #162b50;
    border-bottom: none;
    box-shadow: 0 -25px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(37, 99, 192, 0.35), inset 0 0 0 1px rgba(74, 154, 224, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background-clip: padding-box;
}

/* Dynamic Island */
.qt-phone-island {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 22px;
    background: #000000;
    border-radius: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.qt-island-lens {
    width: 8px;
    height: 8px;
    background: #111827;
    border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(56, 189, 248, 0.6);
}

.qt-island-mic {
    width: 5px;
    height: 5px;
    background: #1f2937;
    border-radius: 50%;
}

/* In-Phone Screen Interface */
.qt-phone-screen {
    width: 100%;
    height: 100%;
    background: #061124;
    background-image: radial-gradient(circle at 50% 0%, rgba(37, 99, 192, 0.35) 0%, transparent 65%);
    display: flex;
    flex-direction: column;
    padding: 38px 14px 10px;
    position: relative;
    box-sizing: border-box;
}

.qt-phone-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
}

.qt-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

/* Phone Top App Bar */
.qt-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
}

.qt-app-profile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qt-app-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2074B0, #38BDF8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.qt-join-tag {
    background: rgba(37, 99, 192, 0.25);
    border: 1px solid rgba(74, 154, 224, 0.35);
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.qt-app-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
}

/* Main Plan Card Inside Smartphone */
.qt-app-card {
    background: linear-gradient(160deg, rgba(15, 34, 68, 0.96) 0%, rgba(7, 18, 40, 0.98) 100%);
    border: 1px solid rgba(74, 154, 224, 0.35);
    border-radius: 20px;
    padding: 16px 14px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.qt-plan-eyebrow {
    display: inline-block;
    background: rgba(37, 99, 192, 0.25);
    color: #7ec8f0;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 9999px;
    width: fit-content;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid rgba(74, 154, 224, 0.3);
}

.qt-plan-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
}

.qt-plan-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.qt-risk-tag {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.qt-reco-tag {
    background: rgba(37, 99, 192, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.qt-plan-metric-box {
    background: rgba(4, 12, 26, 0.75);
    border: 1px solid rgba(74, 154, 224, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.qt-pm-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}

.qt-pm-val {
    font-size: 12.5px;
    font-weight: 900;
    color: #38bdf8;
    font-family: var(--font-display);
}

.qt-plan-apply-btn {
    background: linear-gradient(135deg, #2074B0 0%, #38BDF8 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 10px 0;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(32, 116, 176, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    width: 100%;
}

.qt-plan-apply-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    box-shadow: 0 6px 18px rgba(32, 116, 176, 0.45);
    transform: scale(1.02);
    color: #ffffff;
}

/* ============================================================
   5. CURVED POINTER BADGES
============================================================ */
.qt-pointer-badge {
    position: absolute;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.qt-pointer-left {
    left: -170px;
    top: 270px;
}

.qt-pointer-right {
    right: -140px;
    top: 220px;
}

.qt-pointer-chip {
    background: rgba(8, 22, 50, 0.92);
    border: 1px solid rgba(74, 154, 224, 0.4);
    padding: 7px 16px;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    white-space: nowrap;
}

.qt-pointer-arrow-svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 4px rgba(56, 189, 248, 0.4));
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES FOR ALL SCREEN BREAKPOINTS
============================================================ */

/* 1. Laptops & Small Desktops (1025px - 1200px) */
@media (max-width: 1200px) {
    .qt-hero-container {
        padding: clamp(130px, 12vw, 160px) 20px 0;
    }

    .qt-card-left {
        left: -10px;
        width: 230px;
        top: 60px;
        transform: perspective(1000px) rotate(-9deg) scale(0.92);
    }

    .qt-card-right {
        right: -10px;
        width: 230px;
        top: 60px;
        transform: perspective(1000px) rotate(9deg) scale(0.92);
    }

    .qt-pointer-left {
        left: -70px;
        top: 220px;
        transform: scale(0.9);
    }

    .qt-pointer-right {
        right: -70px;
        top: 190px;
        transform: scale(0.9);
    }

    .qt-phone-peek-wrap {
        width: 300px;
    }

    .qt-phone-frame {
        height: 430px;
    }
}

/* 2. Tablet Landscape & Intermediate (861px - 1024px) */
@media (max-width: 1024px) {
    .qt-nav-capsule {
        display: none !important;
    }

    /* Remove Get Started button in responsive mode across all pages */
    .qt-btn-get-started {
        display: none !important;
    }

    .qt-hamburger-btn {
        display: flex;
    }

    /* Responsive Logo & Text Size Reduction */
    .qt-brand-logo {
        gap: 10px;
    }

    .qt-logo-svg {
        width: 38px;
        height: 38px;
    }

    .qt-logo-title {
        font-size: 16px;
        letter-spacing: 0.6px;
    }

    .qt-logo-sub {
        font-size: 8.5px;
        letter-spacing: 1.2px;
    }

    .qt-hero-container {
        padding: 125px 20px 0;
    }

    .qt-candlestick-matrix .qt-candle-col:nth-child(1),
    .qt-candlestick-matrix .qt-candle-col:nth-child(2),
    .qt-candlestick-matrix .qt-candle-col:nth-child(11),
    .qt-candlestick-matrix .qt-candle-col:nth-child(12) {
        display: none;
    }

    .qt-card-left {
        left: 0px;
        width: 215px;
        top: 70px;
        transform: perspective(1000px) rotate(-7deg) scale(0.88);
    }

    .qt-card-right {
        right: 0px;
        width: 215px;
        top: 70px;
        transform: perspective(1000px) rotate(7deg) scale(0.88);
    }

    .qt-pointer-left {
        left: -35px;
        top: 220px;
        transform: scale(0.8);
    }

    .qt-pointer-right {
        right: -35px;
        top: 190px;
        transform: scale(0.8);
    }
}

/* 3. Tablet Portrait & Phablets (576px - 860px) */
@media (max-width: 860px) {
    .qt-header-wrap {
        padding: 14px 0;
    }

    .qt-header-wrap.scrolled {
        padding: 10px 0;
    }

    .qt-brand-logo {
        gap: 8px;
    }

    .qt-logo-svg {
        width: 34px;
        height: 34px;
    }

    .qt-logo-title {
        font-size: 15px;
        letter-spacing: 0.5px;
    }

    .qt-logo-sub {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .qt-hamburger-btn {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .qt-hero-container {
        padding: 115px 16px 0;
    }

    .qt-hero-heading {
        font-size: clamp(30px, 6vw, 42px);
    }

    .qt-hero-subtext {
        font-size: 14.5px;
        margin-bottom: 28px;
    }

    .qt-hero-btn-group {
        margin-bottom: 36px;
    }

    /* Remove side cards and pointers on mobile/tablet */
    .qt-cards-mobile-row,
    .qt-tilt-card,
    .qt-pointer-badge {
        display: none !important;
    }

    .qt-showcase-stage {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: auto;
        width: 100%;
        margin-top: 16px;
    }

    .qt-phone-peek-wrap {
        width: min(320px, 88vw);
        margin: 0 auto;
    }

    .qt-phone-frame {
        height: 420px;
    }
}

/* 4. Standard Mobile (<= 575px) */
@media (max-width: 575px) {
    .qt-header-wrap {
        padding: 12px 0;
    }

    .qt-header-wrap.scrolled {
        padding: 8px 0;
    }

    .qt-header-container {
        gap: 8px;
    }

    /* Clean Compact Logo & Text on Mobile */
    .qt-brand-logo {
        gap: 7px;
    }

    .qt-logo-svg {
        width: 30px;
        height: 30px;
    }

    .qt-logo-title {
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: 0.4px;
    }

    .qt-logo-sub {
        font-size: 7.2px;
        letter-spacing: 0.8px;
    }

    .qt-hamburger-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .qt-hero-container {
        padding: 95px 14px 0;
    }

    .qt-candlestick-matrix {
        opacity: 0.1;
    }

    .qt-candlestick-matrix .qt-candle-col:nth-child(3),
    .qt-candlestick-matrix .qt-candle-col:nth-child(4),
    .qt-candlestick-matrix .qt-candle-col:nth-child(9),
    .qt-candlestick-matrix .qt-candle-col:nth-child(10) {
        display: none;
    }

    .qt-sebi-pill-badge {
        font-size: 11px;
        padding: 5px 12px;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .qt-hero-heading {
        font-size: clamp(25px, 7.5vw, 34px);
        line-height: 1.16;
        margin-bottom: 12px;
    }

    .qt-hero-subtext {
        font-size: 13.5px;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .qt-hero-btn-group {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        gap: 10px;
        margin-bottom: 28px;
    }

    .qt-hero-btn-primary, .qt-hero-btn-secondary {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Remove side cards on mobile */
    .qt-cards-mobile-row,
    .qt-tilt-card,
    .qt-pointer-badge {
        display: none !important;
    }

    .qt-showcase-stage {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: auto;
        width: 100%;
        margin-top: 14px;
    }

    .qt-phone-peek-wrap {
        width: min(290px, 92vw);
        margin: 0 auto;
    }

    .qt-phone-frame {
        height: 380px;
        border-width: 6px;
        border-radius: 36px 36px 0 0;
    }

    .qt-phone-screen {
        padding: 34px 12px 10px;
    }

    .qt-phone-island {
        width: 82px;
        height: 20px;
        top: 7px;
    }

    .qt-app-card {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .qt-plan-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .qt-plan-metric-box {
        padding: 8px 10px;
        margin-bottom: 10px;
    }

    .qt-plan-apply-btn {
        padding: 10px 0;
        font-size: 12.5px;
    }
}

/* 5. Extra Small Mobile (<= 400px) */
@media (max-width: 400px) {
    .qt-brand-logo {
        gap: 6px;
    }

    .qt-logo-svg {
        width: 26px;
        height: 26px;
    }

    .qt-logo-title {
        font-size: 12px;
        letter-spacing: 0.3px;
    }

    .qt-logo-sub {
        font-size: 6.5px;
        letter-spacing: 0.6px;
    }

    .qt-hamburger-btn {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .qt-hero-container {
        padding: 88px 10px 0;
    }

    .qt-phone-peek-wrap {
        width: 265px;
    }

    .qt-phone-frame {
        height: 350px;
    }
}