/* ==========================================================================
   ERINITE SOLUTIONS — WEB DEVELOPMENT PAGE STYLESHEET
   Harmonized with Amazon, Shopify & eBay Design System
   Viewport Aspect & Screen-Fit Optimized with Smooth Visual Blending
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* =========================================
   GLOBAL / RESET FOR WEB DEVELOPMENT PAGE
   ========================================= */

.web-dev-page,
.web-hero,
.web-services-section,
.web-process-section,
.web-cta-section {
    box-sizing: border-box;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #07182D;
    -webkit-font-smoothing: antialiased;
}

.web-dev-page *,
.web-hero *,
.web-services-section *,
.web-process-section *,
.web-cta-section * {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #07182D;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   COMMON UTILITIES & BADGES
   ========================================= */

.text-blue {
    color: #0D6EFD !important;
}

.web-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    background: #EBF3FE;
    border: 1px solid #D4E5FC;
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0D6EFD;
    margin-bottom: 12px;
}

.web-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.web-eyebrow-text {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0D6EFD;
}

.web-eyebrow-line {
    display: inline-block;
    width: 36px;
    height: 3px;
    background: #0D6EFD;
    border-radius: 2px;
}

/* Common Primary Button */
.web-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0D6EFD;
    color: #FFFFFF !important;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 50px;
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.28);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.web-btn-primary:hover {
    background: #0B5ED7;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.38);
    color: #FFFFFF !important;
}

.web-btn-arrow {
    display: inline-block;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.web-btn-primary:hover .web-btn-arrow {
    transform: translateX(4px);
}


/* =========================================
   SECTION 01: HERO SECTION (INTERACTIVE MULTI-DEVICE & CODE STAGE)
   ========================================= */

.web-hero {
    position: relative;
    padding: 35px 0 35px 0;
    min-height: calc(100vh - 85px);
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 82% 38%, rgba(210, 232, 255, 0.6) 0%, rgba(245, 249, 255, 0.3) 55%, #FFFFFF 100%);
    overflow: hidden;
}

.web-hero-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 35px;
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;
    gap: 15px;
}

/* Left Content Column */
.web-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    max-width: 580px;
}

.web-hero-title {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.14;
    color: #07182D;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
}

.web-hero-title span {
    color: #0D6EFD;
}

.web-hero-desc {
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.62;
    color: #475B78;
    max-width: 520px;
    margin: 0 0 26px 0;
}

/* Dual CTA Row */
.web-hero-cta-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
}

.web-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #07182D;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    transition: all 0.25s ease;
    cursor: pointer;
}

.web-play-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EBF3FE;
    border: 1px solid #D4E5FC;
    color: #0D6EFD;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-play-btn svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.web-btn-secondary:hover {
    color: #0D6EFD;
}

.web-btn-secondary:hover .web-play-btn {
    background: #0D6EFD;
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.3);
}

/* 4 Feature / Benefits Cards Grid */
.web-hero-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 32px;
    width: 100%;
}

.web-benefit-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(7, 24, 45, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-benefit-item:hover {
    transform: translateY(-3px);
    border-color: #BFDBFE;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.12);
}

.web-benefit-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EBF3FE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D6EFD;
}

.web-benefit-icon-box svg {
    width: 18px;
    height: 18px;
}

.web-benefit-info {
    display: flex;
    flex-direction: column;
}

.web-benefit-title {
    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #07182D;
    margin: 0;
    line-height: 1.2;
}

.web-benefit-desc {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: #64748B;
    margin: 2px 0 0 0;
    line-height: 1.2;
}


/* =========================================
   RIGHT VISUAL COLUMN: 3D WORKSPACE STAGE
   ========================================= */

.web-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.web-visual-stage {
    position: relative;
    width: 100%;
    max-width: 690px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}

/* Ambient Blue 3D Curved Layers & Glow Backdrops */
.web-3d-bg-shape.shape-1 {
    position: absolute;
    top: -12%;
    right: -8%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.75) 35%, rgba(186, 230, 253, 0.35) 70%, rgba(13, 110, 253, 0.05) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(13, 110, 253, 0.12), inset 0 0 45px rgba(255, 255, 255, 0.85);
    z-index: 0;
    pointer-events: none;
}

.web-3d-bg-shape.shape-2 {
    position: absolute;
    top: 10%;
    left: -14%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(219, 234, 254, 0.65) 40%, rgba(147, 197, 253, 0.22) 75%, transparent 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 45px rgba(56, 189, 248, 0.1), inset 0 0 35px rgba(255, 255, 255, 0.75);
    z-index: 0;
    pointer-events: none;
}

.web-3d-bg-shape.shape-3 {
    position: absolute;
    bottom: -10%;
    right: 12%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.18) 0%, rgba(99, 102, 241, 0.06) 55%, transparent 100%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

.web-glow-backdrop {
    position: absolute;
    width: 580px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(13, 110, 253, 0.28) 0%, rgba(56, 189, 248, 0.12) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
    z-index: 0;
}

.web-glow-orb-top {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 0%;
    right: -5%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(13, 110, 253, 0.1) 55%, transparent 70%);
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
}

/* Floating Glowing </> Code Badge (Top-Left Overlapping Laptop) */
.web-floating-badge.badge-code-icon {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #3B82F6 0%, #0D6EFD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(13, 110, 253, 0.45), 0 0 0 3.5px rgba(255, 255, 255, 0.95);
    z-index: 7;
    animation: floatSlow 4s ease-in-out infinite;
}

.web-floating-badge.badge-code-icon svg {
    width: 30px;
    height: 30px;
    color: #FFFFFF;
}

/* Dark Floating Code Editor Window (Behind Laptop) */
.web-code-editor {
    position: absolute;
    top: -20px;
    left: 45px;
    width: 350px;
    background: linear-gradient(165deg, #0D162B 0%, #080D1A 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    box-shadow: 0 26px 65px rgba(7, 24, 45, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 2;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: floatGentle 5s ease-in-out infinite;
}

.web-code-editor:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 32px 75px rgba(7, 24, 45, 0.45);
}

.web-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.web-editor-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.web-editor-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.web-editor-dots .dot.red { background: #EF4444; }
.web-editor-dots .dot.yellow { background: #F59E0B; }
.web-editor-dots .dot.green { background: #10B981; }

.web-editor-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.web-editor-tabs .tab {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
    cursor: default;
}

.web-editor-tabs .tab.active {
    color: #FFFFFF;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    padding: 2.5px 10px;
    border-radius: 5px;
}

.web-editor-body {
    padding: 14px 18px;
    font-family: "Consolas", "Fira Code", monospace;
    font-size: 12px;
    line-height: 1.65;
}

.code-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.line-no {
    color: #475569;
    font-size: 11px;
    width: 16px;
    text-align: right;
    user-select: none;
}

.code-text {
    color: #F8FAFC;
    white-space: nowrap;
}

.code-text.indent-1 {
    padding-left: 16px;
}

.code-text.indent-2 {
    padding-left: 28px;
}

.code-text .font-bold {
    font-weight: 700;
    color: #60A5FA;
}

.c-tag { color: #F43F5E; font-weight: 600; }
.c-attr { color: #FBBF24; }
.c-str { color: #34D399; }
.c-content { color: #F8FAFC; }

/* Central 3D Modern Laptop Device Mockup */
.web-laptop-wrap {
    position: relative;
    width: 100%;
    max-width: 550px;
    z-index: 4;
    transform: rotateY(-5deg) rotateX(3deg);
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 25px;
    margin-left: 0;
}

.web-laptop-wrap:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
}

.web-laptop-screen {
    background: #FFFFFF;
    border: 7.5px solid #0F172A;
    border-bottom: 5.5px solid #0F172A;
    border-radius: 12px 12px 2px 2px;
    box-shadow: 0 28px 65px rgba(7, 24, 45, 0.25);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1024 / 438;
}

/* Universal Mockup Image Styles */
.mock-screen-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.mock-phone-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* =========================================
   ERINITE OFFICIAL LAPTOP & MOBILE MOCKUPS (Section 01 & Section 03)
========================================= */
.erinite-laptop-inner {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Erinite Mockup Navbar */
.erinite-mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
}

.erinite-mock-nav-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.erinite-mock-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.erinite-mock-dots .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.erinite-mock-dots .m-red { background: #EF4444; }
.erinite-mock-dots .m-yellow { background: #F59E0B; }
.erinite-mock-dots .m-green { background: #10B981; }

.erinite-mock-brand {
    display: flex;
    align-items: center;
    gap: 5px;
}

.erinite-brand-logo-img {
    height: 14px;
    width: auto;
    object-fit: contain;
}

.erinite-brand-name {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: #07182D;
    letter-spacing: -0.01em;
}

.erinite-mock-nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.erinite-mock-nav-links span {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    color: #64748B;
    cursor: default;
}

.erinite-mock-nav-links span.nav-active {
    color: #07182D;
    font-weight: 600;
}

.erinite-mock-nav-links .has-caret {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.erinite-mock-nav-links .nav-caret {
    font-size: 7px;
    color: #94A3B8;
}

.erinite-mock-nav-right {
    display: flex;
    align-items: center;
}

.erinite-mock-nav-cta {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 600;
    background: #0D6EFD;
    color: #FFFFFF !important;
    padding: 3px 9px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
    white-space: nowrap;
}

/* Erinite Hero Body Grid */
.erinite-mock-hero-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 8px;
    padding: 10px 12px 12px 12px;
    background: #FFFFFF;
    align-items: center;
}

/* Left Column */
.erinite-mock-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.erinite-mock-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 20px;
    padding: 2px 7px;
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #1D4ED8;
}

.erinite-mock-heading {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #07182D;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.text-blue-glow {
    color: #0D6EFD;
}

.erinite-mock-paragraph {
    font-family: "Inter", sans-serif;
    font-size: 7.2px;
    line-height: 1.35;
    color: #64748B;
    margin: 0;
}

.erinite-mock-btn-group {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.erinite-btn-solid {
    background: #0D6EFD;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 7.2px;
    font-weight: 600;
    padding: 3.5px 9px;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(13, 110, 253, 0.3);
    white-space: nowrap;
}

.erinite-btn-ghost {
    background: #EFF6FF;
    color: #0D6EFD !important;
    border: 1px solid #BFDBFE;
    font-family: "Poppins", sans-serif;
    font-size: 7.2px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}

/* Right Column: Dark Analytics Dashboard Component */
.erinite-mock-hero-right {
    width: 100%;
}

.erinite-dash-card {
    background: #07182D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 27% 73%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(7, 24, 45, 0.3);
}

/* Dashboard Sidebar */
.erinite-dash-sidebar {
    background: #0B192C;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-side-brand {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px 3px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-side-logo {
    width: 11px;
    height: auto;
    object-fit: contain;
}

.dash-side-brand-text strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

.dash-side-brand-text small {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #94A3B8;
    line-height: 1;
}

.dash-side-menu {
    display: flex;
    flex-direction: column;
    gap: 1.2px;
}

.dash-menu-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3.5px;
    border-radius: 3px;
    font-family: "Inter", sans-serif;
    font-size: 5.2px;
    font-weight: 500;
    color: #94A3B8;
    white-space: nowrap;
}

.dash-menu-item.active {
    background: #0D6EFD;
    color: #FFFFFF;
    font-weight: 600;
}

.dash-menu-icon {
    font-size: 5.5px;
    line-height: 1;
}

.dash-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 1.5px 0;
}

/* Dashboard Content Area */
.erinite-dash-content {
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    background: #07182D;
}

.dash-content-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dash-top-title-wrap h5 {
    font-family: "Poppins", sans-serif;
    font-size: 7px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1;
}

.dash-top-title-wrap small {
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #94A3B8;
    line-height: 1;
}

.dash-top-actions {
    display: flex;
    align-items: center;
    gap: 2.5px;
}

.dash-date-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 1px 3px;
    font-size: 4.2px;
    color: #CBD5E1;
}

.dash-bell-icon {
    font-size: 5px;
}

.dash-user-pill {
    background: rgba(13, 110, 253, 0.2);
    border: 1px solid rgba(13, 110, 253, 0.4);
    border-radius: 2px;
    padding: 1px 3px;
    font-size: 4.2px;
    color: #93C5FD;
    font-weight: 600;
}

/* 4 Metrics Grid */
.dash-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5px;
}

.dash-metric-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3.5px;
    padding: 2.5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-metric-header {
    display: flex;
    align-items: center;
    gap: 1.5px;
    font-size: 4.2px;
    color: #94A3B8;
}

.dash-metric-val {
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

.dash-metric-trend {
    font-size: 4.2px;
    font-weight: 600;
    color: #10B981;
    line-height: 1;
}

.dash-metric-trend small {
    color: #64748B;
    font-size: 3.5px;
}

/* 3 Charts Grid */
.dash-charts-grid {
    display: grid;
    grid-template-columns: 36% 36% 28%;
    gap: 2.5px;
}

.dash-chart-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3.5px;
    padding: 2.5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.d-chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5px;
}

.d-chart-lbl {
    font-size: 4.5px;
    color: #94A3B8;
    display: block;
}

.d-chart-val {
    font-size: 6px;
    font-weight: 700;
    color: #FFFFFF;
}

.trend-pill {
    font-size: 4.2px;
    color: #10B981;
    font-weight: 600;
    margin-left: 1.5px;
}

.d-chart-svg-box {
    width: 100%;
    height: 18px;
}

.d-curve-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.d-gads-stats {
    display: flex;
    justify-content: space-between;
    font-size: 4.2px;
    margin-bottom: 1.5px;
}

.d-gads-stats small {
    display: block;
    color: #64748B;
    font-size: 3.8px;
}

.d-gads-stats strong {
    font-size: 5px;
    color: #FFFFFF;
}

.d-gads-stats .trend-up {
    color: #10B981;
    font-size: 3.8px;
    margin-left: 1px;
}

/* Donut & Channels */
.dash-donut-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.d-donut-wrap {
    display: flex;
    justify-content: center;
    padding: 1px 0;
}

.d-donut-circle {
    position: relative;
    width: 20px;
    height: 20px;
}

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

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

.d-donut-text strong {
    font-size: 5px;
    color: #FFFFFF;
    display: block;
    line-height: 1;
}

.d-channel-bars {
    display: flex;
    flex-direction: column;
    gap: 1.2px;
    margin-top: 1.5px;
}

.d-ch-row {
    display: flex;
    align-items: center;
    gap: 1.5px;
    font-size: 3.8px;
    color: #94A3B8;
}

.d-ch-row small {
    width: 14px;
    font-size: 3.8px;
}

.bar-fill {
    flex: 1;
    height: 1.8px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

.bar-fill.b-soc { background: #3B82F6; }
.bar-fill.b-em { background: #10B981; }
.bar-fill.b-seo { background: #8B5CF6; }
.bar-fill.b-ppc { background: #F59E0B; }

.d-ch-row strong {
    font-size: 3.8px;
    color: #CBD5E1;
}

/* Bottom 4 Spark Stat Cards */
.dash-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5px;
}

.dash-spark-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3.5px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-spark-card small {
    font-size: 4px;
    color: #94A3B8;
    line-height: 1;
}

.d-spark-val-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d-spark-val-row strong {
    font-family: "Poppins", sans-serif;
    font-size: 5.5px;
    color: #FFFFFF;
    font-weight: 700;
}

.d-spark-val-row .trend-up {
    font-size: 3.8px;
    color: #10B981;
    font-weight: 600;
}

.d-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.8px;
    height: 7px;
    margin-top: 1px;
}

.d-spark-bars span {
    flex: 1;
    background: #0D6EFD;
    border-radius: 0.5px;
}

/* Laptop Base / Deck */
.web-laptop-base {
    position: relative;
    height: 11px;
    background: linear-gradient(to bottom, #CBD5E1, #94A3B8);
    border-radius: 0 0 10px 10px;
    margin: 0 -22px;
    box-shadow: 0 10px 24px rgba(7, 24, 45, 0.16);
    display: flex;
    justify-content: center;
}

.web-laptop-notch {
    width: 60px;
    height: 4.5px;
    background: #475569;
    border-radius: 0 0 4px 4px;
}

.web-laptop-reflection {
    position: absolute;
    bottom: -18px;
    left: 4%;
    width: 92%;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(7, 24, 45, 0.28) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

/* Standing Smartphone Mockup in Front (Official Erinite Mobile "Why Choose Us" Showcase) */
.web-phone-wrap {
    position: absolute;
    right: 165px;
    bottom: -18px;
    width: 122px;
    z-index: 6;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-phone-wrap:hover {
    transform: translateY(-6px) scale(1.02);
}

.web-phone-body {
    background: #090E18;
    border: 2.2px solid #28364C;
    border-radius: 22px;
    padding: 3px;
    box-shadow: 0 25px 65px rgba(5, 16, 32, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

.web-phone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 4px;
    background: #020617;
    border-radius: 4px;
    z-index: 10;
}

.web-phone-screen {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 469 / 683;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* =========================================
   ERINITE OFFICIAL MOBILE PHONE MOCKUP (Section 01 & Section 03)
========================================= */
.erinite-phone-screen-inner {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 7px 6px 7px;
    border-radius: 20px;
    box-sizing: border-box;
}

.erinite-p-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #F1F5F9;
}

.erinite-p-brand {
    display: flex;
    align-items: center;
    gap: 3.5px;
}

.erinite-p-logo-img {
    height: 11px;
    width: auto;
    object-fit: contain;
}

.erinite-p-brand-name {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #07182D;
}

.erinite-p-hamburger {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    padding: 2px 3px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 3px;
}

.erinite-p-hamburger span {
    width: 7px;
    height: 1px;
    background: #0F172A;
    border-radius: 1px;
}

.erinite-p-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 1px 2px;
}

.erinite-p-pill {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #1D4ED8;
    font-size: 5.5px;
    font-weight: 700;
    padding: 1.5px 5.5px;
    border-radius: 10px;
    letter-spacing: 0.04em;
}

.erinite-p-title {
    font-family: "Poppins", sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    color: #07182D;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

.erinite-p-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    line-height: 1.35;
    color: #64748B;
    margin: 0;
}

.erinite-p-cards-container {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
}

.erinite-p-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}

.erinite-p-card-media {
    position: relative;
    width: 100%;
    height: 48px;
    background: #F8FAFC;
    overflow: hidden;
}

.erinite-p-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.erinite-p-media-badge {
    position: absolute;
    top: 3.5px;
    left: 3.5px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0D6EFD;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.35);
}

.erinite-p-card-body {
    padding: 3.5px 5px 4.5px 5px;
    display: flex;
    flex-direction: column;
    gap: 1.2px;
}

.erinite-p-card-title {
    font-family: "Poppins", sans-serif;
    font-size: 7px;
    font-weight: 700;
    color: #07182D;
    margin: 0;
    line-height: 1.2;
}

.erinite-p-card-desc {
    font-family: "Inter", sans-serif;
    font-size: 5.2px;
    line-height: 1.3;
    color: #64748B;
    margin: 0;
}

.erinite-p-card-list {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    margin-top: 1.5px;
}

.erinite-p-list-item {
    display: flex;
    align-items: center;
    gap: 2.5px;
    font-family: "Inter", sans-serif;
    font-size: 5.2px;
    font-weight: 500;
    color: #334155;
}

.erinite-p-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #0D6EFD;
    color: #FFFFFF;
    font-size: 4.8px;
    font-weight: 700;
}

.web-phone-home-bar,
.eco-phone-home-bar {
    width: 44px;
    height: 3px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
    margin: 3px auto 0 auto;
}

/* Floating Stat Card (Bottom-Right) */
.web-floating-card.card-growth-stat {
    position: absolute;
    bottom: 8px;
    right: -25px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 1.5px solid #DBEAFE;
    border-radius: 20px;
    padding: 13px 22px;
    box-shadow: 0 20px 48px rgba(13, 110, 253, 0.18);
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: floatGentle 4.5s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.web-floating-card.card-growth-stat:hover {
    transform: translateY(-4px) scale(1.03);
}

.growth-stat-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
}

.growth-stat-bars .bar {
    width: 6px;
    background: #0D6EFD;
    border-radius: 3px;
}

.growth-stat-bars .bar.b1 { height: 13px; opacity: 0.6; }
.growth-stat-bars .bar.b2 { height: 20px; opacity: 0.85; }
.growth-stat-bars .bar.b3 { height: 28px; opacity: 1; }

.growth-stat-info {
    display: flex;
    flex-direction: column;
}

.growth-stat-val {
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #0D6EFD;
    line-height: 1.1;
}

.growth-stat-lbl {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    line-height: 1.1;
    margin-top: 2px;
}

/* Smooth Floating Animations */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

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


/* =========================================
   SECTION 02: WHAT WE BUILD (INTERACTIVE LIVE SHOWCASE)
   Harmonized with Reference Image & Full Custom Panels
   ========================================= */

.web-showcase-section {
    position: relative;
    padding: 60px 0 70px 0;
    background: radial-gradient(circle at 50% 15%, rgba(220, 238, 255, 0.7) 0%, rgba(245, 250, 255, 0.5) 50%, #FFFFFF 100%);
    overflow: hidden;
}

.web-showcase-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
}

.web-section-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 36px auto;
}

.web-section-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #07182D;
    letter-spacing: -0.025em;
    margin: 0 0 10px 0;
}

.web-section-header h2 span {
    color: #0D6EFD;
}

.web-section-header p {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #475B78;
    margin: 0;
}

/* Master 3-Part Showcase Card Enclosure */
.web-showcase-master-card {
    background: linear-gradient(135deg, rgba(235, 245, 255, 0.65) 0%, rgba(245, 250, 255, 0.4) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(205, 228, 255, 0.9);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(13, 110, 253, 0.08), 0 4px 16px rgba(7, 24, 45, 0.04);
    display: grid;
    grid-template-columns: 260px 1fr 295px;
    gap: 16px;
    align-items: stretch;
}

/* 1. Left Column: Interactive Tabs (Frosted Glass Card) */
.web-tabs-sidebar {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 14px 12px;
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.web-tab-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(226, 232, 240, 0.7);
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #07182D;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    user-select: none;
    width: 100%;
    position: relative;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.02);
}

.web-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #0D6EFD;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.web-tab-icon svg {
    width: 19px;
    height: 19px;
}

.web-tab-text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.web-tab-title {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #07182D;
    line-height: 1.2;
    transition: color 0.25s ease;
}

.web-tab-sub {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748B;
    line-height: 1.2;
    transition: color 0.25s ease;
}

.web-tab-chevron {
    font-size: 16px;
    font-weight: 700;
    color: #94A3B8;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.web-tab-item:hover {
    background: #FFFFFF;
    border-color: #BED8F9;
    color: #0D6EFD;
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.08);
}

.web-tab-item:hover .web-tab-title {
    color: #0D6EFD;
}

.web-tab-item:hover .web-tab-chevron {
    color: #0D6EFD;
    transform: translateX(2px);
}

.web-tab-item.active {
    background: #0D6EFD;
    border-color: #0D6EFD;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.35);
}

.web-tab-item.active .web-tab-icon,
.web-tab-item.active .web-tab-chevron {
    color: #FFFFFF !important;
}

.web-tab-item.active .web-tab-title {
    color: #FFFFFF !important;
}

.web-tab-item.active .web-tab-sub {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* 2. Middle Column: White Desktop Browser Mockup + Bottom 3 Cards */
.web-browser-stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    gap: 12px;
    height: 100%;
}

.web-browser-window {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(13, 110, 253, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Browser Top Bar (Light Theme) */
.web-browser-topbar-light {
    background: #F8FAFC;
    padding: 8px 14px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.web-browser-dots {
    display: flex;
    align-items: center;
    gap: 5.5px;
}

.b-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
}

.b-dot.b-red { background: #EF4444; }
.b-dot.b-yellow { background: #F59E0B; }
.b-dot.b-green { background: #10B981; }

/* Browser Viewport & Dynamic Panels */
.web-browser-viewport {
    position: relative;
    flex: 1;
    background: #FFFFFF;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default !important;
}

.web-preview-panel,
.web-preview-panel * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default !important;
}

.web-preview-panel a,
.web-preview-panel button,
.web-preview-panel input,
.web-preview-panel select,
.web-preview-panel [role="button"],
.web-preview-panel .figma-tool,
.web-preview-panel .figma-layer-item,
.web-preview-panel .f-insp-tabs span,
.web-preview-panel .mock-cta-btn,
.web-preview-panel .mock-video-btn,
.web-preview-panel .mock-nav-btn,
.web-preview-panel .wp-nav-entry,
.web-preview-panel .wp-preview-btn,
.web-preview-panel .wp-update-btn,
.web-preview-panel .wp-tool-item,
.web-preview-panel .wp-block-btn,
.web-preview-panel .ecom-cart-btn,
.web-preview-panel .ecom-banner-btn,
.web-preview-panel .ecom-view-all,
.web-preview-panel .app-nav-item,
.web-preview-panel .app-activity-link,
.web-preview-panel .figma-share-btn,
.web-preview-panel .f-desk-btn,
.web-preview-panel .f-mob-btn,
.web-preview-panel .maint-view-link,
.web-preview-panel .maint-nav-links span,
.web-preview-panel .mock-site-links span,
.web-preview-panel .mock-inner-card,
.web-preview-panel .ecom-product-card,
.web-preview-panel .app-user-pill,
.web-preview-panel .app-notif-bell,
.web-preview-panel .app-stat-card,
.web-preview-panel .f-feat-item {
    cursor: pointer !important;
}

.web-preview-panel {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.web-preview-panel.active {
    display: flex;
}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common Mock Website Top Nav */
.mock-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 14px;
}

.mock-site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #07182D;
}

.mock-logo-icon {
    width: 18px;
    height: 18px;
    background: #0D6EFD;
    color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.mock-logo-icon.jm-icon {
    background: #0D6EFD;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 800;
    border-radius: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mock-logo-icon.wp-icon {
    background: #21759B;
}

.mock-logo-icon.shop-icon {
    background: #10B981;
}

.mock-logo-icon.saas-icon {
    background: #0D6EFD;
}

.mock-logo-icon.uiux-icon {
    background: #8B5CF6;
}

.mock-logo-icon.ops-icon {
    background: #059669;
}

.mock-site-links {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    font-family: "Inter", sans-serif;
    color: #64748B;
}

.mock-site-links .active {
    color: #07182D;
    font-weight: 600;
}

.mock-site-cta {
    display: flex;
    align-items: center;
}

.mock-nav-btn {
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: #FFFFFF;
    background: #07182D;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.mock-nav-btn.wp-edit-btn {
    background: #0D6EFD;
}

.mock-cart-counter {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #0D6EFD;
    background: #EBF3FE;
    padding: 4px 10px;
    border-radius: 12px;
}

.mock-live-pill,
.mock-health-active {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: #16A34A;
    background: #DCFCE7;
    padding: 3px 10px;
    border-radius: 12px;
}

/* ================= PANEL 1: Business (JM Furnitures) ================= */
.mock-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.mock-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mock-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0D6EFD;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.mock-hero-heading {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    color: #07182D;
    letter-spacing: -0.025em;
    margin: 0 0 4px 0;
}

.mock-hero-desc {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    line-height: 1.35;
    color: #475B78;
    margin: 0 0 8px 0;
}

.mock-hero-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mock-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #07182D;
    color: #FFFFFF !important;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mock-cta-btn:hover {
    background: #0D6EFD;
}

.mock-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #07182D;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 6px;
    background: #F1F5F9;
}

.mock-video-btn .m-play {
    font-size: 8px;
    color: #0D6EFD;
}

.mock-image-frame {
    width: 100%;
    height: 145px;
    border-radius: 10px;
    overflow: hidden;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    box-shadow: 0 6px 18px rgba(7, 24, 45, 0.06);
    position: relative;
}

.mock-panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 9px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mock-image-frame:hover .mock-panel-img {
    transform: scale(1.03);
}

.mock-inner-mini-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #F1F5F9;
}

.mock-inner-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    min-width: 0;
    transition: all 0.2s ease;
}

.mock-inner-card:hover {
    background: #FFFFFF;
    border-color: #BED8F9;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.06);
}

.mock-inner-thumb-img {
    width: 44px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.mock-inner-thumb {
    width: 44px;
    height: 40px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #EBF3FE;
    flex-shrink: 0;
}

.thumb-interior {
    background-image: url('../assets/images/thumb-modern-interiors.jpg');
}

.thumb-living {
    background-image: url('../assets/images/thumb-smart-living.jpg');
}

.thumb-quality {
    background-image: url('../assets/images/thumb-premium-quality.jpg');
}

.mock-inner-txt {
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: #07182D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= PANEL 2: WordPress Websites (3-Part Stage View) ================= */
.wp-stage-grid {
    display: grid;
    grid-template-columns: 80px 190px 1fr;
    gap: 9px;
    height: 100%;
    align-items: stretch;
}

/* 1. Left WordPress Dark Admin Sidebar */
.wp-stage-admin-sidebar {
    background: #0B132B;
    border-radius: 10px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #94A3B8;
}

.wp-admin-logo-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #21759B;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3px auto;
}

.wp-admin-logo-circle svg {
    width: 13px;
    height: 13px;
}

.wp-admin-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.wp-nav-entry {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.wp-nav-entry .wp-icon {
    font-size: 8.5px;
    width: 11px;
    text-align: center;
}

.wp-nav-entry:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.wp-nav-entry.active {
    background: #0D6EFD;
    color: #FFFFFF;
    font-weight: 600;
}

/* 2. Middle Gutenberg Page Editor */
.wp-stage-editor {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.wp-editor-header {
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
}

.wp-editor-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.wp-editor-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wp-edit-heading {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #07182D;
}

.wp-status-pill {
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    color: #16A34A;
    background: #DCFCE7;
    padding: 1px 5px;
    border-radius: 10px;
}

.wp-editor-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wp-preview-btn {
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    padding: 2.5px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-preview-btn:hover {
    background: #E2E8F0;
    color: #07182D;
}

.wp-update-btn {
    background: #0D6EFD;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 2.5px 8px;
    font-weight: 600;
    font-size: 8.5px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: "Poppins", sans-serif;
}

.wp-update-btn:hover {
    background: #0B5ED7;
}

.wp-editor-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.wp-permalink-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    color: #64748B;
    background: #F8FAFC;
    padding: 2px 5px;
    border-radius: 4px;
}

.wp-p-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-link-edit {
    color: #0D6EFD;
    font-weight: 600;
    cursor: pointer;
    font-size: 7px;
}

.wp-toolbar-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 2.5px 5px;
    font-size: 7.5px;
    color: #475569;
}

.wp-tool-item {
    cursor: pointer;
}

.wp-tool-add {
    background: #07182D;
    color: #FFFFFF;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 700;
}

.wp-block-preview-card {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    height: 112px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

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

.wp-block-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 7px;
    color: #FFFFFF;
}

.wp-block-overlay h4 {
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1px 0;
    color: #FFFFFF;
}

.wp-block-overlay p {
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 4px 0;
}

.wp-block-btn {
    align-self: flex-start;
    background: #0D6EFD;
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    padding: 2.5px 6px;
    border-radius: 3px;
    display: inline-block;
}

.wp-editor-doc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    color: #64748B;
    padding-top: 3px;
    border-top: 1px solid #F1F5F9;
}

.wp-doc-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.wp-meta-dot {
    width: 4px;
    height: 4px;
    background: #16A34A;
    border-radius: 50%;
}

.wp-meta-sep {
    color: #CBD5E1;
}

/* 3. Right Floating Live Website Card ("Home Furnish Hub") */
.wp-stage-live-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.05);
}

.wp-live-dots-bar {
    display: flex;
    gap: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #F1F5F9;
}

.wp-live-dots-bar span {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #CBD5E1;
}

.wp-live-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0 3px 0;
}

.wp-live-logo {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: #07182D;
    white-space: nowrap;
}

.wp-live-logo-icon {
    width: 12px;
    height: 12px;
    background: #EBF3FE;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-live-logo-icon svg {
    width: 8px;
    height: 8px;
}

.wp-live-links {
    display: flex;
    gap: 6px;
    font-family: "Inter", sans-serif;
    font-size: 7px;
    color: #64748B;
    white-space: nowrap;
}

.wp-live-links .active {
    color: #07182D;
    font-weight: 700;
}

.wp-live-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 6px;
    align-items: center;
    margin: 2px 0;
}

.wp-live-eyebrow {
    font-size: 6.5px;
    font-weight: 700;
    color: #0D6EFD;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1px;
}

.wp-live-title {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #07182D;
    line-height: 1.15;
    margin: 0 0 2px 0;
}

.wp-live-desc {
    font-family: "Inter", sans-serif;
    font-size: 7px;
    color: #64748B;
    line-height: 1.3;
    margin: 0 0 4px 0;
}

.wp-live-cta-btn {
    display: inline-block;
    background: #07182D;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 7px;
    font-weight: 600;
    padding: 2.5px 7px;
    border-radius: 3px;
    text-decoration: none;
}

.wp-live-img {
    width: 100%;
    height: 95px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #E2E8F0;
    display: block;
}

.wp-live-features-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding-top: 3px;
    border-top: 1px solid #F1F5F9;
}

.wp-live-feat {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 2px 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 600;
    color: #07182D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-live-feat .feat-icon {
    font-size: 7.5px;
}

/* ================= PANEL 3: Ecommerce Stores (Oodelo Storefront & Analytics) ================= */
.mock-site-nav.ecom-store-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 6px;
}

.ecom-logo-brand {
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: #07182D;
    letter-spacing: -0.02em;
}

.ecom-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    color: #64748B;
}

.ecom-nav-links .active {
    color: #07182D;
    font-weight: 700;
}

.ecom-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ecom-nav-icon {
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.ecom-nav-icon:hover {
    color: #07182D;
}

.ecom-cart-badge-wrap {
    position: relative;
    color: #07182D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecom-cart-bubble {
    position: absolute;
    top: -5px;
    right: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0D6EFD;
    color: #FFFFFF;
    font-size: 7.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.4);
}

.ecom-main-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    justify-content: space-between;
}

/* --- Top Row: Hero Promo Banner + 3 Stats --- */
.ecom-top-row-grid {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 7px;
    align-items: stretch;
}

.ecom-hero-banner-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 8px;
    align-items: center;
}

.ecom-banner-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ecom-banner-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0D6EFD;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ecom-banner-title {
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.15;
    color: #07182D;
    margin: 0 0 2px 0;
}

.ecom-banner-desc {
    font-family: "Inter", sans-serif;
    font-size: 7px;
    line-height: 1.3;
    color: #64748B;
    margin: 0 0 5px 0;
}

.ecom-banner-btn {
    background: #07182D;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
}

.ecom-banner-btn:hover {
    background: #0D6EFD;
}

.ecom-banner-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ecom-banner-img-wrap {
    position: relative;
    width: 100%;
    height: 78px;
    border-radius: 7px;
    overflow: hidden;
    background: #E2E8F0;
    border: 1px solid #CBD5E1;
}

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

.ecom-banner-overlay-text {
    position: absolute;
    top: 5px;
    left: 7px;
    display: flex;
    flex-direction: column;
    gap: 0.5px;
}

.ecom-banner-overlay-text .eb-tag {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #07182D;
    line-height: 1.1;
}

.ecom-banner-overlay-text .eb-sub {
    font-family: "Inter", sans-serif;
    font-size: 6px;
    color: #475569;
    font-weight: 500;
}

.ecom-dots-indicator {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ecom-dots-indicator .dot {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #CBD5E1;
}

.ecom-dots-indicator .dot.active {
    width: 9px;
    border-radius: 4px;
    background: #0D6EFD;
}

/* Right 3 Mini Stats */
.ecom-top-stats-col {
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    justify-content: space-between;
}

.ecom-stat-badge {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    padding: 3.5px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.ecom-stat-icon-wrap {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ecom-stat-icon-wrap.stat-green { background: #DCFCE7; color: #16A34A; }
.ecom-stat-icon-wrap.stat-blue { background: #EBF3FE; color: #0D6EFD; }
.ecom-stat-icon-wrap.stat-cyan { background: #E0F2FE; color: #0284C7; }

.ecom-stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.5px;
    flex: 1;
    min-width: 0;
}

.ecom-stat-lbl {
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 500;
    color: #64748B;
    line-height: 1;
}

.ecom-stat-val {
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
    line-height: 1.1;
}

.ecom-stat-trend {
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    color: #16A34A;
    background: #DCFCE7;
    padding: 1px 4px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Bottom Row: 4 Featured Products + Sales Chart --- */
.ecom-bottom-row-grid {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 7px;
    align-items: stretch;
}

.ecom-products-block {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ecom-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.ecom-block-title {
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
}

.ecom-view-all {
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #0D6EFD;
    cursor: pointer;
}

.ecom-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.5px;
}

.ecom-product-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 3.5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.2s, border-color 0.2s;
}

.ecom-product-card:hover {
    border-color: #BED8F9;
    transform: translateY(-1px);
}

.ecom-prod-img-box {
    width: 100%;
    height: 42px;
    border-radius: 4px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #F1F5F9;
}

.ecom-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ecom-item-name {
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    color: #07182D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.ecom-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
}

.ecom-item-price {
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: #07182D;
}

.ecom-cart-btn {
    width: 13px;
    height: 13px;
    background: #0D6EFD;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.ecom-cart-btn:hover {
    background: #0b5ed7;
}

/* Sales Overview Mini Bar Chart */
.ecom-chart-block {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ecom-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.ecom-chart-title {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #07182D;
}

.ecom-period-pill {
    font-family: "Inter", sans-serif;
    font-size: 6px;
    color: #64748B;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    padding: 1px 3.5px;
    border-radius: 3px;
}

.ecom-chart-body {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 56px;
    position: relative;
    padding-top: 1px;
}

.ecom-chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 44px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #94A3B8;
    font-weight: 600;
    padding-bottom: 11px;
}

.ecom-bars-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5px;
    flex: 1;
    height: 100%;
    align-items: flex-end;
}

.ecom-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5px;
    height: 100%;
    justify-content: flex-end;
}

.ecom-bar-track {
    width: 9px;
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ecom-bar-fill {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: #93C5FD;
    transition: height 0.4s ease;
}

.ecom-bar-fill.highlight {
    background: #0D6EFD;
}

.ecom-bar-month {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #64748B;
    font-weight: 600;
}

/* ================= PANEL 4: Web Applications (Oodelo SaaS Dashboard) ================= */
.app-dashboard-layout {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 8px;
    height: 100%;
    align-items: stretch;
}

/* 1. Left Dark Sidebar */
.app-dark-sidebar {
    background: #0B132B;
    border-radius: 10px;
    padding: 7px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #94A3B8;
}

.app-brand-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: #FFFFFF;
}

.app-logo-hexagon {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 5px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    font-weight: 500;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.app-nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.app-nav-item.active {
    background: #0D6EFD;
    color: #FFFFFF;
    font-weight: 600;
}

.app-nav-icon {
    font-size: 7.5px;
    width: 10px;
    text-align: center;
}

.app-upgrade-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
    transition: background 0.2s;
}

.app-upgrade-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

.app-upgrade-title {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.app-crown-icon {
    font-size: 7px;
}

.app-upgrade-sub {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #94A3B8;
}

/* 2. Right Main Dashboard Content */
.app-main-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    height: 100%;
}

/* Header Row */
.app-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
    border-bottom: 1px solid #F1F5F9;
}

.app-search-box {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 2.5px 8px;
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    color: #94A3B8;
    width: 140px;
}

.app-user-profile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-notif-bell {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-bell-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 4.5px;
    height: 4.5px;
    background: #EF4444;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
}

.app-user-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.app-avatar-img {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    object-fit: cover;
}

.app-user-details {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.app-user-name {
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    color: #07182D;
}

.app-user-role {
    font-family: "Inter", sans-serif;
    font-size: 6px;
    color: #94A3B8;
}

.app-user-chevron {
    font-size: 6px;
    color: #94A3B8;
}

/* Greeting & Date Row */
.app-greeting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-welcome-heading {
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
    line-height: 1.1;
}

.app-welcome-sub {
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    color: #64748B;
    margin: 0;
}

.app-date-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 2px 6px;
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 600;
    color: #475569;
}

/* 4 KPI Cards Grid */
.app-kpi-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.app-stat-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.2s, border-color 0.2s;
}

.app-stat-card:hover {
    border-color: #BED8F9;
    transform: translateY(-1px);
}

.app-stat-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-stat-icon-wrap {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-bg-blue { background: #EBF3FE; }
.stat-bg-green { background: #DCFCE7; }
.stat-bg-orange { background: #FEF3C7; }
.stat-bg-purple { background: #F3E8FF; }

.app-stat-number-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-stat-num {
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
    line-height: 1.1;
}

.app-stat-tag {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-stat-footer {
    display: flex;
    align-items: center;
    gap: 2px;
}

.app-trend-arrow {
    font-size: 6px;
    font-weight: 700;
}

.app-trend-arrow.text-blue { color: #0D6EFD; }
.app-trend-arrow.text-green { color: #16A34A; }
.app-trend-arrow.text-orange { color: #F59E0B; }
.app-trend-arrow.text-purple { color: #8B5CF6; }

.app-trend-pill {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    font-weight: 700;
    padding: 0.5px 3px;
    border-radius: 4px;
}

.trend-green {
    color: #16A34A;
    background: #DCFCE7;
}

/* Bottom Split: Chart + Activity Feed */
.app-lower-split-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 6px;
    align-items: stretch;
}

/* Project Overview Wave Chart */
.app-overview-chart-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.app-chart-heading {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
}

.app-chart-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Inter", sans-serif;
    font-size: 6px;
    color: #64748B;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.l-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.l-blue { background: #0D6EFD; }
.l-purple { background: #8B5CF6; }

.app-wave-chart-stage {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 60px;
    position: relative;
    padding-top: 10px;
}

.app-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 44px;
    font-family: "Inter", sans-serif;
    font-size: 5px;
    color: #94A3B8;
    font-weight: 600;
    padding-bottom: 10px;
}

.app-svg-chart-wrap {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.app-chart-tooltip {
    position: absolute;
    background: #07182D;
    color: #FFFFFF;
    border-radius: 3px;
    padding: 1px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Inter", sans-serif;
    transform: translate(-50%, -100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 5;
    pointer-events: none;
}

.app-chart-tooltip .tt-date {
    font-size: 4.5px;
    color: #94A3B8;
}

.app-chart-tooltip .tt-val {
    font-size: 5.5px;
    font-weight: 700;
    color: #38BDF8;
}

.app-wave-svg {
    width: 100%;
    height: 38px;
    overflow: visible;
}

.app-chart-x-axis {
    display: flex;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #64748B;
    margin-top: 1px;
}

/* Recent Activity Feed */
.app-activity-feed-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.app-activity-title {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
}

.app-activity-link {
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 600;
    color: #0D6EFD;
    cursor: pointer;
}

.app-activity-list {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
}

.app-activity-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1.5px 0;
}

.app-act-icon-box {
    width: 15px;
    height: 15px;
    border-radius: 3.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.act-blue { background: #EBF3FE; }
.act-green { background: #DCFCE7; }
.act-cyan { background: #E0F2FE; }

.app-act-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.1;
}

.app-act-heading {
    font-family: "Poppins", sans-serif;
    font-size: 6px;
    font-weight: 700;
    color: #07182D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-act-desc {
    font-family: "Inter", sans-serif;
    font-size: 5px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-act-time {
    font-family: "Inter", sans-serif;
    font-size: 5px;
    color: #94A3B8;
    white-space: nowrap;
}

/* ================= PANEL 5: UI/UX (Erinite Design Figma Workspace) ================= */
.figma-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 6px;
}

.figma-top-brand {
    display: flex;
    align-items: center;
    gap: 4.5px;
}

.figma-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-brand-name {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #07182D;
    letter-spacing: -0.01em;
}

.figma-tools-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 2px 7px;
}

/* ================= PANEL 5: UI/UX (Erinite Design Figma Workspace) ================= */
.figma-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 5px;
    flex-shrink: 0;
}

.figma-top-brand {
    display: flex;
    align-items: center;
    gap: 4px;
}

.figma-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-brand-name {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #07182D;
    letter-spacing: -0.01em;
}

.figma-tools-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 2px 6px;
}

.figma-tool {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer !important;
    border-radius: 3px;
    transition: all 0.2s;
}

.figma-tool:hover {
    color: #07182D;
    background: #E2E8F0;
}

.figma-tool.active {
    color: #0D6EFD;
    background: #EBF3FE;
}

.figma-top-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.figma-user-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0D6EFD;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-share-btn {
    background: #0D6EFD;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    padding: 2.5px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer !important;
    transition: background 0.2s;
}

.figma-share-btn:hover {
    background: #0B5ED7;
}

.figma-zoom-pill {
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 1.5px 4px;
    border-radius: 4px;
}

/* 3-Column Figma Stage */
.figma-workspace-grid {
    display: grid;
    grid-template-columns: 70px 1fr 94px;
    gap: 6px;
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

/* 1. Left Layers Column */
.figma-layers-col {
    background: transparent;
    border: none;
    padding: 1px 0;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.figma-layer-item {
    display: flex;
    align-items: center;
    gap: 3.5px;
    padding: 3px 4px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 7.5px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer !important;
    transition: all 0.2s;
    user-select: none;
}

.figma-layer-item:hover:not(.active) {
    color: #07182D;
    background: #F1F5F9;
}

.figma-layer-item.active {
    background: #EBF3FE;
    color: #0D6EFD;
    font-weight: 600;
}

/* 2. Center Canvas Area (Desktop + Mobile Artboards) */
.figma-canvas-area {
    display: grid;
    grid-template-columns: 1fr 148px;
    gap: 8px;
    background: #EEF2F6;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px 7px;
    align-items: stretch;
    overflow: hidden;
}

/* Desktop Artboard */
.figma-artboard-desktop {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.f-desk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
    border-bottom: 1px solid #F1F5F9;
}

.f-desk-logo {
    display: flex;
    align-items: center;
    gap: 2.5px;
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: #07182D;
}

.f-mini-sq {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #0D6EFD;
}

.f-desk-links {
    display: flex;
    gap: 5px;
    font-family: "Inter", sans-serif;
    font-size: 6px;
    color: #64748B;
}

.f-desk-links .active {
    color: #07182D;
    font-weight: 700;
}

.f-desk-search {
    color: #94A3B8;
    display: flex;
    align-items: center;
}

.f-desk-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 7px;
    align-items: center;
    margin: 2px 0;
}

.f-desk-copy-box {
    position: relative;
    padding: 4px 5px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.f-select-border {
    position: absolute;
    inset: 0;
    border: 1.2px dashed #0D6EFD;
    pointer-events: none;
    border-radius: 2px;
}

.f-handle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #0D6EFD;
    border: 0.8px solid #FFFFFF;
    border-radius: 1px;
}

.h-tl { top: -2.5px; left: -2.5px; }
.h-tr { top: -2.5px; right: -2.5px; }
.h-bl { bottom: -2.5px; left: -2.5px; }
.h-br { bottom: -2.5px; right: -2.5px; }
.h-tc { top: -6px; left: calc(50% - 2px); }

.f-desk-title {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    color: #07182D;
    margin: 0 0 2px 0;
}

.f-desk-sub {
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    line-height: 1.35;
    color: #64748B;
    margin: 0 0 4px 0;
}

.f-desk-btn {
    background: #0D6EFD;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 600;
    padding: 2.5px 7px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer !important;
}

.f-desk-img-wrap {
    position: relative;
    width: 100%;
    height: 88px;
    border-radius: 5px;
    overflow: visible;
    background: #F1F5F9;
}

.f-desk-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.f-floating-stat-badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: #FFFFFF;
    border: 0.8px solid #E2E8F0;
    border-radius: 4px;
    padding: 2.5px 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.f-stat-txt {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.f-stat-num {
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: #07182D;
}

.f-stat-lbl {
    font-family: "Inter", sans-serif;
    font-size: 5px;
    color: #64748B;
}

.f-stat-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.2px;
    height: 9px;
}

.f-stat-bars .sb {
    width: 2px;
    background: #0D6EFD;
    border-radius: 0.5px;
}

.sb.b1 { height: 4.5px; }
.sb.b2 { height: 7px; }
.sb.b3 { height: 9px; }

.f-desk-feats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid #F1F5F9;
}

.f-feat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    white-space: nowrap;
}

.f-feat-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EBF3FE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobile Artboard (iPhone Device Frame) */
.figma-artboard-mobile {
    background: #0F172A;
    border-radius: 16px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 148px;
    flex-shrink: 0;
}

.f-mob-speaker {
    width: 20px;
    height: 2.5px;
    background: #475569;
    border-radius: 1.5px;
    margin: 1px auto 2px auto;
}

.f-mob-screen {
    background: #FFFFFF;
    border-radius: 13px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

.f-mob-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 4.5px;
    color: #07182D;
    font-weight: 700;
}

.f-mob-status-icons {
    display: flex;
    align-items: center;
    gap: 1.5px;
}

.f-bar-dot {
    width: 2.5px;
    height: 2.5px;
    background: #16A34A;
    border-radius: 50%;
}

.f-bar-battery {
    width: 4.5px;
    height: 2.5px;
    border: 0.5px solid #07182D;
    border-radius: 0.5px;
}

.f-mob-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
    margin-top: 1px;
}

.f-mob-logo {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: "Poppins", sans-serif;
    font-size: 6.5px;
    font-weight: 800;
    color: #07182D;
}

.f-mob-hamburger {
    font-size: 7.5px;
    font-weight: 700;
    color: #07182D;
    line-height: 1;
}

.f-mob-hero {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 3px 0;
}

.f-mob-title {
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    color: #07182D;
    margin: 0;
}

.f-mob-sub {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    line-height: 1.25;
    color: #64748B;
    margin: 0;
}

.f-mob-btn {
    background: #0D6EFD;
    color: #FFFFFF !important;
    font-family: "Poppins", sans-serif;
    font-size: 5.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2.5px;
    align-self: flex-start;
    text-decoration: none;
    margin-top: 1.5px;
    cursor: pointer !important;
}

.f-mob-img-box {
    width: 100%;
    height: 58px;
    border-radius: 4px;
    overflow: hidden;
    background: #F1F5F9;
    border: 0.5px solid #E2E8F0;
    margin-top: 2px;
    flex: 1;
}

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

.f-mob-home-bar {
    width: 26px;
    height: 2px;
    background: #07182D;
    border-radius: 1px;
    margin: 2.5px auto 0 auto;
}

/* 3. Right Design Inspector Column */
.figma-inspector-col {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.f-insp-tabs {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 2px;
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 600;
    color: #64748B;
}

.f-insp-tabs .active {
    color: #0D6EFD;
    border-bottom: 1.5px solid #0D6EFD;
    margin-bottom: -3px;
    padding-bottom: 2px;
}

.f-insp-section {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 2px;
}

.f-insp-lbl {
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 700;
    color: #475569;
}

.f-insp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.f-input-badge {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 3px;
    padding: 1px 2.5px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #07182D;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.f-input-badge span {
    color: #94A3B8;
}

.f-insp-clip {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #475569;
}

.f-check-icon {
    color: #0D6EFD;
    font-weight: 800;
    font-size: 6px;
}

.f-insp-fill-row {
    display: flex;
    align-items: center;
    gap: 2.5px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 3px;
    padding: 1px 2.5px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #07182D;
}

.f-color-box {
    width: 6.5px;
    height: 6.5px;
    border-radius: 1px;
    background: #0D6EFD;
}

.f-color-hex {
    font-weight: 600;
}

.f-color-opacity {
    color: #94A3B8;
}

.f-color-eye {
    font-size: 4.5px;
    color: #94A3B8;
    margin-left: auto;
}

.f-insp-dropdown {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 3px;
    padding: 1px 2.5px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #07182D;
}

/* ================= PANEL 6: Maintenance & Support (Oodelo Website Health Dashboard) ================= */
.maint-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 6px;
}

.maint-brand {
    display: flex;
    align-items: center;
    gap: 4px;
}

.maint-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.maint-brand-name {
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: #07182D;
    letter-spacing: -0.01em;
}

.maint-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: 8px;
    color: #64748B;
}

.maint-nav-links .active {
    color: #07182D;
    font-weight: 700;
    position: relative;
    padding-bottom: 2px;
}

.maint-nav-links .active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: #0D6EFD;
    border-radius: 1px;
}

.maint-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.maint-bell-wrap {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.maint-bell-num {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 5.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
}

.maint-avatar-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #07182D;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maint-chevron {
    font-size: 6px;
    color: #94A3B8;
}

/* 2-Column Dashboard Grid */
.maint-dashboard-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 8px;
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

/* Left Column */
.maint-left-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-height: 0;
}

.maint-health-top {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.maint-heading-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.maint-title {
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    color: #07182D;
    margin: 0;
}

.maint-sub {
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    color: #64748B;
    margin: 0;
}

.maint-kpi-split-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 6px;
    align-items: center;
}

/* Circular Gauge */
.maint-uptime-gauge-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.maint-circle-gauge {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.maint-gauge-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.maint-uptime-num {
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: #07182D;
}

.maint-uptime-lbl {
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #64748B;
    margin: 1px 0 2px 0;
}

.maint-online-pill {
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    font-weight: 700;
    color: #16A34A;
    background: #DCFCE7;
    padding: 0.5px 3.5px;
    border-radius: 6px;
}

/* 4 Score Cards (2x2 Grid) */
.maint-scores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5px;
}

.maint-score-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 2.5px 4px;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.maint-sc-header {
    display: flex;
    align-items: center;
    gap: 3px;
}

.maint-sc-icon {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6.5px;
    flex-shrink: 0;
}

.sc-blue { background: #EBF3FE; }
.sc-green { background: #DCFCE7; }

.maint-sc-info {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.maint-sc-name {
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #64748B;
    font-weight: 500;
}

.maint-sc-val {
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: #07182D;
}

.maint-sc-val small {
    font-size: 4.2px;
    color: #94A3B8;
    font-weight: 500;
}

.maint-sc-prog {
    width: 100%;
    height: 2px;
    background: #E2E8F0;
    border-radius: 1px;
    overflow: hidden;
}

.maint-sc-bar {
    display: block;
    height: 100%;
    background: #16A34A;
    border-radius: 1px;
}

.maint-sc-bar.bg-green {
    background: #16A34A;
}

/* Performance Overview Line Chart Card - Expanded to fill bottom space */
.maint-chart-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 8px 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
}

.maint-chart-hdr {
    margin-bottom: 2px;
}

.maint-chart-name {
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #07182D;
}

.maint-chart-body {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 6px;
    align-items: center;
    flex: 1;
}

.maint-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 70px;
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #94A3B8;
    text-align: right;
    line-height: 1;
}

.maint-svg-wrap {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.maint-peak-tooltip {
    position: absolute;
    top: 5px;
    left: 78%;
    transform: translateX(-50%);
    background: #07182D;
    color: #FFFFFF;
    padding: 1.5px 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.maint-peak-tooltip small {
    font-weight: 400;
    color: #94A3B8;
    font-size: 4.5px;
}

.maint-tt-arrow {
    position: absolute;
    bottom: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 2.5px solid transparent;
    border-right: 2.5px solid transparent;
    border-top: 2.5px solid #07182D;
}

.maint-line-svg {
    width: 100%;
    height: 54px;
    display: block;
}

.maint-x-axis {
    display: flex;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-size: 4.8px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Right Column */
.maint-right-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-height: 0;
}

.maint-feed-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
}

.maint-feed-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 2px;
}

.maint-feed-title {
    font-family: "Poppins", sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: #07182D;
}

.maint-view-link {
    font-family: "Inter", sans-serif;
    font-size: 5px;
    font-weight: 600;
    color: #0D6EFD;
    cursor: pointer;
}

.maint-feed-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 2px;
}

.maint-feed-item {
    display: flex;
    align-items: center;
    gap: 3.5px;
    padding: 0.5px 0;
}

.maint-icon-badge {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.badge-green { background: #DCFCE7; color: #16A34A; }
.badge-wp { background: #21759B; color: #FFFFFF; font-family: "Poppins", sans-serif; font-size: 5px; }
.badge-blue { background: #EBF3FE; color: #0D6EFD; font-size: 5.5px; }

.maint-feed-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.maint-act-title {
    font-family: "Poppins", sans-serif;
    font-size: 5.8px;
    font-weight: 700;
    color: #07182D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maint-act-time {
    font-family: "Inter", sans-serif;
    font-size: 4.5px;
    color: #94A3B8;
    white-space: nowrap;
}

/* ================= 3 Separate Dynamic Bottom Cards Outside Browser ================= */
.web-showcase-bottom-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 0;
    flex-shrink: 0;
}

.web-bottom-card-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.04);
    transition: all 0.25s ease;
    min-width: 0;
    min-height: 58px;
}

.web-bottom-card-item:hover {
    background: #FFFFFF;
    border-color: #BED8F9;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.09);
}

.web-bottom-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #EBF3FE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D6EFD;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.web-bottom-card-icon svg {
    width: 17px;
    height: 17px;
}

.web-bottom-card-icon.bg-blue {
    background: #EBF3FE;
    color: #0D6EFD;
}

.web-bottom-card-icon.bg-purple {
    background: #F3E8FF;
    color: #8B5CF6;
}

.web-bottom-card-icon.bg-green {
    background: #DCFCE7;
    color: #10B981;
}

.web-bottom-card-icon.bg-orange {
    background: #FFEDD5;
    color: #EA580C;
}

.web-bottom-card-item:hover .web-bottom-card-icon {
    transform: scale(1.06);
}

.web-bottom-card-info {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    min-width: 0;
}

.web-bottom-card-label {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #07182D;
    line-height: 1.2;
    white-space: nowrap;
}

.web-bottom-card-sub {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #64748B;
    line-height: 1.25;
    white-space: nowrap;
}

/* ================= 3. Right Column: Detail Card ================= */
.web-detail-card-col {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 20px 18px;
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.web-detail-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.web-detail-header-wrap {
    margin-bottom: 8px;
}

.web-detail-title {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: #07182D;
    letter-spacing: -0.025em;
    margin: 0 0 6px 0;
}

.web-detail-desc {
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475B78;
    margin: 0;
}

/* 4 Bullet Checkmarks */
.web-detail-bullets {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 12px 0 16px 0;
}

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

.web-bullet-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0D6EFD;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
}

.web-bullet-check svg {
    width: 9px;
    height: 9px;
    color: #FFFFFF;
}

.web-bullet-text {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.web-detail-cta-wrap {
    margin-bottom: auto;
}

/* Prev / Next Navigation Controls with 6 Dots */
.web-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.web-ctrl-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 4px 12px rgba(7, 24, 45, 0.05);
    color: #0D6EFD;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.web-ctrl-btn:hover {
    background: #0D6EFD;
    color: #FFFFFF;
    border-color: #0D6EFD;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.28);
}

.web-pagination-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: all 0.25s ease;
}

.p-dot.active {
    width: 18px;
    border-radius: 10px;
    background: #0D6EFD;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}


/* =========================================
   SECTION 03: PROCESS & CAPABILITIES ECOSYSTEM (100% SINGLE SCREEN FIT)
   ========================================= */

.web-ecosystem-section {
    position: relative;
    min-height: calc(100vh - 85px);
    padding: 46px 24px 42px 24px;
    background: 
        radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 255, 0.55) 60%, rgba(235, 245, 255, 0.25) 100%),
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(186, 230, 253, 0.6) 0%, rgba(224, 242, 254, 0.2) 50%, transparent 75%),
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(199, 210, 254, 0.5) 0%, rgba(224, 242, 254, 0.2) 50%, transparent 75%),
        radial-gradient(ellipse 80% 60% at 0% 100%, rgba(186, 230, 253, 0.55) 0%, rgba(224, 242, 254, 0.2) 50%, transparent 75%),
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(199, 210, 254, 0.55) 0%, rgba(224, 242, 254, 0.2) 50%, transparent 75%),
        #F8FAFC;
    overflow: hidden;
    user-select: none !important;
    cursor: default !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-eco-bg-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

.web-eco-bg-waves svg {
    width: 100%;
    height: 100%;
    display: block;
}

.web-ecosystem-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.web-eco-tier {
    width: 100%;
}

/* Tier Headers */
.eco-tier-header {
    margin-bottom: 12px !important;
    text-align: center;
}

.eco-tier-header .web-eyebrow-wrap {
    justify-content: center;
    margin-bottom: 3px !important;
    gap: 6px;
}

.eco-tier-header .web-eyebrow-text {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.eco-tier-title {
    font-family: "Poppins", sans-serif;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #07182D;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
}

.eco-tier-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 12.5px !important;
    color: #5A6E85 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}


/* =========================================
   TIER 1: OUR PROCESS (5-Step Pipeline)
   ========================================= */

.eco-process-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.eco-process-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
    display: flex;
    flex-direction: column;
    min-height: 120px;
    justify-content: flex-start;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    cursor: default;
}

.eco-process-card:hover {
    border-color: #93C5FD;
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.12), 0 0 0 1px rgba(13, 110, 253, 0.15);
    transform: translateY(-6px);
}

.eco-proc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.eco-proc-badge {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 3.5px 11px;
    border-radius: 9px;
    line-height: 1;
    color: #FFFFFF !important;
    letter-spacing: 0.02em;
}

.eco-proc-badge.bg-blue {
    background: linear-gradient(135deg, #2563EB 0%, #0066FE 100%);
    box-shadow: 0 3px 10px rgba(0, 102, 254, 0.3);
}

.eco-proc-badge.bg-purple {
    background: linear-gradient(135deg, #9333EA 0%, #8B5CF6 100%);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

.eco-proc-badge.bg-green {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.eco-proc-badge.bg-orange {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3);
}

.eco-proc-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eco-process-card:hover .eco-proc-icon-wrap {
    transform: scale(1.18) rotate(-4deg);
}

.eco-proc-icon-wrap.icon-blue {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
}

.eco-proc-icon-wrap.icon-purple {
    background: #FAF5FF;
    border: 1px solid #F3E8FF;
}

.eco-proc-icon-wrap.icon-green {
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
}

.eco-proc-icon-wrap.icon-orange {
    background: #FFF7ED;
    border: 1px solid #FFEDD5;
}

.eco-proc-title {
    font-family: "Poppins", sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #0F172A;
    margin: 4px 0 3px 0;
    line-height: 1.25;
}

.eco-proc-desc {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #64748B;
    margin: 0;
}

.eco-proc-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #EFF6FF;
    border: 1.2px solid #DBEAFE;
    color: #0D6EFD;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.08);
    transition: all 0.25s ease;
}

.eco-proc-arrow:hover {
    transform: scale(1.15);
    background: #0D6EFD;
    color: #FFFFFF;
}


/* =========================================
   TIER 2: DEVELOPMENT CAPABILITIES (3-Column Hub)
   ========================================= */

.eco-hub-grid {
    display: grid;
    grid-template-columns: 345px 1fr 345px;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.eco-cap-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
}

.eco-cap-card {
    background: #FFFFFF;
    border: 1.2px solid #E2E8F0;
    border-radius: 15px;
    padding: 12px 16px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    min-height: 92px;
    justify-content: space-between;
}

.eco-cap-card:hover {
    border-color: #BED8F9;
    box-shadow: 0 7px 18px rgba(13, 110, 253, 0.08);
    transform: translateY(-2px);
}

.eco-cap-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 6px;
}

.eco-cap-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eco-cap-icon-box svg {
    width: 18px;
    height: 18px;
}

.eco-cap-icon-box.cap-icon-blue {
    background: #EBF3FE;
    color: #0D6EFD;
}

.eco-cap-icon-box.cap-icon-purple {
    background: #F3E8FF;
    color: #8B5CF6;
}

.eco-cap-icon-box.cap-icon-green {
    background: #DCFCE7;
    color: #10B981;
}

.eco-cap-icon-box.cap-icon-rose {
    background: #FEE2E2;
    color: #EF4444;
}

.eco-cap-icon-box.cap-icon-orange {
    background: #FFEDD5;
    color: #EA580C;
}

.eco-cap-title-wrap {
    flex: 1;
    min-width: 0;
}

.eco-cap-title {
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eco-cap-sub {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: #64748B;
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eco-cap-chevron {
    font-size: 18px;
    font-weight: 700;
    color: #94A3B8;
    margin-left: auto;
    line-height: 1;
}

.eco-cap-tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: visible;
    width: 100%;
}

.eco-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 3px 8.5px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.eco-tag-pill svg {
    width: 12px;
    height: 12px;
}

.tag-pill-badge {
    font-size: 9px;
    font-weight: 800;
    border-radius: 3.5px;
    padding: 1px 4px;
    line-height: 1;
    text-transform: uppercase;
}

.tag-pill-badge.bg-php {
    background: #777BB4;
    color: #FFFFFF;
}

.tag-pill-badge.bg-woo {
    background: #96588A;
    color: #FFFFFF;
}


/* =========================================
   CENTER DEVICE STAGE: Realistic MacBook + iPhone
   ========================================= */

.eco-device-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
    padding: 0;
}

/* MacBook Pro */
.eco-macbook-wrap {
    position: relative;
    width: 100%;
    max-width: 490px;
    z-index: 1;
    filter: drop-shadow(0 14px 30px rgba(15, 23, 42, 0.13));
}

.eco-macbook-screen {
    background: #FFFFFF;
    border: 7.5px solid #0F172A;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    aspect-ratio: 1024 / 438;
}

.eco-macbook-base {
    width: 112%;
    margin-left: -6%;
    height: 11px;
    background: linear-gradient(180deg, #94A3B8 0%, #64748B 50%, #475569 100%);
    border-radius: 0 0 9px 9px;
    position: relative;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.eco-mac-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 4px;
    background: #334155;
    border-radius: 0 0 3.5px 3.5px;
}

/* Standing iPhone Mockup (Overlaps Bottom Right) */
.eco-phone-wrap {
    position: absolute;
    right: -10px;
    bottom: -8px;
    width: 116px;
    z-index: 3;
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.22));
}

.eco-phone-body {
    background: #090E18;
    border: 2px solid #28364C;
    border-radius: 20px;
    padding: 2.5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
}

.eco-phone-notch {
    position: absolute;
    top: 4.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    background: #000000;
    border-radius: 6px;
    z-index: 4;
}

.eco-phone-screen {
    background: #FFFFFF;
    border-radius: 17px;
    overflow: hidden;
    aspect-ratio: 469 / 683;
    height: auto;
    display: flex;
    flex-direction: column;
}


/* =========================================
   TIER 3: TECHNOLOGIES WE USE (10 Tech Badges with macOS Dock Pop Effect)
   ========================================= */

.eco-tier-tech {
    margin-top: 0;
}

.eco-tier-tech .eco-tier-header {
    margin-bottom: 8px !important;
}

.eco-tech-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 0 16px 0;
}

.eco-tech-badge {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 11px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    user-select: none;
}

.eco-tech-badge:hover {
    border-color: #3B82F6;
    box-shadow: 0 16px 36px rgba(13, 110, 253, 0.22), 0 0 0 2px #3B82F6, 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-10px) scale(1.18);
    z-index: 10;
    background: #FFFFFF;
}

.eco-tech-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eco-tech-badge:hover .eco-tech-icon {
    transform: scale(1.16);
}

.tech-php-oval {
    background: #777BB4;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.eco-tech-name {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    transition: color 0.2s ease;
}

.eco-tech-badge:hover .eco-tech-name {
    color: #0D6EFD;
}


/* =========================================
   SECTION 04: CALL TO ACTION (CTA) BANNER (100% FULL-WIDTH SEAMLESS)
   ========================================= */

.web-cta-section {
    position: relative;
    width: 100%;
    background: 
        radial-gradient(circle at 88% 40%, rgba(2, 132, 199, 0.42) 0%, transparent 58%),
        radial-gradient(circle at 75% 18%, rgba(56, 189, 248, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 12% 85%, rgba(0, 60, 180, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #021B4E 0%, #002C78 35%, #0045B5 68%, #011E5E 100%);
    overflow: hidden;
    padding: 75px 0 80px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ambient Glowing Silk Waves & Ribbons with Continuous Floating Animation (Full Width) */
.web-cta-bg-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.web-cta-bg-waves svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ctaWaveFloat1 {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.88;
    }
    50% {
        transform: translateY(-8px) scale(1.02);
        opacity: 1;
    }
}

@keyframes ctaWaveFloat2 {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(10px) scale(0.98);
        opacity: 0.95;
    }
}

@keyframes ctaWaveFloat3 {
    0%, 100% {
        transform: translateX(0) translateY(0);
        opacity: 0.65;
    }
    50% {
        transform: translateX(-8px) translateY(6px);
        opacity: 0.85;
    }
}

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

.cta-wave-1 {
    animation: ctaWaveFloat1 9s ease-in-out infinite;
    transform-origin: center center;
}

.cta-wave-2 {
    animation: ctaWaveFloat2 12s ease-in-out infinite;
    transform-origin: center center;
}

.cta-wave-3 {
    animation: ctaWaveFloat3 10.5s ease-in-out infinite;
    transform-origin: center center;
}

.cta-ambient-glow {
    animation: ctaGlowBreathe 7s ease-in-out infinite;
    transform-origin: 82% 40%;
}

.web-cta-container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.web-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cta-eyebrow-line {
    width: 22px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.cta-eyebrow-text {
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.cta-main-title {
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.18;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.cta-highlight-cyan {
    color: #38BDF8;
}

.cta-main-desc {
    font-family: "Inter", sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 490px;
    margin: 0 0 28px 0;
}

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

.cta-btn-primary {
    background: linear-gradient(180deg, #0075FF 0%, #0056D6 100%);
    border: 1.2px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 117, 255, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.cta-btn-primary:hover {
    background: linear-gradient(180deg, #1A84FF 0%, #0060EA 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 117, 255, 0.6);
    color: #FFFFFF;
}

.cta-btn-video {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.2px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.cta-btn-video:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.cta-play-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0066FE;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.cta-play-badge svg {
    margin-left: 2px;
}


/* Right Visual Stage — Compact & 3D Angled Perspective */
.web-cta-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cta-device-stage {
    position: relative;
    width: 100%;
    max-width: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1100px;
    perspective-origin: 50% 50%;
}

/* 3D Angled MacBook Pro */
.cta-macbook-wrap {
    position: relative;
    width: 100%;
    max-width: 530px;
    transform: rotateY(-8deg) rotateX(5deg) rotateZ(0.5deg);
    transform-style: preserve-3d;
    filter: drop-shadow(-10px 22px 36px rgba(0, 10, 45, 0.5));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.cta-macbook-wrap:hover {
    transform: rotateY(-3deg) rotateX(2deg) rotateZ(0deg) translateY(-4px);
    filter: drop-shadow(-12px 26px 42px rgba(0, 10, 45, 0.6));
}

.cta-macbook-screen {
    background: #FFFFFF;
    border: 7.5px solid #0F172A;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    aspect-ratio: 16 / 10;
}

.cta-macbook-base {
    width: 112%;
    margin-left: -6%;
    height: 11px;
    background: linear-gradient(180deg, #94A3B8 0%, #64748B 50%, #475569 100%);
    border-radius: 0 0 10px 10px;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 12, 50, 0.4);
}

.cta-mac-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 4.5px;
    background: #334155;
    border-radius: 0 0 4px 4px;
}

/* Standing iPhone Mockup (Realistic Proportions: Slim & Tall, Prominent) */
.cta-phone-wrap {
    position: absolute;
    right: -15px;
    bottom: -15px;
    width: 140px;
    height: 285px;
    z-index: 5;
    transform: rotateY(-4deg) rotateX(3deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 18px 32px rgba(0, 5, 25, 0.65));
    transition: transform 0.35s ease;
}

.cta-phone-wrap:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
}

.cta-phone-body {
    background: #09111E;
    border-radius: 24px;
    padding: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.cta-phone-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 5px;
    background: #000000;
    border-radius: 6px;
    z-index: 4;
}

.cta-phone-screen {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}


/* =========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================= */

@media (max-width: 1200px) {
    .web-hero-container {
        grid-template-columns: 44% 56%;
        gap: 15px;
        padding: 0 25px;
    }

    .web-hero-title {
        font-size: 42px;
    }

    .web-visual-stage {
        transform: scale(0.88);
    }

    .eco-hub-grid {
        grid-template-columns: 280px 1fr 280px;
        gap: 18px;
    }

    .eco-macbook-wrap {
        max-width: 390px;
    }

    .eco-phone-wrap {
        width: 105px;
        right: -6px;
    }
}

@media (max-width: 1024px) {
    .web-hero {
        min-height: auto;
        padding: 50px 20px 40px 20px;
    }

    .web-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 700px;
    }

    .web-hero-content {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .web-hero-desc {
        max-width: 600px;
    }

    .web-hero-cta-wrap {
        justify-content: center;
    }

    .web-hero-benefits {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .web-benefit-item {
        align-items: center;
        text-align: center;
    }

    .web-visual-stage {
        transform: scale(0.92);
        margin: 0 auto;
    }

    /* Master Showcase Responsive (Tablet / Desktop < 1100px) */
    .web-showcase-master-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px;
    }

    .web-tabs-sidebar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .web-tab-item {
        padding: 10px 14px;
        font-size: 13px;
        justify-content: center;
    }

    .web-detail-card-col {
        padding-left: 0;
        text-align: center;
        align-items: center;
    }

    .web-detail-card-inner {
        align-items: center;
    }

    .web-nav-controls {
        justify-content: center;
    }

    /* Section 03 Ecosystem Responsive (Tablet) */
    .web-ecosystem-section {
        padding: 30px 16px;
    }

    .eco-process-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .eco-proc-arrow {
        display: none;
    }

    .eco-hub-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .eco-cap-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .eco-device-stage {
        order: -1;
        max-width: 380px;
        margin: 0 auto;
    }

    /* Section 04 CTA Responsive (Tablet) */
    .web-cta-section {
        padding: 60px 0 65px;
    }

    .web-cta-container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 24px;
        text-align: center;
    }

    .web-cta-content {
        align-items: center;
    }

    .cta-eyebrow-wrap {
        justify-content: center;
    }

    .cta-main-title {
        font-size: 34px;
    }

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

    .cta-device-stage {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .web-hero {
        padding: 35px 16px 30px;
    }

    .web-hero-title {
        font-size: 32px;
    }

    .web-hero-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .web-benefit-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 10px 12px;
    }

    .web-visual-stage {
        transform: scale(0.8);
        margin: -25px auto -20px auto;
        min-height: 400px;
    }

    .web-section-header h2 {
        font-size: 28px;
    }

    .web-showcase-section,
    .web-ecosystem-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .web-tabs-sidebar {
        grid-template-columns: repeat(2, 1fr);
    }

    .mock-hero-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mock-image-frame {
        height: 180px;
    }

    /* Section 03 Ecosystem (Mobile / Small Tablet) */
    .eco-process-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .eco-cap-col {
        grid-template-columns: 1fr;
    }

    .eco-tech-strip {
        gap: 6px;
    }

    .eco-tech-badge {
        padding: 6px 10px;
        min-width: 60px;
    }

    .eco-phone-wrap {
        width: 90px;
        right: -6px;
        bottom: -8px;
    }

    .eco-phone-screen {
        height: auto;
        aspect-ratio: 9 / 19.44;
    }

    /* Section 04 CTA Responsive (Mobile) */
    .web-cta-section {
        padding: 48px 0 56px;
    }

    .web-cta-container {
        padding: 0 18px;
        gap: 30px;
    }

    .cta-main-title {
        font-size: 30px;
    }

    .cta-device-stage {
        max-width: 400px;
        margin: 0 auto;
    }

    .cta-phone-wrap {
        width: 95px;
        height: auto;
        right: -10px;
        bottom: -10px;
    }
}

@media (max-width: 680px) {
    .web-tabs-sidebar {
        grid-template-columns: 1fr;
    }
    .web-showcase-bottom-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 520px) {
    .web-hero-title {
        font-size: 27px;
    }

    .web-hero-cta-wrap {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .web-btn-primary {
        width: 100%;
    }

    .web-visual-stage {
        transform: scale(0.62);
        margin: -60px auto -55px auto;
    }

    .web-floating-card.card-growth-stat {
        right: -10px;
        bottom: 5px;
    }

    .web-tabs-sidebar {
        grid-template-columns: 1fr;
    }

    .mock-site-links {
        display: none;
    }

    .web-showcase-bottom-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .web-bottom-card-item {
        padding: 9px 12px;
        min-height: auto;
    }

    .mock-inner-mini-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .mock-inner-card {
        flex-direction: column;
        text-align: center;
        padding: 6px 4px;
        gap: 4px;
    }

    .mock-inner-thumb-img {
        width: 100%;
        height: 38px;
    }

    .mock-inner-txt {
        font-size: 9px;
        white-space: normal;
        line-height: 1.1;
    }

    .web-detail-title {
        font-size: 25px;
    }

    /* Section 03 Ecosystem (Small Mobile) */
    .eco-process-row {
        grid-template-columns: 1fr;
    }

    .eco-phone-wrap {
        width: 70px;
        right: -4px;
        bottom: -6px;
    }

    .eco-phone-screen {
        height: auto;
        aspect-ratio: 9 / 19.44;
    }

    .eco-macbook-base {
        width: 108%;
        margin-left: -4%;
    }

    /* Section 04 CTA Responsive (Small Mobile) */
    .web-cta-section {
        padding: 38px 0 45px;
    }

    .web-cta-container {
        padding: 0 14px;
        gap: 26px;
    }

    .cta-main-title {
        font-size: 26px;
    }

    .cta-main-desc {
        font-size: 13.5px;
    }

    .cta-btns-row {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cta-btn-primary,
    .cta-btn-video {
        width: 100%;
        justify-content: center;
    }

    .cta-device-stage {
        max-width: 320px;
        margin: 0 auto;
    }

    .cta-phone-wrap {
        width: 75px;
        height: 155px;
        right: -8px;
        bottom: -8px;
    }

    .cta-macbook-base {
        width: 108%;
        margin-left: -4%;
    }
}