:root {
            /* Brand Color Harmony */
            --primary-blue: #146db3;
            /* 40-50% Core */
            --blue-deep: #0e4e82;
            --blue-mid: #258cdb;
            --blue-soft: #edf5fc;
            /* 30% Supporting blue shades */
            --blue-subtle: #f4f8fd;
            --blue-border: #c8e0f4;
            --accent-pink: #f02769;
            /* 20-30% Accent */
            --accent-soft: rgba(240, 39, 105, 0.08);

            --text-main: #062a52;
            --text-muted: #53718d;
            --white: #ffffff;

            --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        
        /* Fonts css */
        /* Thin (100) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Thin_PERSONAL.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Light_PERSONAL.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Regular_PERSONAL.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Medium_PERSONAL.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Bold_PERSONAL.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_ExtraBold_PERSONAL.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'MADE Tommy';
  src: url('../fonts/MADE_TOMMY_Black_PERSONAL.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------
   OUTLINE VARIANTS (Separate Font Family)
   ---------------------------------------------------- */
@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_Thin_Outline_PERSONAL.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_Light Outline_PERSONAL.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_Regular_Outline_PERSO....otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_Medium_Outline_PERSO....otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_Bold_Outline_PERSONAL.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE_TOMMY_ExtraBold_Outline_PERS....otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Tommy Outline';
  src: url('../fonts/MADE-TOMMY-Black-Outline_PERSONAL.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------
   GLOBAL RULES & H1 SETUP
   ---------------------------------------------------- */
body {
  font-family: 'MADE Tommy', sans-serif;
  font-weight: 400; /* Default site weight */
}

/* Force all h1 elements to use Medium (500) weight */
h1 {
  font-family: 'MADE Tommy', sans-serif;
  font-weight: 600;
}

h2, h3 {
  font-family: 'MADE Tommy', sans-serif;
  font-weight: 500;
}
p {
  font-family: 'MADE Tommy', sans-serif;
  font-weight: 400;
  line-height: 1.4;
}
        
          /* Fonts css end */
          
          .dark .ecg-header h2 {
	color: #ffffff;
}
   
   .dark .tagline{
   color:#ffffff;
   }       
          
        
/* Fix for Locomotive Scroll smooth container */
html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.has-scroll-smooth body {
    overflow: hidden;
}

[data-scroll-container] {
    min-height: 100vh;
}
        .process-section {
            width: 100%;
            max-width: 1240px;
            position: relative;
        }

        /* Subtle Technical Grid Lines for Pure White Backing */
        .section-watermark {
            position: absolute;
            top: -30px;
            right: 0;
            font-size: 8rem;
            font-weight: 800;
            color: rgba(20, 109, 179, 0.03);
            letter-spacing: -0.04em;
            user-select: none;
            pointer-events: none;
            z-index: 0;
        }
        
        .section-gapping{
        padding: 150px 0px 70px;
        }
        
  /* ==========================================================================
   WELLYSIS-INSPIRED LIGHT HERO BANNER
   ========================================================================== */
.hero-banner-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    background: #f8fafc; /* Crisp off-white medical studio background */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 80px;
    color: #0f172a;
}

/* Background Glowing Aura & Subtly Grid */
.hero-banner-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 75% 40%, rgba(20, 109, 179, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(240, 39, 105, 0.05) 0%, transparent 40%),
        linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    pointer-events: none;
}

/* ECG Line Overlay */
.ecg-bg-layer {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1; /* Sits behind the 3D model (z-index: 2) */
    opacity: 0.65;
    /* Softly fades out the line at both ends for a telemetry screen effect */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.ecg-wave-bg {
    width: 200%;
    height: 140px;
    stroke: #146db3;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(20, 109, 179, 0.35));
    animation: panWave 12s linear infinite;
}

@keyframes panWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Layout Container */
.hero-content-wrapper {
    position: relative;
    max-width: 1280px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    z-index: 2;
}

/* Left Content - Typography & CTA */
.hero-text-content {
    max-width: 580px;
}

.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #ffffff;
    color: #146db3;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #f02769;
}

.hero-text-content h1 {
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
    line-height: 1.05;
    margin: 24px 0 20px;
    color: #0b132a;
}

.hero-text-content h1 .accent-blue {
	display: block;
	background: linear-gradient( 90deg, #f42569 0%, #d92d8a 7%, #167bd0 49% );
	background-clip: border-box;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* .hero-text-content h1 .accent-pink {
    color: #f02769;
} */

.hero-text-content p {
    font-size: 1.15rem;
    color: #475569;
    margin-bottom: 40px;

}

/* Button Group */
.hero-btn-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-primary-wellysis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 50px;
    background: #f02769;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(240, 39, 105, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-wellysis:hover {
    background: #d81b56;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(240, 39, 105, 0.35);
}

.btn-secondary-wellysis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 50px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary-wellysis:hover {
    border-color: #146db3;
    color: #146db3;
    transform: translateY(-2px);
}

/* Right Content - 3D Visual Stage & Floating Telemetry Badges */
.hero-visual-stage {
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}
/* Radiant Backlight for 3D Device */
.stage-ambient-glow {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(20, 109, 179, 0.10) 0%,
        rgba(240, 39, 105, 0.035) 42%,
        transparent 72%
    );

    filter: blur(55px);

    pointer-events: none;
}
/* Clean Model Container (No Card Border) */
.hero-model-container {
    position: relative;
    width: 100%;
    height: 520px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

#fibriartModel {
    width: 100%;
    height: 100%;

    display: block;

    background: transparent;

    --poster-color: transparent;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .hero-banner-section {
        padding: 80px 20px 60px;
    }
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-text-content {
        max-width: 100%;
    }
    .hero-btn-group {
        justify-content: center;
    }
    .hero-model-container {
        height: 380px;
    }
    .badge-floating {
        display: none; /* Hide floating badges on smaller screens to prevent overflow */
    }
}







        /* Header */
        .header-area {
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }

        .process-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue-soft);
            border: 1px solid var(--blue-border);
            padding: 6px 16px;
            border-radius: 99px;
            font-size: 0.82rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--primary-blue);
            margin-bottom: 16px;
        }

        .live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-pink);
            box-shadow: 0 0 8px var(--accent-pink);
            animation: beat 1.5s infinite ease-in-out;
        }

        .header-area h2 {
            font-size: clamp(2rem, 3.4vw, 2.75rem);
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.025em;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .header-area p {
            font-size: 1.1rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Horizontal Expandable Cards Deck */
        .accordion-deck {
            display: flex;
            gap: 20px;
            height: 460px;
            position: relative;
            z-index: 1;
        }

        .process-card {
            position: relative;
            flex: 1;
            background: var(--blue-subtle);
            border: 1.5px solid var(--blue-border);
            border-radius: 28px;
            padding: 34px 26px;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: flex 0.65s var(--ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .process-card:hover:not(.active) {
            background: var(--blue-soft);
            border-color: var(--blue-mid);
            transform: translateY(-4px);
        }

        /* Active State (Expanded) */
        .process-card.active {
            flex: 3.2;
            background: var(--white);
            border-color: var(--primary-blue);
            box-shadow: 0 24px 50px -10px rgba(20, 109, 179, 0.14), 0 10px 25px -5px rgba(240, 39, 105, 0.06);
            cursor: default;
        }

        /* Top Row in Card */
        .card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .step-number {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-muted);
            transition: color 0.3s ease;
        }

        .process-card.active .step-number {
            color: var(--accent-pink);
        }

        .icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: var(--white);
            border: 1.5px solid var(--blue-border);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s var(--ease);
        }

        .icon-wrapper svg {
            width: 24px;
            height: 24px;
            stroke: var(--primary-blue);
            fill: none;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.3s ease;
        }

        .process-card.active .icon-wrapper {
            background: var(--accent-pink);
            border-color: var(--accent-pink);
            box-shadow: 0 8px 18px rgba(240, 39, 105, 0.25);
        }

        .process-card.active .icon-wrapper svg {
            stroke: var(--white);
        }

        /* Collapsed Vertical Title */
        .collapsed-title {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%) rotate(-90deg);
            transform-origin: center center;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--primary-blue);
            white-space: nowrap;
            letter-spacing: 0.02em;
            transition: opacity 0.3s ease;
        }

        .process-card.active .collapsed-title {
            opacity: 0;
            pointer-events: none;
        }

        /* Expanded Content Block */
        .card-body {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.35s ease 0.18s, transform 0.35s ease 0.18s;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .process-card.active .card-body {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .stage-subtitle {
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--primary-blue);
            margin-bottom: 6px;
        }

        .card-body h3 {
            font-size: clamp(1.75rem, 2.2vw, 2.25rem);
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.25;
            margin-bottom: 12px;
        }

        .card-body p {
            font-size: 1.05rem;
            color: var(--text-muted);
            line-height: 1.6;
            max-width: 480px;
            margin-bottom: 24px;
        }

        /* Feature Highlight Badge */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent-soft);
            border: 1px solid rgba(240, 39, 105, 0.2);
            padding: 8px 18px;
            border-radius: 12px;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--accent-pink);
            width: fit-content;
        }

        .status-badge svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2.5;
            fill: none;
        }

        /* Top Accent Border on Active */
        .active-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: transparent;
            transition: background 0.3s ease;
        }

        .process-card.active .active-indicator {
            background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-pink) 100%);
        }

        @keyframes beat {

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

            50% {
                transform: scale(1.35);
                opacity: 0.7;
            }
        }

        /* Responsive Adaptation */
        @media (max-width: 900px) {
            .accordion-deck {
                flex-direction: column;
                height: auto;
            }

            .process-card {
                flex: none;
                height: 100px;
                padding: 24px 20px;
            }

            .process-card.active {
                flex: none;
                height: auto;
                padding: 32px 24px;
            }

            .collapsed-title {
                transform: none;
                position: static;
                margin-left: 20px;
            }

            .card-head {
                justify-content: flex-start;
                gap: 16px;
            }
            .ecg-pipeline {
        flex-direction: column;
        gap: 30px;
    }
    
    .pipeline-arrow {
        transform: rotate(90deg);
    }
    
    .reveal-arrow {
        transform: translateY(-10px) rotate(90deg);
    }
    
    .reveal-arrow.is-visible {
        transform: translateY(0) rotate(90deg);
    }
        }
        
        
        
        
        
        
        /* ==========================================================================
   PROCESS WORKFLOW PIPELINE
   ========================================================================== */
   .ecg-flow-section {
            position: relative;
            background: var(--bg-white);
            padding: 110px 24px 130px;
            overflow: hidden;
        }

      .ecg-flow-container {
    max-width: 1280px;
    margin: 0 auto;
}

        /* Header */
    .ecg-header {
    text-align: center;
    margin-bottom: 80px;
}

        .ecg-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 999px;
            border:1px solid #ffffff;
            box-shadow: 0 2px 10px rgba(22, 119, 199, 0.08);
            margin-bottom: 20px;
        }

        .pill-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--ecg-pink);
        }

        .pill-text {
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            color: var(--ecg-blue);
            text-transform: uppercase;
        }

.ecg-header h2 {
	font-size: 2.8rem;
	margin: 0 0 px;
	line-height: 1.10;
	color: #062a52;
	padding-bottom: 10px;
	letter-spacing: -1.8px;
}

        .text-blue {
            color: var(--ecg-blue);
        }

        .text-pink {
            color: var(--ecg-pink);
        }

        .tagline {
	font-size: 1.15rem;
	margin: 0;
	font-weight: 400;
	color: #0b2239;
}

        /* Pipeline Layout */
   .ecg-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

.reveal-card {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed State */
.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-arrow.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-arrow {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s ease, 
                transform 0.4s ease;
}

        .step-card {
            flex: 1;
            max-width: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        /* Device Stage & Glow */
        .device-stage {
            position: relative;
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

        .glow-backdrop {
            position: absolute;
            width: 190px;
            height: 190px;
            border-radius: 50%;
            filter: blur(45px);
            z-index: 1;
            pointer-events: none;
        }

        .glow-pink {
            background: rgba(240, 37, 104, 0.16);
        }

        .glow-blue {
            background: rgba(22, 119, 199, 0.16);
        }

        /* Model Viewer & Image Handling */
.device-asset {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 200px; /* Explicit height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.glb-viewer {
  width: 100%;
  height: 200px;
  display: block;
  outline: none;
}

.asset-img {
	width: auto;
	max-width: 100%;
	height: 160px;
	object-fit: contain;
	display: block;
	/* filter: drop-shadow(0 15px 25px rgba(12, 28, 56, 0.12)); */
}

        .step-card:hover .asset-img {
            transform: translateY(-8px) scale(1.04);
        }

        /* Number Badges */
  .step-badge {
	position: absolute;
	top: 15px;
	left: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	z-index: 3;
}

        .badge-pink {
            background: #f02769;
            box-shadow: 0 8px 20px rgba(240, 37, 104, 0.35);
        }

        .badge-blue {
            background: #146db3;
            box-shadow: 0 8px 20px rgba(22, 119, 199, 0.35);
        }

        /* Step Typography */
      .step-details h3 {
	font-size: 1.6rem;
	font-weight: 500;
	margin: 0 0 6px;
}

        .label-pink {
            color: #f02769;
        }

        .label-blue {
            color: #146db3;
        }

   .step-details h4 {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--text-main);
	margin: 0 0 4px;
}

        .step-details p {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.4;
        }

        /* Dashed Arrows */
        .pipeline-arrow {
            position: relative;
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -85px;
        }

        .pipeline-arrow::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            border-top: 2px dashed #146db3;
            z-index: 1;
        }

        .arrow-circle {
            position: relative;
            z-index: 2;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #ffffff;
            border: 1.5px solid #146db3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #146db3;
            box-shadow: 0 2px 8px rgba(22, 119, 199, 0.08);
        }

        .arrow-circle svg {
            width: 16px;
            height: 16px;
        }

        /* Subtle Idle Floating */
        .float-anim {
            animation: gentleFloat 5s ease-in-out infinite alternate;
        }

        .float-delay-1 {
            animation-delay: 1.2s;
        }

        .float-delay-2 {
            animation-delay: 2.4s;
        }

        .float-delay-3 {
            animation-delay: 3.6s;
        }
        
        /* Scroll Track: Controls how much scroll distance you have to align all cards */
.ecg-flow-pinned-wrapper {
    position: relative;
    width: 100%;
}

/* Pinned Viewport: Freezes on screen */
.ecg-flow-sticky-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-white, #ffffff);
    z-index: 5;
}

.section-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Pipeline Track */
.ecg-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding-top: 50px;
}

/* ========================================================
   STAGGERED STAIRCASE POSITIONS (Matching your screenshot)
   ======================================================== */
.step-card {
    flex: 1;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    will-change: transform;
    /* Smooth CSS transition if updated via classes, or scrubbed via JS */
    transition: transform 0.1s linear;
}

/* Default initial staircase offset before scrolling */
.step-card[data-step="1"] {
    transform: translateY(0px); /* Top level */
}
.step-card[data-step="2"] {
    transform: translateY(140px); /* One step down */
}
.step-card[data-step="3"] {
    transform: translateY(280px); /* Two steps down */
}
.step-card[data-step="4"] {
    transform: translateY(420px); /* Bottom-most */
}

/* Dashed Arrows align with cards */
.pipeline-arrow {
    position: relative;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    will-change: transform;
    transition: transform 0.1s linear;
}

.pipeline-arrow[data-arrow="1"] { transform: translateY(70px); }
.pipeline-arrow[data-arrow="2"] { transform: translateY(210px); }
.pipeline-arrow[data-arrow="3"] { transform: translateY(350px); }
        

        @keyframes gentleFloat {
            0% {
                transform: translateY(0px);
            }

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

            100% {
                transform: translateY(5px);
            }
        }

        /* ==========================================
   SCROLL ENTRANCE REVEAL ANIMATIONS
   ========================================== */
        .reveal-item {
            opacity: 0;
            transform: translateY(40px) scale(0.96);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-item.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Responsive */
        @media (max-width: 1100px) {
            .ecg-pipeline {
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px;
            }

            .pipeline-arrow {
                display: none;
            }

            .step-card {
                max-width: 45%;
            }
        }

        @media (max-width: 640px) {
            .ecg-header h2 {
                font-size: 2.2rem;
            }

            .step-card {
                max-width: 100%;
            }
        }
/* Container holds natural flow */
.device-zigzag-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 100px 0 0 0;
}

.device-header-block {
    margin-bottom: 60px;
}

.section-eyebrow {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #146db3;
    margin-bottom: 12px;
}

.section-main-heading {
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    color: #0b2239;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

/* 2-Column Row Layout */
.device-row-card {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 70px;
	align-items: center;
	padding: 80px 0 80px;
}

.device-row-card.reverse-row {
    grid-template-columns: 0.85fr 1.15fr;
}

.device-row-card.reverse-row .device-text-col { order: 2; }
.device-row-card.reverse-row .device-visual-col { order: 1; }

.fibriart-row-divider {
    width: 100%;
    height: 1px;
    background: #edf2f7;
    margin: 10px 0;
}


/* Pills */
.fibriart-pill-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 18px;
	border-radius: 100px;
	border: 1.5px solid #146db3;
	width: fit-content;
	margin-bottom: 10px;
}

.fibriart-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f02769;
}

.fibriart-badge-text {
	font-size: 0.8rem;
	font-weight: 500;
	/* letter-spacing: 0.12em; */
	color: #146db3;
	text-transform: uppercase;
}


/* Titles and Copy */
.device-card-title {
	font-size: 33px;
	color: #0b2239;
	line-height: 1.15;
	margin-bottom: 10px;
}

.device-card-desc {
    font-size: 1.12rem;
    color: #64748b;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 34px;
}

/* Buttons */
.device-btn-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-solid-pink {
    background: #f02769;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 10px 22px -3px rgba(240, 39, 105, 0.42);
    transition: transform 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-solid-pink:hover {
    background: #d81b58;
    transform: translateY(-2px);
}

.btn-outline-blue {
    background: #ffffff;
    color: #146db3;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 13px 34px;
    border-radius: 100px;
    text-decoration: none;
    border: 1.5px solid rgba(20, 109, 179, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.btn-outline-blue:hover {
    border-color: #146db3;
    transform: translateY(-2px);
}

/* Visuals */
.device-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fibriart-patch-halo {
    position: relative;
    padding: 34px 50px;
    border-radius: 130px;
    border: 1.5px dashed #4da1e2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fibriart-halo-glow {
    position: absolute;
    inset: -10px;
    border-radius: 140px;
    background: radial-gradient(circle, rgba(20, 109, 179, 0.12) 0%, rgba(20, 109, 179, 0.01) 75%, transparent 100%);
    pointer-events: none;
}

.fibriart-capsule {
    position: relative;
    width: 280px;
    height: 96px;
    border-radius: 100px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 
        0 20px 45px -10px rgba(20, 109, 179, 0.25),
        inset 0 -3px 6px rgba(10, 37, 64, 0.04),
        inset 0 4px 6px rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.fibriart-led {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f02769;
    box-shadow: 0 0 8px #f02769, 0 0 14px rgba(240, 39, 105, 0.6);
}

.fibriart-brand-lockup {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fibriart-ecg-svg {
    width: 24px;
    height: 24px;
}

.fibriart-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #146db3;
    letter-spacing: -0.02em;
}

.device-asset-frame {
    width: 100%;
    max-width: 380px;
    display: flex;
    justify-content: center;
}

.asset-fluid-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(20, 109, 179, 0.15));
}

.device-web-dashboard-preview {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.web-bar {
    height: 32px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 14px;
}

.dot-red { width: 8px; height: 8px; border-radius: 50%; background: #fc8181; }
.dot-yellow { width: 8px; height: 8px; border-radius: 50%; background: #f6e05e; }
.dot-green { width: 8px; height: 8px; border-radius: 50%; background: #68d391; }

.web-preview-body {
    padding: 24px 18px;
    text-align: center;
}

.preview-ecg-wave {
    width: 100%;
    height: 60px;
}

.web-preview-meta {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 700;
    margin-top: 10px;
}

.report-sheet-preview {
    position: relative;
    width: 240px;
    height: 300px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.report-header-line {
    width: 60px;
    height: 6px;
    background: #146db3;
    border-radius: 4px;
}

.report-wave-line {
    width: 100%;
    height: 50px;
}

.report-stamp-certified {
    align-self: flex-end;
    font-size: 0.7rem;
    font-weight: 800;
    color: #f02769;
    border: 1.5px solid #f02769;
    padding: 4px 10px;
    border-radius: 6px;
    transform: rotate(-10deg);
}

/* =========================================================
   OVERLAPPING TRUST CURTAIN
   ========================================================= */
/* 200vh height gives a complete viewport runway for the curtain slide */
.report-overlap-runway {
    position: relative;
    width: 100%;
    min-height: 180vh;
    display: block;
    background: #ffffff;
}
/* Base Report Card stays locked in 100vh frame while scrolling runway */
.report-overlap-runway {
    position: relative;
    width: 100%;
    min-height: 180vh;
    display: block;
    background: #ffffff;
}

.report-sticky-layer {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 1;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Trust Curtain Layer: Deep Dark Navy Background from Events */
.trust-curtain-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: 80vh;
    /* Starts with radial glow and blends smoothly into solid #060e1d at the bottom */
    background: radial-gradient(circle at 50% 20%, #0d213f 0%, #060e1d 80%);
    background-color: #060e1d;
    color: #ffffff;
    border-radius: 48px 48px 0 0;
    box-shadow: 0 -30px 80px rgba(6, 14, 29, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 6% 80px;
    box-sizing: border-box;
    z-index: 10;
    will-change: transform;
    transform: translate3d(0, 100%, 0);
    border-bottom: none !important; /* Eliminates divider lines */
}
.trust-curtain-overlap {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #093457 0%, #146db3 100%);
    color: #ffffff;
    border-radius: 44px 44px 0 0;
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 6%;
    box-sizing: border-box;
    margin-top: 0; /* Reset negative margin so Report card is fully visible first */
    z-index: 30;
    will-change: transform;
    transform: translate3d(0, 100%, 0); /* Starts hidden below viewport until triggered */
}


.trust-main-heading {
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 14px;
}

.trust-subtext {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 640px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.trust-badges-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.cert-logo img {
	width: 100%;
	height: 80px;
	display: flex;
	align-content: center;
	object-fit: contain;
}

.trust-cert-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 26px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.trust-cert-box:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #f02769;
    transform: translateY(-5px);
}


@media (max-width: 992px) {
    .device-row-card, 
    .device-row-card.reverse-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .device-row-card.reverse-row .device-text-col { order: 1; }
    .device-row-card.reverse-row .device-visual-col { order: 2; }
    .trust-badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   EDGE-TO-EDGE INFINITE LOOP CAROUSEL (NO CONTAINER)
   ========================================================= */
.events-loop-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 80px 0 130px;
    background: #060e1d; /* Matches the bottom of the trust section seamlessly */
    color: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: -1px; /* Closes subpixel rendering gaps */
    border-top: none !important;
}

.events-loop-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 350px;
    background: radial-gradient(ellipse at 50% 0%, rgba(13, 33, 63, 0.45) 0%, transparent 70%);
    pointer-events: none;
}

/* Header with padding matching your global content margin */
.events-loop-header {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.header-split-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.events-loop-title {
	font-size: clamp(2.4rem, 4.8vw, 3.8rem);
	/* font-weight: 800; */
	color: #ffffff !important;
	/* letter-spacing: -0.025em; */
	line-height: 1.15;
	margin: 14px 0 10px;
	font-size: 2.8rem;
}
.events-loop-title span {
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 60%, #ff85a2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.events-loop-header .fibriart-pill-badge {
    border: 1px solid #ffffff !important;
}

.events-loop-header .fibriart-badge-text {
    color: #ffffff !important;
}

.events-loop-header .fibriart-badge-dot {
    background: #ff2a5f !important;
}
.events-loop-sub {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0;
}

/* Navigation Dock */
.events-loop-nav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
}
.loop-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.loop-nav-btn:hover {
    background: #f02769;
    border-color: #f02769;
    color: #ffffff;
    transform: scale(1.08);
}
.loop-counter {
    font-size: 0.9rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.05em;
    padding: 0 8px;
    font-family: monospace;
}

/* 100% Full Viewport Stage */
.events-full-viewport {
  position: relative;
  width: 100vw;
  overflow: hidden;
  padding: 30px 0 40px;
  cursor: grab;
}

.events-full-viewport:active {
  cursor: grabbing;
}

.events-loop-track {
  display: flex;
  gap: 32px;
  will-change: transform;
  width: max-content;
  user-select: none;
}

/* Individual Cards */
.loop-event-card {
    width: 440px;
    flex: 0 0 440px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                border-color 0.4s ease,
                opacity 0.4s ease;
    opacity: 0.6;
    transform: scale(0.96);
}

.loop-event-card.active-focus {
	opacity: 1;
	transform: scale(1.02);
	border-color: rgb(245, 245, 246);

	box-shadow: 0 24px 60px rgba(245, 245, 246, 0), 0 0 24px rgba(245, 245, 246, 0.33);

}

.card-media-box {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #e2e8f0;
}

.card-media-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: transform 0.6s ease;
	object-position: top;
}
.loop-event-card:hover .card-media-box img {
  transform: scale(1.05);
}

.card-tag-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: rgba(11, 34, 57, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
}

.card-tag-pill.active-tag {
  background: #f02769;
}

.card-year {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: #0b2239;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 8px;
  font-family: monospace;
}

.card-body-box {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f02769;
  margin-bottom: 10px;
}

.card-heading {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.3;
    margin-bottom: 8px;
}

.card-venue {
    font-size: 0.9rem;
    color: #94a3b8 !important;
    margin-bottom: 12px;
}

.card-venue strong {
    color: #ffffff !important;
}

.card-text {
    font-size: 0.95rem;
    color: #94a3b8 !important;
    line-height: 1.6;
    margin-bottom: 24px;
}

.card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #38bdf8 !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.card-link:hover {
    color: #ff6594 !important;
    gap: 12px;
}

@media (max-width: 768px) {
  .loop-event-card {
    width: 320px;
    flex: 0 0 320px;
  }
  .card-media-box {
    height: 200px;
  }
}
/* =========================================================
   FIBRIART ABOUT SECTION
   ========================================================= */

.about-fibriart {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 110px 0 70px;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.about-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    position: relative;
    z-index: 5;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.about-content {
    position: relative;
    z-index: 10;
    padding-right: 35px;
}




.about-content h2 {
	margin: 30px 0 8px;
	font-size: clamp(42px, 4.2vw, 68px);
	line-height: 1.08;
	letter-spacing: -1px;
	color: #062a52;
	font-size: 2.8rem;
}


.about-content h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #f42569 0%,
        #d92d8a 45%,
        #167bd0 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.about-content h3 {
	margin: 7px 0 15px;
	color: #092f55;
	font-size: 21px;
}

.about-content p {
    max-width: 610px;

    margin: 0 0 34px;

    color: #52708f;

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   BUTTON
   ========================================================= */

.about-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    min-width: 205px;

    padding: 16px 25px;

    border-radius: 50px;

    background: linear-gradient(
        90deg,
        #f32167,
        #f62d70
    );

    color: #ffffff;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
        0 15px 30px rgba(242, 32, 103, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.about-btn span {
    font-size: 20px;

    transition:
        transform 0.3s ease;
}


.about-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 38px rgba(242, 32, 103, 0.28);
}


.about-btn:hover span {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.about-visual {
    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;
    justify-content: center;

    /*
       IMPORTANT:
       Makes visual extend outside container
    */
    width: calc(100% + 180px);

    margin-left: -20px;

    z-index: 3;
}


/* =========================================================
   LARGE BACK CIRCLE
   ========================================================= */

.visual-circle {
    position: absolute;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 239, 246, 0.95) 0%,
            rgba(247, 244, 255, 0.75) 45%,
            rgba(235, 247, 255, 0.35) 68%,
            transparent 72%
        );

    z-index: 0;

    transform: translate(50px, -5px);
}


/* =========================================================
   SOFT BLUE/PINK GLOW
   ========================================================= */

.visual-glow {
    position: absolute;

    width: 480px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(69, 159, 238, 0.14),
            rgba(244, 35, 105, 0.08) 45%,
            transparent 72%
        );

    filter: blur(25px);

    z-index: 1;

    transform: translate(80px, 20px);
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.about-main-image {
    position: relative;

    z-index: 5;

    width: 850px;

    max-width: none;

    height: auto;

    object-fit: contain;

    /*
       Push image outside container
    */

    transform:
        translateX(70px)
        scale(1.02);

    filter:
        drop-shadow(
            0 25px 35px rgba(28, 85, 130, 0.10)
        );
}


/* =========================================================
   ECG VECTOR
   ========================================================= */



.visual-ecg path {
    fill: none;

    stroke: #f42569;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;

    opacity: 0.8;

    filter:
        drop-shadow(
            0 0 8px rgba(244, 37, 105, 0.25)
        );
}


/* =========================================================
   BACKGROUND ECG VECTORS
   ========================================================= */

.about-ecg {
    position: absolute;

    pointer-events: none;

    fill: none;

    z-index: 1;
}


.about-ecg path {
    fill: none;

    stroke: #f5a7c3;

    stroke-width: 2;

    opacity: 0.28;

    stroke-linecap: round;
}


.about-ecg-left {
    width: 720px;

    height: 150px;

    left: -250px;

    bottom: 55px;
}


.about-ecg-right {
    width: 620px;

    height: 150px;

    right: -260px;

    top: 100px;

    opacity: 0.6;
}


/* =========================================================
   BACKGROUND RINGS
   ========================================================= */

.about-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(41, 133, 210, 0.10);

    pointer-events: none;

    z-index: 0;
}


.about-ring-1 {
    width: 520px;
    height: 520px;

    right: -150px;
    top: -120px;
}


.about-ring-2 {
    width: 680px;
    height: 680px;

    right: -220px;
    top: -200px;

    border-color: rgba(242, 35, 105, 0.07);
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.about-dots {
    position: absolute;

    width: 170px;
    height: 170px;

    right: 40px;
    top: 80px;

    background-image:
        radial-gradient(
            rgba(20, 120, 190, 0.25) 1px,
            transparent 1px
        );

    background-size: 13px 13px;

    opacity: 0.35;

    z-index: 0;

    mask-image:
        linear-gradient(
            135deg,
            black,
            transparent
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1100px) {

    .about-container {
        grid-template-columns: 1fr;

        width: min(
            900px,
            calc(100% - 50px)
        );
    }

    .about-content {
        padding-right: 0;

        text-align: center;
    }

    .about-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-visual {
        min-height: 500px;

        width: 100%;

        margin-left: 0;

        margin-top: 30px;
    }

    .about-main-image {
        width: 850px;

        transform:
            translateX(80px)
            scale(0.95);
    }

    .about-content h2 {
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 600px) {

    .about-fibriart {
        padding: 75px 0;
    }

    .about-container {
        width: calc(100% - 30px);
    }

    .about-content h2 {
        font-size: 42px;

        letter-spacing: -1px;
    }

    .about-content h3 {
        font-size: 18px;
    }

    .about-content p {
        font-size: 15px;

        line-height: 1.65;
    }

    .about-visual {
        min-height: 380px;

        overflow: visible;
    }

    .about-main-image {
        width: 650px;

        transform:
            translateX(70px)
            scale(0.82);
    }

    .visual-circle {
        width: 400px;
        height: 400px;
    }

    .visual-ecg {
        width: 600px;

        left: -70px;
    }

}

/* =========================================================
   FIBRIART BLOG SECTION
   ========================================================= */

.home-blog-section {

    position: relative;

    width: 100%;

    padding: 110px 0 120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(20, 109, 179, 0.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(242, 37, 105, 0.035),
            transparent 25%
        ),
        #ffffff;
}


/* =========================================================
   BACKGROUND ELEMENT CONTAINER
   ========================================================= */

.blog-bg-elements {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   KEEP CONTENT ABOVE BACKGROUND
   ========================================================= */

.home-blog-section
.home-section-container {

    position: relative;

    z-index: 5;
}


/* =========================================================
   CENTER HEADER
   ========================================================= */

.blog-centered-header {

    position: relative;

    text-align: center;

    max-width: 850px;

    margin: 0 auto 55px;

    z-index: 5;
}


.home-blog-title {
	margin: 0 0 12px;
	color: #062a52;
	font-size: 2.8rem;
	line-height: 1.15;
	font-size: 2.8rem;
	line-height: 1.10;
}

.home-blog-subtext {

    margin: 0 auto;

    color: #53718d;

    font-size: 1.08rem;

    line-height: 1.6;
}


/* =========================================================
   BLOG CONTENT ROW
   ========================================================= */

.blog-content-row {
    gap: 26px;
    position: relative;
    z-index: 5;
}


/* =========================================================
   BLOG CARDS
   ========================================================= */

.blog-cards-grid {

    flex: 1;

    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 32px;

    align-items: stretch;
}


/* =========================================================
   EXPLORE BUTTON SIDE
   ========================================================= */

.blog-explore-side {

    flex: 0 0 145px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    align-self: stretch;

    position: relative;
    margin-bottom:15px;
}


.blog-explore-side::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 1px;

    height: 80px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(20,109,179,0.18),
            transparent
        );
}


.blog-explore-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-width: 138px;

    padding: 14px 18px;

    border:
        1px solid #8bbce0;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.85);

    color: #146db3;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 700;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 8px 25px rgba(20,109,179,0.06);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.blog-explore-btn svg {

    transition:
        transform 0.3s ease;
}


.blog-explore-btn:hover {

    background: #146db3;

    color: #ffffff;

    transform: translateX(4px);

    box-shadow:
        0 12px 28px rgba(20,109,179,0.18);
}


.blog-explore-btn:hover svg {

    transform: translateX(4px);
}


/* =========================================================
   BLOG CARD
   ========================================================= */

.blog-card {

    position: relative;

    min-width: 0;

    z-index: 2;
}


.blog-card::before {

    content: "";

    position: absolute;

    inset: 15px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(20,109,179,0.12),
            rgba(242,37,105,0.08)
        );

    filter: blur(25px);

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    z-index: -1;
}


.blog-card:hover::before {

    opacity: 1;

    transform: translateY(5px);
}


/* =========================================================
   CARD INNER
   ========================================================= */

.blog-card-inner {

    position: relative;

    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border:
        1.5px solid #edf2f7;

    border-radius: 24px;

    box-shadow:
        0 10px 30px rgba(10,25,47,0.04);

    transform-style: preserve-3d;

    transition:
        transform 0.2s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.blog-card-inner:hover {

    box-shadow:
        0 20px 45px rgba(10,31,68,0.10);

    border-color:
        rgba(20,109,179,0.12);
}


/* =========================================================
   BLOG IMAGE
   ========================================================= */

.blog-img-box {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #e2e8f0;
}


.blog-img-box img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.blog-card-inner:hover
.blog-img-box img {

    transform: scale(1.06);
}


/* =========================================================
   CATEGORY BADGE
   ========================================================= */



/* =========================================================
   CARD CONTENT
   ========================================================= */

.blog-card-content {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 26px;
}


.blog-heading {
	margin: 0 0 10px;
	color: #062a52;
	font-size: 1.25rem;
	line-height: 1.2;
	/* font-weight: 600; */
}


.blog-summary {
	margin: 0 0 22px;
	color: #64748b;
	font-size: 0.92rem;
	line-height: 1.5;
}


.blog-read-link {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 6px;

    color: #146db3;

    font-size: 0.92rem;

    font-weight: 500;

    text-decoration: none;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.blog-read-link i {

    font-size: 18px;

    transition:
        transform 0.2s ease;
}


.blog-read-link:hover {

    color: #f02769;

    gap: 10px;
}


.blog-read-link:hover i {

    transform: translateX(3px);
}


/* =========================================================
   LEFT-SIDE BLUE GLOW
   ========================================================= */

.blog-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(55px);
}


.blog-glow-blue {

    width: 430px;

    height: 430px;

    left: -220px;

    top: 220px;

    background:
        rgba(20,109,179,0.09);
}


/* Pink glow */

.blog-glow-pink {

    width: 260px;

    height: 260px;

    left: 80px;

    bottom: 80px;

    background:
        rgba(242,37,105,0.045);

    filter: blur(65px);
}


/* =========================================================
   BACKGROUND RINGS
   ========================================================= */

.blog-ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    border:
        1px solid rgba(20,109,179,0.08);
}


.blog-ring-1 {

    width: 560px;

    height: 560px;

    left: -400px;

    top: 90px;
}


.blog-ring-2 {

    width: 400px;

    height: 400px;

    left: -280px;

    top: 170px;

    border-color:
        rgba(242,37,105,0.07);
}


.blog-ring-3 {

    width: 680px;

    height: 680px;

    left: -520px;

    bottom: -420px;

    border-color:
        rgba(20,109,179,0.05);
}


/* =========================================================
   MAIN LEFT ECG
   ========================================================= */

.blog-ecg-wave {

    position: absolute;

    pointer-events: none;

    overflow: visible;
}


.blog-ecg-wave-left {

    width: 850px;

    height: 210px;

    left: -330px;

    top: 250px;

    opacity: 0.55;
}


.blog-ecg-wave-left path {

    fill: none;

    stroke: #8cc7ec;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   SMALL PINK ECG
   ========================================================= */

.blog-ecg-small {

    position: absolute;

    width: 480px;

    height: 145px;

    left: -190px;

    bottom: 120px;

    opacity: 0.28;
}


.blog-ecg-small path {

    fill: none;

    stroke: #f28cad;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   DOT GRID
   ========================================================= */

.blog-dot-grid {

    position: absolute;

    width: 170px;

    height: 170px;

    background-image:
        radial-gradient(
            circle,
            rgba(20,109,179,0.22) 1px,
            transparent 1.5px
        );

    background-size: 14px 14px;

    opacity: 0.32;

    mask-image:
        linear-gradient(
            135deg,
            black,
            transparent 80%
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            black,
            transparent 80%
        );
}


.blog-dots-1 {

    left: 25px;

    top: 130px;
}


.blog-dots-2 {

    left: 100px;

    bottom: 100px;

    transform: rotate(180deg);
}


/* =========================================================
   FLOATING NODES
   ========================================================= */

.blog-node {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #146db3;

    box-shadow:
        0 0 0 5px rgba(20,109,179,0.08),
        0 0 18px rgba(20,109,179,0.15);
}


.blog-node-1 {

    left: 8%;

    top: 30%;
}


.blog-node-2 {

    left: 20%;

    top: 20%;

    width: 6px;

    height: 6px;

    background: #f02769;
}


.blog-node-3 {

    left: 14%;

    bottom: 27%;

    width: 7px;

    height: 7px;
}


.blog-node-4 {

    left: 27%;

    bottom: 15%;

    width: 6px;

    height: 6px;

    background: #f02769;
}


/* =========================================================
   MEDICAL CROSSES
   ========================================================= */




.blog-medical-cross path {

    fill: #146db3;
}


.blog-medical-cross-1 {

    left: 6%;

    top: 100px;
}


.blog-medical-cross-2 {

    left: 18%;

    bottom: 80px;

    width: 42px;

    height: 42px;

    opacity: 0.04;

    transform: rotate(-15deg);
}


/* =========================================================
   ORBIT CIRCLE
   ========================================================= */

.blog-orbit-circle {

    position: absolute;

    left: 70px;

    top: 45%;

    width: 120px;

    height: 120px;

    border:
        1px solid rgba(20,109,179,0.08);

    border-radius: 50%;
}


.blog-orbit-circle::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 50px;

    left: -25px;

    top: 35px;

    border:
        1px solid rgba(242,37,105,0.08);

    border-radius: 50%;

    transform: rotate(-25deg);
}


.blog-orbit-circle span {

    position: absolute;

    width: 9px;

    height: 9px;

    background: #f02769;

    border-radius: 50%;

    right: 5px;

    top: 25px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .blog-content-row {

        gap: 20px;

    }


    .blog-cards-grid {

        gap: 22px;

    }


    .blog-explore-side {

        flex-basis: 125px;

    }


    .blog-explore-btn {

        min-width: 120px;

        padding:
            13px 14px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .blog-content-row {

        flex-direction: column;

        align-items: stretch;

    }


    .blog-cards-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .blog-explore-side {

        align-self: center;

        flex: none;

        margin-top: 10px;

    }


    .blog-explore-side::before {

        display: none;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .home-blog-section {

        padding:
            80px 0 90px;

    }


    .blog-centered-header {

        margin-bottom: 38px;

    }


    .home-blog-title {

        font-size: 2.15rem;

    }


    .home-blog-subtext {

        font-size: 0.98rem;

    }


    .blog-cards-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }


    .blog-img-box {

        height: 205px;

    }


    .blog-card-content {

        padding: 22px;

    }


    .blog-heading {

        font-size: 1.15rem;

    }


    .blog-summary {

        font-size: 0.9rem;

    }


    .blog-explore-side {

        width: 100%;

        margin-top: 5px;

    }


    .blog-explore-btn {

        width: auto;

        min-width: 170px;

    }


    /* Make left decorations more subtle */

    .blog-glow-blue {

        left: -300px;

    }


    .blog-ring-1 {

        left: -430px;

    }


    .blog-ring-2 {

        left: -330px;

    }


    .blog-orbit-circle {

        left: -50px;

    }


    .blog-dot-grid {

        opacity: 0.16;

    }

}
/* =========================================================
   5. FINAL CTA SECTION (3D Radiant Glass Stage)
   ========================================================= */
.home-cta-section {
    position: relative;
    padding: 60px 0 120px;
    background: #f8fafc;
    width: 100%;
}

.cta-curved-card {
   background: radial-gradient(circle at 50% 20%, #0d213f 0%, #060e1d 80%);
    border-radius: 36px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 31, 68, 0.18);
}

.cta-main-title {
	font-size: 46px;
	/* font-weight: 800; */
	color: #ffffff;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
	position: relative;
	z-index: 2;
}

.cta-description {
	font-size: 18px;
	color: #cbd5e1;
	max-width: 620px;
	margin: 0 auto 36px;
	line-height: 1.6;
	position: relative;
	z-index: 2;
}
.cta-buttons-dock {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .home-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .blog-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}