.comm-hero-section {
        --vhm-navy: #102A43;
        --vhm-red: #D62828;
        --vhm-orange: #D65A00;
        --vhm-yellow: #FFD60A;
        --vhm-green: #2E7D32;
        --vhm-cream: #FFF7D6;
        --vhm-skyblue: #E3F2FD;
        --vhm-white: #FFFFFF;

        position: relative;
        background: radial-gradient(circle at 75% 20%, rgba(227, 242, 253, 0.8), transparent 45%),
          radial-gradient(circle at 15% 80%, rgba(255, 247, 214, 0.6), transparent 50%),
          linear-gradient(180deg, #FFFFFF 0%, #F8F9FF 100%);
        overflow: hidden;
      }

      .comm-hero-pattern {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(16, 42, 67, 0.05) 1.5px, transparent 1.5px);
        background-size: 28px 28px;
        pointer-events: none;
        opacity: 0.8;
      }

      .comm-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--vhm-white);
        border: 1.5px solid rgba(16, 42, 67, 0.08);
        padding: 6px 14px;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(16, 42, 67, 0.03);
      }

      .comm-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--vhm-red);
        box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.4);
        animation: pulse-red 2s infinite;
      }

      @keyframes pulse-red {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.7);
        }

        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(214, 40, 40, 0);
        }

        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(214, 40, 40, 0);
        }
      }

      .comm-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--vhm-white);
        border: 1px solid rgba(16, 42, 67, 0.08);
        padding: 8px 14px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.825rem;
        color: var(--vhm-navy);
        box-shadow: 0 2px 6px rgba(16, 42, 67, 0.02);
        transition: all 0.2s ease;
      }

      .comm-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(16, 42, 67, 0.06);
        border-color: rgba(214, 40, 40, 0.2);
      }

      .comm-btn-primary {
        background: linear-gradient(135deg, var(--vhm-red) 0%, #b20112 100%);
        color: var(--vhm-white);
        box-shadow: 0 4px 15px rgba(214, 40, 40, 0.25);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .comm-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(214, 40, 40, 0.4);
      }

      .comm-btn-secondary {
        background: var(--vhm-white);
        color: var(--vhm-navy);
        border: 1.5px solid rgba(16, 42, 67, 0.12);
        box-shadow: 0 4px 12px rgba(16, 42, 67, 0.04);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .comm-btn-secondary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(16, 42, 67, 0.08);
        border-color: var(--vhm-navy);
      }

      .shine-effect {
        position: relative;
        overflow: hidden;
      }

      .shine-effect::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -75%;
        width: 40%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
        transform: rotate(30deg);
        transition: none;
      }

      .shine-effect:hover::after {
        left: 125%;
        transition: all 0.75s ease-in-out;
      }

      /* Visual Container & Floaters */
      .ecosystem-container {
        position: relative;
        height: 480px;
        width: 100%;
      }

      .device-laptop {
        position: absolute;
        bottom: 30px;
        left: 10px;
        width: 330px;
        z-index: 10;
        filter: drop-shadow(0 15px 35px rgba(16, 42, 67, 0.15));
      }

      .device-mobile {
        position: absolute;
        bottom: 10px;
        right: 30px;
        width: 140px;
        z-index: 20;
        filter: drop-shadow(0 12px 28px rgba(16, 42, 67, 0.2));
      }

      .device-tv {
        position: absolute;
        top: 20px;
        right: 60px;
        width: 280px;
        z-index: 5;
        filter: drop-shadow(0 20px 45px rgba(16, 42, 67, 0.15));
      }

      .floating-card {
        position: absolute;
        z-index: 30;
        background: var(--vhm-white);
        border-radius: 12px;
        padding: 10px 14px;
        box-shadow: 0 10px 30px rgba(16, 42, 67, 0.12);
        border: 1px solid rgba(16, 42, 67, 0.05);
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.75rem;
        pointer-events: none;
      }

      @keyframes float-card-1 {
        0% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-8px) rotate(1deg);
        }

        100% {
          transform: translateY(0px) rotate(0deg);
        }
      }

      @keyframes float-card-2 {
        0% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-12px) rotate(-1deg);
        }

        100% {
          transform: translateY(0px) rotate(0deg);
        }
      }

      @keyframes float-card-3 {
        0% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-6px) rotate(1.5deg);
        }

        100% {
          transform: translateY(0px) rotate(0deg);
        }
      }

      .float-1 {
        animation: float-card-1 5s ease-in-out infinite;
      }

      .float-2 {
        animation: float-card-2 6s ease-in-out infinite 0.5s;
      }

      .float-3 {
        animation: float-card-3 4.5s ease-in-out infinite 1s;
      }

      .card-attendance {
        top: 120px;
        left: -10px;
        border-left: 4px solid var(--vhm-green);
      }

      .card-fee {
        bottom: 180px;
        left: 10px;
        border-left: 4px solid var(--vhm-orange);
      }

      .card-exam {
        top: 40px;
        left: 140px;
        border-left: 4px solid var(--vhm-red);
      }

      .card-whatsapp {
        bottom: 120px;
        right: 160px;
        border-left: 4px solid #25D366;
      }

      .card-tv {
        top: 140px;
        right: 10px;
        border-left: 4px solid var(--vhm-red);
      }

      /* Marching ants connection lines */
      .comm-lines {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 8;
      }

      .connecting-line {
        stroke-dasharray: 6 6;
        animation: march-ants 1.5s linear infinite;
      }

      @keyframes march-ants {
        to {
          stroke-dashoffset: -24;
        }
      }

      /* Bottom integration rib */
      .comm-integration-ribbon {
        background: linear-gradient(90deg, rgba(16, 42, 67, 0.04) 0%, rgba(214, 40, 40, 0.02) 50%, rgba(16, 42, 67, 0.04) 100%);
        border-top: 1px solid rgba(16, 42, 67, 0.06);
        border-bottom: 1px solid rgba(16, 42, 67, 0.06);
      }

      /* Entrance Animation */
      .fade-up-item {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s forwards;
      }

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

      .delay-1 {
        animation-delay: 0.1s;
      }

      .delay-2 {
        animation-delay: 0.2s;
      }

      .delay-3 {
        animation-delay: 0.3s;
      }

      .delay-4 {
        animation-delay: 0.4s;
      }

      .delay-5 {
        animation-delay: 0.5s;
      }

      @media (max-width: 1023px) {
        .ecosystem-container {
          max-width: 500px;
          margin: 0 auto;
        }
      }

      @media (max-width: 639px) {
        .ecosystem-container {
          height: 380px;
          transform: scale(0.8);
          transform-origin: top center;
          margin: 0 auto;
        }
      }

      @media (max-width: 479px) {
        .ecosystem-container {
          height: 300px;
          transform: scale(0.62);
          transform-origin: top center;
          margin: 0 auto;
        }
      }
    

      .comm-overview-section {
        --ov-navy: #102A43;
        --ov-red: #D62828;
        --ov-orange: #D65A00;
        --ov-yellow: #FFD60A;
        --ov-green: #2E7D32;
        --ov-cream: #FFF7D6;
        --ov-skyblue: #E3F2FD;
        --ov-white: #FFFFFF;

        background: radial-gradient(circle at 10% 30%, rgba(255, 247, 214, 0.4), transparent 40%),
          radial-gradient(circle at 90% 70%, rgba(227, 242, 253, 0.4), transparent 45%),
          #FAFAFC;
        color: var(--ov-navy);
      }

      .ov-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(16, 42, 67, 0.05);
        border: 1px solid rgba(16, 42, 67, 0.08);
        padding: 6px 14px;
        border-radius: 50px;
        color: var(--ov-navy);
        font-weight: 800;
        font-size: 0.7rem;
        letter-spacing: 0.75px;
        text-transform: uppercase;
      }

      .ov-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--ov-white);
        border: 1.5px solid rgba(16, 42, 67, 0.07);
        padding: 7px 12px;
        border-radius: 10px;
        font-size: 0.775rem;
        font-weight: 700;
        color: var(--ov-navy);
        box-shadow: 0 2px 4px rgba(16, 42, 67, 0.02);
      }

      /* Dashboard Mockup Grid */
      .db-mockup {
        background: var(--ov-white);
        border-radius: 20px;
        border: 1.5px solid rgba(16, 42, 67, 0.08);
        box-shadow: 0 15px 40px rgba(16, 42, 67, 0.06);
        padding: 16px;
        overflow: hidden;
      }

      .db-widget {
        background: #F8F9FD;
        border-radius: 12px;
        border: 1px solid rgba(16, 42, 67, 0.05);
        padding: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .db-widget:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(16, 42, 67, 0.04);
      }

      /* Flow Visual */
      .flow-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--ov-white);
        border: 1px solid rgba(16, 42, 67, 0.06);
        border-radius: 20px;
        padding: 16px 24px;
        box-shadow: 0 6px 20px rgba(16, 42, 67, 0.02);
        position: relative;
        overflow: hidden;
      }

      .flow-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        z-index: 2;
        width: 18%;
      }

      .flow-step-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--ov-skyblue);
        color: var(--ov-navy);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        border: 2px solid var(--ov-white);
        box-shadow: 0 4px 10px rgba(16, 42, 67, 0.06);
      }

      .flow-line {
        position: relative;
        flex-grow: 1;
        height: 2px;
        background: linear-gradient(90deg, var(--ov-skyblue) 0%, var(--ov-red) 100%);
        margin: 0 8px;
        z-index: 1;
      }

      .flow-line-dot {
        position: absolute;
        top: -3px;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ov-red);
        animation: flow-move 2.5s linear infinite;
      }

      @keyframes flow-move {
        0% {
          left: 0%;
        }

        100% {
          left: 100%;
        }
      }

      /* Highlighted Cards */
      .highlight-card {
        background: var(--ov-white);
        border-radius: 22px;
        padding: 24px;
        box-shadow: 0 8px 30px rgba(16, 42, 67, 0.03);
        border: 1.5px solid rgba(16, 42, 67, 0.06);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
      }

      .highlight-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: transparent;
      }

      .highlight-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(16, 42, 67, 0.08);
      }

      .card-accent-red::before {
        background: var(--ov-red);
      }

      .card-accent-orange::before {
        background: var(--ov-orange);
      }

      .card-accent-yellow::before {
        background: var(--ov-yellow);
      }

      .card-accent-green::before {
        background: var(--ov-green);
      }

      .card-accent-blue::before {
        background: #0284c7;
      }

      .card-accent-purple::before {
        background: #7c3aed;
      }

      .card-accent-teal::before {
        background: #0d9488;
      }

      .card-accent-indigo::before {
        background: #4f46e5;
      }

      .card-accent-navy::before {
        background: var(--ov-navy);
      }

      .btn-ov-primary {
        background: linear-gradient(135deg, var(--ov-red) 0%, #b20112 100%);
        color: var(--ov-white);
        box-shadow: 0 4px 15px rgba(214, 40, 40, 0.2);
        transition: all 0.3s ease;
      }

      .btn-ov-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(214, 40, 40, 0.35);
      }

      .btn-ov-secondary {
        background: transparent;
        color: var(--ov-navy);
        border: 2px solid rgba(16, 42, 67, 0.15);
        transition: all 0.3s ease;
      }

      .btn-ov-secondary:hover {
        background: rgba(16, 42, 67, 0.02);
        border-color: var(--ov-navy);
        transform: translateY(-2px);
      }

      /* Custom SVGs and styles for mockup dashboard */
      .db-header {
        border-bottom: 1.5px solid rgba(16, 42, 67, 0.06);
        padding-bottom: 12px;
        margin-bottom: 16px;
      }

      .badge-success {
        background: rgba(46, 125, 50, 0.1);
        color: var(--ov-green);
      }

      .badge-warning {
        background: rgba(214, 90, 0, 0.1);
        color: var(--ov-orange);
      }

      .badge-danger {
        background: rgba(214, 40, 40, 0.1);
        color: var(--ov-red);
      }

      /* Staggered card entry visual hints */
      .stagger-card {
        opacity: 0;
        transform: translateY(15px);
        animation: cardReveal 0.6s forwards;
      }

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

      /* Responsive stacking controls */
      @media (max-width: 768px) {
        .flow-container {
          flex-direction: column;
          gap: 16px;
          padding: 20px;
        }

        .flow-step {
          width: 100%;
        }

        .flow-line {
          height: 16px;
          width: 2px;
          margin: 4px 0;
        }

        .flow-line-dot {
          left: -3px !important;
          top: 0;
          animation: flow-move-vertical 2.5s linear infinite;
        }
      }

      @keyframes flow-move-vertical {
        0% {
          top: 0%;
        }

        100% {
          top: 100%;
        }
      }
    

      .comm-parentapp-section {
        --pa-navy: #102A43;
        --pa-red: #D62828;
        --pa-orange: #D65A00;
        --pa-yellow: #FFD60A;
        --pa-green: #2E7D32;
        --pa-white: #FFFFFF;
        --pa-cream: #FFF7D6;
        --pa-skyblue: #E3F2FD;

        position: relative;
        background: radial-gradient(circle at 10% 20%, rgba(227, 242, 253, 0.45), transparent 45%),
          radial-gradient(circle at 90% 80%, rgba(255, 247, 214, 0.4), transparent 45%),
          #F4F7FA;
        overflow: hidden;
      }

      .pa-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--pa-white);
        border: 1.5px solid rgba(16, 42, 67, 0.08);
        padding: 6px 14px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--pa-red);
        box-shadow: 0 4px 12px rgba(16, 42, 67, 0.03);
      }

      .pa-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pa-red);
        box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.4);
        animation: pa-pulse-red 2s infinite;
      }

      @keyframes pa-pulse-red {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.7);
        }

        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(214, 40, 40, 0);
        }

        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(214, 40, 40, 0);
        }
      }

      .pa-feature-card {
        background: var(--pa-white);
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 8px 30px rgba(16, 42, 67, 0.02);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .pa-feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 36px rgba(16, 42, 67, 0.08);
      }

      /* Mobile Mockup styles */
      .pa-phone-wrapper {
        position: relative;
        padding: 40px 50px;
      }

      .pa-phone-container {
        position: relative;
        width: 320px;
        height: 620px;
        background: #0f172a;
        border-radius: 44px;
        border: 12px solid #1e293b;
        box-shadow: 0 25px 60px rgba(16, 42, 67, 0.18);
        margin: 0 auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .pa-phone-notch {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 22px;
        background: #1e293b;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        z-index: 10;
      }

      .pa-phone-screen {
        flex-grow: 1;
        background: #f8fafc;
        border-radius: 28px;
        overflow-y: auto;
        padding: 28px 12px 12px 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
      }

      /* Hide scrollbars inside phone screen */
      .pa-phone-screen::-webkit-scrollbar {
        display: none;
      }

      .pa-phone-screen {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* Notification Cards inside Mockup Phone */
      .pa-notif-card {
        background: var(--pa-white);
        border-radius: 16px;
        padding: 12px 14px;
        box-shadow: 0 4px 12px rgba(16, 42, 67, 0.03);
        border: 1px solid rgba(16, 42, 67, 0.04);
        display: flex;
        gap: 12px;
        align-items: flex-start;
        position: relative;
        transition: transform 0.25s ease;
      }

      .pa-notif-card:hover {
        transform: scale(1.03);
      }

      .pa-notif-badge-active {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--pa-red);
        position: absolute;
        top: 12px;
        right: 12px;
        animation: pa-pulse-notif 1.5s infinite;
      }

      @keyframes pa-pulse-notif {
        0% {
          transform: scale(0.9);
          opacity: 1;
        }

        50% {
          transform: scale(1.3);
          opacity: 0.5;
        }

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

      /* Floating Badges */
      .pa-float-badge {
        position: absolute;
        background: var(--pa-white);
        border: 1.5px solid rgba(16, 42, 67, 0.08);
        border-radius: 50px;
        padding: 8px 16px;
        font-weight: 800;
        font-size: 0.75rem;
        color: var(--pa-navy);
        box-shadow: 0 10px 25px rgba(16, 42, 67, 0.08);
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 6px;
        pointer-events: none;
      }

      .pa-fb-1 {
        top: 60px;
        left: 0px;
        animation: pa-float-1 4s ease-in-out infinite;
      }

      .pa-fb-2 {
        top: 200px;
        right: -10px;
        animation: pa-float-2 4.5s ease-in-out infinite;
      }

      .pa-fb-3 {
        bottom: 220px;
        left: -20px;
        animation: pa-float-3 5s ease-in-out infinite;
      }

      .pa-fb-4 {
        bottom: 80px;
        right: 10px;
        animation: pa-float-4 4.8s ease-in-out infinite;
      }

      @keyframes pa-float-1 {

        0%,
        100% {
          transform: translateY(0) rotate(-2deg);
        }

        50% {
          transform: translateY(-10px) rotate(1deg);
        }
      }

      @keyframes pa-float-2 {

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

        50% {
          transform: translateY(-8px) rotate(-1deg);
        }
      }

      @keyframes pa-float-3 {

        0%,
        100% {
          transform: translateY(0) rotate(-1deg);
        }

        50% {
          transform: translateY(-12px) rotate(2deg);
        }
      }

      @keyframes pa-float-4 {

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

        50% {
          transform: translateY(-9px) rotate(-2deg);
        }
      }

      /* Workflow Strip */
      .pa-flow-strip {
        background: var(--pa-white);
        border: 1.5px solid rgba(16, 42, 67, 0.06);
        border-radius: 24px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 6px 24px rgba(16, 42, 67, 0.02);
      }

      .pa-flow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        width: 22%;
      }

      .pa-flow-step-num {
        background: var(--pa-cream);
        color: var(--pa-orange);
        font-weight: 800;
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 50px;
        text-transform: uppercase;
      }

      .pa-flow-arrow {
        color: rgba(16, 42, 67, 0.2);
        font-size: 1.5rem;
        font-weight: bold;
      }

      /* Buttons styles */
      .btn-pa-primary {
        background: linear-gradient(135deg, var(--pa-red) 0%, #b20112 100%);
        color: var(--pa-white);
        box-shadow: 0 4px 15px rgba(214, 40, 40, 0.2);
        transition: all 0.3s ease;
      }

      .btn-pa-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(214, 40, 40, 0.35);
      }

      .btn-pa-secondary {
        background: transparent;
        color: var(--pa-navy);
        border: 2px solid rgba(16, 42, 67, 0.15);
        transition: all 0.3s ease;
      }

      .btn-pa-secondary:hover {
        background: rgba(16, 42, 67, 0.02);
        border-color: var(--pa-navy);
        transform: translateY(-2px);
      }

      /* Responsive styling updates */
      @media (max-width: 1024px) {
        .pa-phone-wrapper {
          padding: 20px 0;
        }

        .pa-float-badge {
          position: static !important;
          animation: none !important;
          transform: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(16, 42, 67, 0.05);
          background: rgba(16, 42, 67, 0.02);
        }

        .pa-badges-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
          margin-top: 16px;
        }
      }

      @media (max-width: 768px) {
        .pa-flow-strip {
          flex-direction: column;
          gap: 16px;
          padding: 24px;
        }

        .pa-flow-item {
          width: 100%;
        }

        .pa-flow-arrow {
          transform: rotate(90deg);
        }
      }
    

      .comm-tv-section {
        --tv-navy: #102A43;
        --tv-dark: #0B1B2C;
        --tv-red: #D62828;
        --tv-orange: #D65A00;
        --tv-yellow: #FFD60A;
        --tv-green: #2E7D32;
        --tv-white: #FFFFFF;
        --tv-cream: #FFF7D6;
        --tv-skyblue: #E3F2FD;

        background: linear-gradient(180deg, #0B1B2C 0%, #06101B 100%);
        position: relative;
        overflow: hidden;
      }

      .tv-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 214, 10, 0.25);
        padding: 6px 14px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--tv-yellow);
        box-shadow: 0 4px 12px rgba(255, 214, 10, 0.05);
        text-shadow: 0 0 8px rgba(255, 214, 10, 0.3);
      }

      .tv-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--tv-yellow);
        box-shadow: 0 0 10px rgba(255, 214, 10, 0.8);
        animation: tv-pulse-yellow 2s infinite;
      }

      @keyframes tv-pulse-yellow {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.7);
        }

        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(255, 214, 10, 0);
        }

        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(255, 214, 10, 0);
        }
      }

      .tv-feature-card {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 20px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .tv-feature-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 214, 10, 0.2);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 214, 10, 0.05);
      }

      /* TV Mockup and Room Scene Wrapper */
      .tv-room-scene {
        position: relative;
        width: 100%;
        max-width: 520px;
        background: radial-gradient(circle at 50% 40%, rgba(214, 90, 0, 0.12), transparent 60%);
        border-radius: 24px;
        padding: 30px 20px;
        border: 1px solid rgba(255, 255, 255, 0.04);
        box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
        margin: 0 auto;
        overflow: hidden;
      }

      /* Ambient screen glow */
      .tv-glow-ambient {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        height: 180px;
        background: radial-gradient(circle, rgba(227, 242, 253, 0.2) 0%, transparent 70%);
        pointer-events: none;
        z-index: 1;
        animation: tv-glow-pulse 6s ease-in-out infinite;
      }

      @keyframes tv-glow-pulse {

        0%,
        100% {
          opacity: 0.8;
          transform: translate(-50%, -50%) scale(1);
        }

        50% {
          opacity: 1.2;
          transform: translate(-50%, -50%) scale(1.15);
        }
      }

      /* TV Hardware Mockup */
      .tv-frame-container {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
      }

      .tv-bezel {
        background: #111b27;
        border: 10px solid #1a2736;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
        overflow: hidden;
      }

      .tv-stand {
        width: 80px;
        height: 16px;
        background: #1a2736;
        margin: -2px auto 0 auto;
        clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
      }

      .tv-base {
        width: 140px;
        height: 6px;
        background: #111b27;
        margin: 0 auto;
        border-radius: 3px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      }

      /* TV Screen display */
      .tv-screen {
        aspect-ratio: 16 / 9;
        background: #08111a;
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
      }

      .tv-screen-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 5px;
      }

      .tv-logo-glow {
        color: var(--tv-yellow);
        font-weight: 900;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        text-shadow: 0 0 6px rgba(255, 214, 10, 0.6);
      }

      .tv-screen-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        flex-grow: 1;
      }

      .tv-dashboard-card {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.25s ease, border-color 0.25s ease;
      }

      .tv-dashboard-card:hover {
        transform: scale(1.04);
        border-color: var(--tv-yellow);
      }

      .tv-card-icon-box {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
      }

      /* Family silhouettes watching TV */
      .family-silhouette-graphics {
        position: relative;
        height: 110px;
        margin-top: 24px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }

      .family-svg {
        width: 280px;
        height: 90px;
        fill: #06101b;
        opacity: 0.95;
        z-index: 5;
        filter: drop-shadow(0 -4px 8px rgba(0, 0, 0, 0.3));
      }

      /* Floating Badges */
      .tv-float-badge {
        position: absolute;
        background: #111b27;
        border: 1.5px solid rgba(255, 214, 10, 0.25);
        border-radius: 50px;
        padding: 6px 14px;
        font-weight: 800;
        font-size: 0.725rem;
        color: var(--tv-white);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 214, 10, 0.08);
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 6px;
        pointer-events: none;
        text-shadow: 0 0 5px rgba(255, 214, 10, 0.2);
      }

      .tv-fb-1 {
        top: 40px;
        left: 10px;
        animation: tv-float-1 4.5s ease-in-out infinite;
      }

      .tv-fb-2 {
        top: 120px;
        right: 10px;
        animation: tv-float-2 4.2s ease-in-out infinite;
      }

      .tv-fb-3 {
        bottom: 180px;
        left: 0px;
        animation: tv-float-3 5.2s ease-in-out infinite;
      }

      .tv-fb-4 {
        bottom: 120px;
        right: 0px;
        animation: tv-float-4 4.7s ease-in-out infinite;
      }

      @keyframes tv-float-1 {

        0%,
        100% {
          transform: translateY(0) rotate(-1.5deg);
        }

        50% {
          transform: translateY(-8px) rotate(1deg);
        }
      }

      @keyframes tv-float-2 {

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

        50% {
          transform: translateY(-6px) rotate(-1deg);
        }
      }

      @keyframes tv-float-3 {

        0%,
        100% {
          transform: translateY(0) rotate(-1deg);
        }

        50% {
          transform: translateY(-10px) rotate(2deg);
        }
      }

      @keyframes tv-float-4 {

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

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

      /* Workflow Strip */
      .tv-flow-strip {
        background: rgba(255, 255, 255, 0.02);
        border: 1.5px solid rgba(255, 255, 255, 0.05);
        border-radius: 24px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
      }

      .tv-flow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        width: 22%;
      }

      .tv-flow-step-num {
        background: rgba(214, 90, 0, 0.15);
        color: var(--tv-orange);
        font-weight: 800;
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 50px;
        text-transform: uppercase;
        border: 1px solid rgba(214, 90, 0, 0.2);
      }

      .tv-flow-arrow {
        color: rgba(255, 255, 255, 0.1);
        font-size: 1.5rem;
        font-weight: bold;
      }

      /* Buttons styles */
      .btn-tv-primary {
        background: linear-gradient(135deg, var(--tv-red) 0%, #b20112 100%);
        color: var(--tv-white);
        box-shadow: 0 4px 15px rgba(214, 40, 40, 0.25);
        transition: all 0.3s ease;
      }

      .btn-tv-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(214, 40, 40, 0.4);
      }

      .btn-tv-secondary {
        background: transparent;
        color: var(--tv-white);
        border: 2px solid rgba(255, 255, 255, 0.15);
        transition: all 0.3s ease;
      }

      .btn-tv-secondary:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--tv-white);
        transform: translateY(-2px);
      }

      /* Grid adjustments */
      .tv-grid-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      @media (max-width: 640px) {
        .tv-grid-cards {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 1024px) {
        .tv-room-scene {
          padding: 20px 10px;
        }

        .tv-float-badge {
          position: static !important;
          animation: none !important;
          transform: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(255, 255, 255, 0.05);
          background: rgba(255, 255, 255, 0.02);
        }

        .tv-badges-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
          margin-top: 16px;
        }
      }

      @media (max-width: 768px) {
        .tv-flow-strip {
          flex-direction: column;
          gap: 16px;
          padding: 24px;
        }

        .tv-flow-item {
          width: 100%;
        }

        .tv-flow-arrow {
          transform: rotate(90deg);
        }
      }
    

      .comm-circulars-section {
        --circ-navy: #102A43;
        --circ-navy-dark: #0B1B2C;
        --circ-red: #D62828;
        --circ-orange: #D65A00;
        --circ-yellow: #FFD60A;
        --circ-green: #2E7D32;
        --circ-white: #FFFFFF;
        --circ-cream: #FFF7D6;
        --circ-skyblue: #E3F2FD;
        --circ-text-main: #102A43;
        --circ-text-muted: rgba(16, 42, 71, 0.75);

        background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FD 100%);
        position: relative;
        overflow: hidden;
      }

      .circ-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(227, 242, 253, 0.45);
        border: 1px solid rgba(16, 42, 71, 0.15);
        padding: 6px 14px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--circ-navy);
      }

      .circ-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--circ-green);
        box-shadow: 0 0 8px rgba(46, 125, 50, 0.6);
        animation: circ-pulse-green 2s infinite;
      }

      @keyframes circ-pulse-green {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
        }
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(46, 125, 50, 0);
        }
        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
        }
      }

      .circ-feature-card {
        background: var(--circ-white);
        border-radius: 20px;
        padding: 20px;
        border: 1px solid rgba(16, 42, 71, 0.06);
        box-shadow: 0 10px 30px rgba(16, 42, 71, 0.04);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .circ-feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 36px rgba(16, 42, 71, 0.1), 0 0 20px rgba(227, 242, 253, 0.5);
        border-color: rgba(16, 42, 71, 0.15);
      }

      /* Mockup Wrapper */
      .circ-dashboard-scene {
        position: relative;
        width: 100%;
        max-width: 520px;
        background: radial-gradient(circle at 50% 30%, rgba(227, 242, 253, 0.6), transparent 70%);
        border-radius: 24px;
        padding: 20px;
        border: 1px solid rgba(16, 42, 71, 0.06);
        box-shadow: 0 20px 50px rgba(16, 42, 71, 0.08);
        margin: 0 auto;
      }

      /* Chrome window mockup */
      .circ-console {
        background: var(--circ-white);
        border-radius: 16px;
        border: 1px solid rgba(16, 42, 71, 0.1);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        aspect-ratio: 4 / 3;
      }

      .circ-console-header {
        background: #F8FAFC;
        border-bottom: 1px solid rgba(16, 42, 71, 0.08);
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .circ-dots {
        display: flex;
        gap: 6px;
      }

      .circ-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .circ-dot-red { background: #FF5F56; }
      .circ-dot-yellow { background: #FFBD2E; }
      .circ-dot-green { background: #27C93F; }

      .circ-console-title {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--circ-navy);
        background: rgba(16, 42, 71, 0.05);
        padding: 2px 10px;
        border-radius: 4px;
        font-family: monospace;
      }

      .circ-console-body {
        display: grid;
        grid-template-columns: 1fr 3fr;
        flex-grow: 1;
        background: #FCFDFE;
        overflow: hidden;
      }

      .circ-sidebar {
        background: #F8FAFC;
        border-right: 1px solid rgba(16, 42, 71, 0.06);
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .circ-sb-item {
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--circ-navy);
        padding: 6px 8px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .circ-sb-item.active {
        background: var(--circ-navy);
        color: var(--circ-white);
      }

      .circ-main-pane {
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
      }

      .circ-pane-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .circ-filters {
        display: flex;
        gap: 4px;
      }

      .circ-filter-tag {
        font-size: 0.6rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid rgba(16, 42, 71, 0.08);
        background: var(--circ-white);
        color: var(--circ-text-muted);
      }

      .circ-filter-tag.active {
        background: var(--circ-skyblue);
        color: var(--circ-navy);
        border-color: rgba(16, 42, 71, 0.15);
      }

      /* Simulated Circular Cards */
      .circ-mock-card {
        background: var(--circ-white);
        border: 1px solid rgba(16, 42, 71, 0.08);
        border-radius: 10px;
        padding: 10px 12px;
        box-shadow: 0 4px 12px rgba(16, 42, 71, 0.02);
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: transform 0.2s ease;
      }

      .circ-mock-card:hover {
        transform: scale(1.02);
        border-color: rgba(16, 42, 71, 0.15);
      }

      .circ-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .circ-card-top-inner {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .circ-card-badge {
        font-size: 0.55rem;
        font-weight: 800;
        padding: 1px 6px;
        border-radius: 3px;
        text-transform: uppercase;
      }

      .circ-badge-urgent {
        background: rgba(214, 40, 40, 0.1);
        color: var(--circ-red);
      }

      .circ-badge-class {
        background: rgba(214, 90, 0, 0.1);
        color: var(--circ-orange);
      }

      .circ-badge-branch {
        background: rgba(46, 125, 50, 0.1);
        color: var(--circ-green);
      }

      .circ-card-title {
        font-size: 0.725rem;
        font-weight: 800;
        color: var(--circ-navy);
      }

      .circ-card-desc {
        font-size: 0.6rem;
        color: var(--circ-text-muted);
        line-height: 1.3;
      }

      .circ-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed rgba(16, 42, 71, 0.06);
        padding-top: 6px;
        margin-top: 2px;
      }

      /* Floating Overlay Stats widgets */
      .circ-overlay-widget {
        position: absolute;
        background: var(--circ-white);
        border: 1px solid rgba(16, 42, 71, 0.08);
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 10px 25px rgba(16, 42, 71, 0.08);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
        pointer-events: none;
      }

      .circ-ow-1 {
        bottom: 24px;
        left: -10px;
        animation: circ-float-1 5s ease-in-out infinite;
      }

      .circ-ow-2 {
        top: 60px;
        right: -15px;
        animation: circ-float-2 4.5s ease-in-out infinite;
      }

      @keyframes circ-float-1 {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-6px) scale(1.02); }
      }

      @keyframes circ-float-2 {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-8px) scale(1.02); }
      }

      /* Workflow Strip */
      .circ-flow-strip {
        background: rgba(16, 42, 71, 0.02);
        border: 1px solid rgba(16, 42, 71, 0.06);
        border-radius: 24px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 6px 24px rgba(16, 42, 71, 0.02);
      }

      .circ-flow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        width: 18%;
      }

      .circ-flow-step-num {
        background: rgba(16, 42, 71, 0.05);
        color: var(--circ-navy);
        font-weight: 800;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 50px;
        text-transform: uppercase;
        border: 1px solid rgba(16, 42, 71, 0.1);
      }

      .circ-flow-arrow {
        color: rgba(16, 42, 71, 0.15);
        font-size: 1.5rem;
        font-weight: bold;
      }

      /* CTA Buttons */
      .btn-circ-primary {
        background: linear-gradient(135deg, var(--circ-navy) 0%, #1e4265 100%);
        color: var(--circ-white);
        box-shadow: 0 4px 15px rgba(16, 42, 71, 0.2);
        transition: all 0.3s ease;
      }

      .btn-circ-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 42, 71, 0.35);
      }

      .btn-circ-secondary {
        background: transparent;
        color: var(--circ-navy);
        border: 2px solid rgba(16, 42, 71, 0.15);
        transition: all 0.3s ease;
      }

      .btn-circ-secondary:hover {
        background: rgba(16, 42, 71, 0.04);
        border-color: var(--circ-navy);
        transform: translateY(-2px);
      }

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

      @media (max-width: 640px) {
        .circ-grid-cards {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 1024px) {
        .circ-dashboard-scene {
          padding: 10px;
        }
        .circ-overlay-widget {
          position: static !important;
          animation: none !important;
          transform: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(16, 42, 71, 0.05);
          background: rgba(16, 42, 71, 0.02);
        }
        .circ-widgets-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
          margin-top: 16px;
        }
      }

      @media (max-width: 768px) {
        .circ-flow-strip {
          flex-direction: column;
          gap: 16px;
          padding: 24px;
        }
        .circ-flow-item {
          width: 100%;
        }
        .circ-flow-arrow {
          transform: rotate(90deg);
        }
      }
    

      .comm-attendance-section {
        --att-navy: #0C1A30;
        --att-navy-light: #162C4E;
        --att-red: #D62828;
        --att-orange: #D65A00;
        --att-yellow: #FFD60A;
        --att-green: #2E7D32;
        --att-white: #FFFFFF;
        --att-cream: #FFF7D6;
        --att-skyblue: #E3F2FD;
        --att-text-light: #E3F2FD;
        --att-text-muted: rgba(227, 242, 253, 0.7);

        background: linear-gradient(180deg, #0C1A30 0%, #06101B 100%);
        position: relative;
        overflow: hidden;
      }

      .att-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(227, 242, 253, 0.15);
        padding: 6px 14px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--att-yellow);
      }

      .att-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--att-green);
        box-shadow: 0 0 8px rgba(46, 125, 50, 0.8);
        animation: att-pulse-green 2s infinite;
      }

      @keyframes att-pulse-green {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
        }
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(46, 125, 50, 0);
        }
        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
        }
      }

      .att-dashboard-scene {
        position: relative;
        width: 100%;
        max-width: 520px;
        background: radial-gradient(circle at 50% 30%, rgba(22, 44, 78, 0.8), transparent 70%);
        border-radius: 24px;
        padding: 20px;
        border: 1px solid rgba(227, 242, 253, 0.08);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        margin: 0 auto;
      }

      .att-console {
        background: #0F223D;
        border-radius: 16px;
        border: 1px solid rgba(227, 242, 253, 0.1);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 12px;
      }

      .att-console-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(227, 242, 253, 0.08);
        padding-bottom: 10px;
      }

      .att-console-title {
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--att-white);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .att-biometric-status {
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--att-green);
        background: rgba(46, 125, 50, 0.15);
        padding: 2px 8px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .att-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .att-stat-box {
        background: rgba(22, 44, 78, 0.4);
        border: 1px solid rgba(227, 242, 253, 0.05);
        border-radius: 10px;
        padding: 10px;
        text-align: center;
      }

      .att-stat-label {
        font-size: 0.55rem;
        color: var(--att-text-muted);
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 4px;
      }

      .att-stat-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--att-white);
      }

      /* Bar Chart styling */
      .att-chart-widget {
        background: rgba(22, 44, 78, 0.4);
        border: 1px solid rgba(227, 242, 253, 0.05);
        border-radius: 12px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .att-chart-title {
        font-size: 0.65rem;
        font-weight: 800;
        color: var(--att-white);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .att-chart-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .att-chart-label-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
        color: var(--att-text-muted);
        font-weight: bold;
      }

      .att-progress-bg {
        background: rgba(255, 255, 255, 0.05);
        height: 6px;
        border-radius: 4px;
        overflow: hidden;
      }

      .att-progress-bar {
        height: 100%;
        border-radius: 4px;
      }

      /* Fingerprint graphic placeholder */
      .att-biometric-widget {
        background: rgba(22, 44, 78, 0.4);
        border: 1px solid rgba(227, 242, 253, 0.05);
        border-radius: 12px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .att-fingerprint-box {
        width: 40px;
        height: 40px;
        background: rgba(46, 125, 50, 0.1);
        border: 1px solid rgba(46, 125, 50, 0.3);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--att-green);
        position: relative;
        overflow: hidden;
      }

      .att-fingerprint-scan-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--att-green);
        box-shadow: 0 0 8px var(--att-green);
        animation: att-scan 2s linear infinite;
      }

      @keyframes att-scan {
        0% { top: 0%; }
        50% { top: 100%; }
        100% { top: 0%; }
      }

      /* Line Chart styling using SVG path */
      .att-line-chart {
        width: 100%;
        height: 45px;
      }

      /* Floating widgets */
      .att-overlay-widget {
        position: absolute;
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
        pointer-events: none;
        font-size: 0.65rem;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .att-ow-absent {
        background: var(--att-red);
        color: var(--att-white);
        top: 24px;
        left: -15px;
        animation: att-float-1 5s ease-in-out infinite;
      }

      .att-ow-late {
        background: var(--att-orange);
        color: var(--att-white);
        top: 90px;
        right: -20px;
        animation: att-float-2 4.5s ease-in-out infinite;
      }

      .att-ow-bio {
        background: var(--att-green);
        color: var(--att-white);
        bottom: 24px;
        left: -20px;
        animation: att-float-3 5.5s ease-in-out infinite;
      }

      .att-ow-viewed {
        background: var(--att-navy-light);
        color: var(--att-white);
        bottom: 70px;
        right: -15px;
        animation: att-float-4 4.8s ease-in-out infinite;
      }

      @keyframes att-float-1 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
      }
      @keyframes att-float-2 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }
      @keyframes att-float-3 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-7px); }
      }
      @keyframes att-float-4 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
      }

      /* Mobile Notification Preview */
      .att-mobile-scene {
        background: #081220;
        border-radius: 28px;
        border: 4px solid #162C4E;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
        padding: 16px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .att-mobile-time {
        text-align: center;
        color: var(--att-white);
        font-weight: 800;
        font-size: 1.1rem;
        margin-top: 4px;
        letter-spacing: 0.5px;
      }

      .att-mobile-notif {
        background: rgba(22, 44, 78, 0.85);
        border: 1px solid rgba(227, 242, 253, 0.08);
        border-radius: 14px;
        padding: 10px 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        gap: 4px;
        animation: att-pulse-bubble 3s ease-in-out infinite alternate;
      }

      @keyframes att-pulse-bubble {
        0% { transform: scale(1); }
        100% { transform: scale(1.015); border-color: rgba(255, 214, 10, 0.2); }
      }

      .att-notif-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.6rem;
        font-weight: 800;
      }

      .att-notif-title {
        font-size: 0.725rem;
        font-weight: 800;
        color: var(--att-white);
      }

      .att-notif-body {
        font-size: 0.65rem;
        color: var(--att-text-muted);
        line-height: 1.3;
      }

      /* Feature Cards Grid (Right Column Bottom) */
      .att-feature-card {
        background: rgba(22, 44, 78, 0.3);
        border: 1px solid rgba(227, 242, 253, 0.06);
        border-radius: 20px;
        padding: 20px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      }

      .att-feature-card:hover {
        transform: translateY(-5px);
        background: rgba(22, 44, 78, 0.5);
        border-color: rgba(227, 242, 253, 0.15);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(227, 242, 253, 0.1);
      }

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

      @media (max-width: 640px) {
        .att-grid-cards {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 1024px) {
        .att-dashboard-scene {
          padding: 10px;
        }
        .att-overlay-widget {
          position: static !important;
          animation: none !important;
          transform: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(255, 255, 255, 0.05);
          background: rgba(22, 44, 78, 0.4);
        }
        .att-widgets-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
          margin-top: 16px;
        }
      }

      /* Workflow Strip */
      .att-flow-strip {
        background: rgba(22, 44, 78, 0.4);
        border: 1px solid rgba(227, 242, 253, 0.08);
        border-radius: 24px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
      }

      .att-flow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        width: 22%;
      }

      .att-flow-step-num {
        background: rgba(255, 255, 255, 0.05);
        color: var(--att-yellow);
        font-weight: 800;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 50px;
        text-transform: uppercase;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .att-flow-arrow {
        color: rgba(227, 242, 253, 0.2);
        font-size: 1.5rem;
        font-weight: bold;
      }

      @media (max-width: 768px) {
        .att-flow-strip {
          flex-direction: column;
          gap: 16px;
          padding: 24px;
        }
        .att-flow-item {
          width: 100%;
        }
        .att-flow-arrow {
          transform: rotate(90deg);
        }
      }

      /* Trust banner */
      .att-trust-banner {
        background: linear-gradient(135deg, rgba(214, 40, 40, 0.1) 0%, rgba(46, 125, 50, 0.1) 100%);
        border: 1px solid rgba(227, 242, 253, 0.08);
        border-radius: 24px;
        padding: 24px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      /* Button styles */
      .btn-att-primary {
        background: linear-gradient(135deg, var(--att-red) 0%, var(--att-orange) 100%);
        color: var(--att-white);
        box-shadow: 0 4px 15px rgba(214, 40, 40, 0.3);
        transition: all 0.3s ease;
      }

      .btn-att-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(214, 40, 40, 0.5);
      }

      .btn-att-secondary {
        background: transparent;
        color: var(--att-white);
        border: 2px solid rgba(227, 242, 253, 0.2);
        transition: all 0.3s ease;
      }

      .btn-att-secondary:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--att-white);
        transform: translateY(-2px);
      }