/* WhizzAct - Reference Matching Redesign */
:root {
    --ref-primary: #1E40AF; /* Exact bright blue matching the design reference */
    --ref-text: #0f172a;
    --ref-text-light: #64748b;
    --ref-bg: #FFFFFF;
    --ref-teal: #14b8a6;
    --ref-yellow: #f59e0b;
    --ref-orange: #f97316;
}

body {
    background-color: var(--ref-bg);
    color: var(--ref-text);
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}

/* ---------------- HERO SECTION ---------------- */
.hero-wrapper { 
    padding: 140px 0 60px; 
    position: relative; 
    overflow: hidden; 
    background: #ffffff;
}

.swoosh-underline { position: relative; display: inline-block; }
.swoosh-underline::after {
    content: ''; 
    position: absolute; bottom: 5px; left: 0; 
    width: 100%; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,35 Q100,0 200,10' fill='none' stroke='%23f97316' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

.title-ref { 
    font-size: 3.8rem; 
    font-weight: 800; 
    line-height: 1.15; 
    letter-spacing: -1.5px; 
    color: var(--ref-text); 
}
.title-ref-blue { color: var(--ref-primary); }

.btn-ref-primary {
    background: var(--ref-primary); 
    color: #fff !important;
    padding: 16px 36px; 
    border-radius: 40px; /* Perfectly round pill button */
    font-weight: 600; 
    display: inline-flex; 
    align-items: center; 
    transition: 0.3s;
    border: none;
}
.btn-ref-primary:hover { 
    color: #fff !important;
    transform: translateY(-3px); 
    box-shadow: 0 12px 24px rgba(30, 64, 175, 0.25); 
}

/* Decorative Exact Floating Dots */
.dot { position: absolute; border-radius: 50%; opacity: 0.8;}
.dot-1 { width: 10px; height: 10px; background: #60a5fa; top: 18%; left: -20px; }
.dot-2 { width: 18px; height: 18px; background: #34d399; top: 12%; right: 40%; }
.dot-3 { width: 24px; height: 24px; background: #fef08a; bottom: 0%; right: 10%; }
.dot-4 { width: 14px; height: 14px; background: #93c5fd; bottom: 10%; left: 20%; }

/* The Reference Circular Mask Block */
.hero-image-block { 
    position: relative; 
    width: 100%; 
    height: 580px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.massive-circle {
    width: 480px; 
    height: 480px; 
    background: var(--ref-primary); 
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hero-img-inner {
    position: relative; 
    width: 85%; 
    height: 380px;
    object-fit: cover;
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Perfectly Mapped Floating Widgets */
.ref-widget {
    position: absolute; 
    background: #fff; 
    padding: 12px 18px; 
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
    z-index: 5;
    display: flex; 
    align-items: center; 
    gap: 12px; 
    border: 1px solid rgba(0,0,0,0.02);
}

.widget-lightbulb { top: 15%; left: 0%; padding: 14px; border-radius: 12px; }
.widget-task { top: 12%; right: -5%; }
.widget-stat { bottom: 15%; left: -5%; }
.widget-live { bottom: 35%; right: -5%; }

@media (max-width: 991px) {
    .massive-circle { width: 340px; height: 340px; }
    .hero-image-block { height: 400px; margin-top: 40px; }
    .title-ref { font-size: 2.8rem; }
    .widget-stat { bottom: 0; left: 0; }
    .widget-task { right: 0; }
    .widget-live { bottom: 10%; right: 0; }
}

/* ---------------- LOGOS BAND ---------------- */
.ref-logos-section { 
    padding: 50px 0; 
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    border-top: 1px solid rgba(0,0,0,0.03); 
    margin-top: 20px;
}
.brand-item { 
    font-size: 1.4rem; 
    font-weight: 800; 
    color: #94a3b8; 
    display: flex; 
    align-items: center; 
    gap: 6px;
    opacity: 0.9;
}
.brand-item:hover { opacity: 1; }

/* ---------------- KEY FEATURES GRID ---------------- */
.features-section { padding: 100px 0; background: #fff;}
.ref-feature-card { 
    padding: 30px; 
    border-radius: 20px; 
    transition: 0.3s; 
    border: 1px solid transparent; 
}
.ref-feature-card:hover { 
    background: #fff; 
    border-color: rgba(0,0,0,0.05); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.04); 
    transform: translateY(-5px); 
}

.icon-box-soft {
    width: 60px; height: 60px; 
    border-radius: 16px; 
    display: inline-flex; 
    align-items: center; justify-content: center; 
    font-size: 1.6rem; 
    margin-bottom: 24px;
}
.ib-blue { background: #eff6ff; color: #3b82f6; }
.ib-orange { background: #fff7ed; color: #f97316; }
.ib-teal { background: #f0fdfa; color: #14b8a6; }

/* ---------------- SPLIT SECTIONS (BACKGROUND SHAPE LOGIC) ---------------- */
.split-section { padding: 100px 0; background: #fff;}

.shape-backdrop {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 80%; 
    height: 110%; 
    z-index: 0;
}
/* Section 1: Blue Shape on Left Edge */
.shape-blue-left {
    background: var(--ref-primary); 
    left: -100px; 
    border-radius: 0 120px 120px 0; 
}
/* Section 2: Teal Shape on Right Edge */
.shape-teal-right {
    background: var(--ref-teal); 
    right: -100px; 
    border-radius: 120px 0 0 120px; 
}

.img-offset { 
    position: relative; 
    z-index: 2; 
    margin: 40px; 
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    width: calc(100% - 80px);
    object-fit: cover;
    height: 380px;
}

@media (max-width: 991px) {
    .shape-backdrop { border-radius: 40px !important; width: 100% !important; left: 0 !important; right: 0 !important; height: 90%; }
    .img-offset { margin: 20px 0; width: 100%; }
}

/* ---------------- MAP / GLOBAL DOT GRID SECTION ---------------- */
.dot-grid { 
    background-image: radial-gradient(#cbd5e1 2px, transparent 2px); 
    background-size: 20px 20px; 
    border-radius: 30px;
}
.feature-pointer {
    width: 44px; height: 44px; 
    border-radius: 50%;
    transition: 0.3s;
    cursor: crosshair;
}
.feature-pointer:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;}