/* --- SECTION SEPARATORS --- */
/* Designed for Medical/Technical Precision */
.section-separator {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* 1. DATA FLOW SEPARATOR (Hero -> About) */
/* Represents continuity of data streams */
.separator-flow {
    background: linear-gradient(to bottom, transparent, var(--surface-clinical));
}

.separator-flow::before {
    content: '';
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--brand-teal-300), transparent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}

.separator-flow::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand-teal-400);
    border-radius: 50%;
    background: var(--surface-clinical);
    z-index: 2;
    box-shadow: 0 0 15px var(--brand-teal-300);
}

/* 2. PRECISION SEPARATOR (About -> Methodology) */
/* Technical scale marks indicating measurement */
.separator-precision {
    position: relative;
    height: 80px;
}

.separator-precision::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent 100%);
    top: 50%;
}

.separator-precision::after {
    content: '+';
    font-family: monospace;
    font-size: 24px;
    color: var(--brand-teal-500);
    background: var(--surface-clinical);
    padding: 0 12px;
    position: relative;
    z-index: 2;
}

/* 3. GRID SEPARATOR (Methodology -> Services) */
/* Represents integration of systems */
.separator-grid {
    background: radial-gradient(circle, var(--brand-teal-200) 1px, transparent 1px);
    background-size: 20px 20px;
    height: 100px;
    mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
    opacity: 0.6;
}

/* 4. AUTHORITY SEPARATOR (Services -> Team) */
/* A solid anchor point */
.separator-authority {
    height: 48px;
}

.separator-authority::before,
.separator-authority::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 1px;
    background: var(--brand-teal-200);
    top: 50%;
}

.separator-authority::before {
    left: 10%;
}

.separator-authority::after {
    right: 10%;
}

.separator-authority .iso-node {
    width: 40px;
    height: 6px;
    background: var(--brand-teal-600);
    border-radius: 4px;
    position: relative;
}