:root {
     --primary-blue: #38BDF8;
     --cyan-accent: #00D4FF;
     --dark-bg: #020617;
     --card-bg: #141B2E;
     --card-hover: #1A2338;
     --text-primary: #FFFFFF;
     --text-secondary: #94A3B8;
     --danger: #FF4757;
     --warning: #FFA502;
     --success: #26DE81;
     --gradient-start: #00A1E0;
     --gradient-end: #0066FF;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: sans-serif, 'Outfit', sans-serif;
     background: var(--dark-bg);
     color: var(--text-primary);
     line-height: 1.6;
     overflow-x: hidden;
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 @keyframes float {

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

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

 @keyframes shimmer {
     0% {
         background-position: -1000px 0;
     }

     100% {
         background-position: 1000px 0;
     }
 }

 .fade-in {
     animation: fadeInUp 0.8s ease-out forwards;
     opacity: 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;
 }

 /* Navbar Custom */
 .navbar-custom {
     background: rgba(15, 23, 42, 0.6);
     border: 1px solid #1E293B;
     backdrop-filter: blur(6px);

     border-bottom: 1px solid #1E293B;
     padding: 1rem 0;
     transition: all 0.3s;
 }

 .navbar-custom.scrolled {
     background: rgba(10, 15, 30, 0.98);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

 .navbar-brand {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--text-primary) !important;
 }

 .logo-icon {
     width: 32px;
     height: 32px;
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 900;
 }

 .nav-link {
     color: var(--text-secondary) !important;
     font-weight: 500;
     transition: color 0.3s;
     margin: 0 0.5rem;
 }

 .nav-link:hover {
     color: var(--text-primary) !important;
 }

 /* Buttons */
 .btn-primary-custom {
     background: #0EA5E9;
     border: none;
     color: white;
     padding: 17px 32px;
     border-radius: 12px;
     font-weight: 600;
     transition: all 0.3s;
     /* Button */


 }

 .intelligent-alert-title {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 8px 17px;
     background: #1E293B;
     font-size: 13px;
     color: #94A3B8;
     border-bottom: 1px solid #334155;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
 }

 .intelligent_card.active {
     border-right: 3px solid #3B82F6;
 }

 .intelligent_card {
     flex-direction: row;
     /* align-items: center; */
     padding: 11px 32px 11px 24px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(6px);
     border-radius: 0px;
     color: white;
 }

 .btn-primary-custom:hover {
     background: #2175C0;
     color: white;
 }

 .btn-secondary-custom {
     background: #1E293B;
     border: 1px solid #334155;
     border-radius: 12px;
     padding: 16px 32px;
     color: white;
     font-weight: 600;
     transition: all 0.3s;

 }

 .btn-secondary-custom:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-blue);
     color: var(--text-primary);
 }

 /* Hero Section */
 .hero-section {
     padding: 150px 0 100px;
     min-height: 72vh;
     background: radial-gradient(58.1% 98.19% at 50% 50%, #1E293B 0%, #020617 100%);

 }

 .badge-sf {
     padding: 8px 18px;
     background: rgba(14, 165, 233, 0.1);
     border: 1px solid rgba(14, 165, 233, 0.2);
     border-radius: 21px;
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
     line-height: 16px;
     text-transform: uppercase;
     color: #38BDF8;
 }

 .hero-title {
     font-size: 3.5rem;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.5rem;
     margin-top: 21px;
 }

 .hero-highlight {
     background: var(--primary-blue);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .hero-subtitle {
     color: var(--text-secondary);
     font-size: 1.1rem;
     margin-bottom: 2rem;
     line-height: 1.8;
 }

 .text-secondary {
     --bs-text-opacity: 1;
     /* color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; */
     color: var(--text-secondary) !important;
 }

 .badge-custom {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0 1em 0 0;
     /* background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1); */
     border-radius: 50px;
     font-size: 12px;
     font-weight: 600;
     margin-right: 0.25rem;
 }

 .hero-visual {
     animation: float 6s ease-in-out infinite;
 }

 .laptop-screen {
     background: #1E1E1E;
     border-radius: 12px 12px 0 0;
     padding: 1.5rem;
     border: 3px solid #333;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
 }

 .laptop-base {
     height: 30px;
     background: linear-gradient(to bottom, #444, #222);
     border-radius: 0 0 12px 12px;
     position: relative;
 }

 .laptop-base::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: #555;
     border-radius: 2px;
 }

 /* Section Styling */
 .section-custom {
     padding: 100px 0;
 }

 .section-title {
     font-size: 2.8rem;
     font-weight: 800;
     margin-bottom: 1rem;
     text-align: center;
 }

 .section-subtitle {
     color: var(--text-secondary);
     font-size: 1.1rem;
     text-align: center;
     margin: 0 auto 4rem;
     max-width: 700px;
 }

 /* Attack Cards */
 .attack-card {
     /* Overlay+Border+OverlayBlur */

     box-sizing: border-box;

     /* Auto layout */
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 24px;
     width: 100%;
     height: 100%;

     background: rgba(15, 23, 42, 0.6);
     border: 1px solid rgba(51, 65, 85, 0.5);
     box-shadow: 0px 0px 20px rgba(56, 189, 248, 0.1);
     backdrop-filter: blur(6px);
     /* Note: backdrop-filter has minimal browser support */
     border-radius: 16px;

     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 1;
 }

 .attack-card:hover {
     transform: translateY(-5px);
     background: var(--card-hover);
     border-color: #0EA5E9;
 }

 .alert-danger {
     /* Overlay+Border */

     box-sizing: border-box;

     /* Auto layout */
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 16px;
     background: rgba(239, 68, 68, 0.1);
     border: 1px solid rgba(239, 68, 68, 0.2);
     border-radius: 8px;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
 }

 .alert-warning {
     /* Overlay+Border */

     box-sizing: border-box;

     /* Auto layout */
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 16px;
     background: rgba(245, 158, 11, 0.1);
     border: 1px solid rgba(245, 158, 11, 0.2);
     border-radius: 8px;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;


 }

 .alert>div>span {
     font-size: 17px;
     font-weight: 600;
     color: #ffffff;
 }

 .card-icon-large {
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     font-size: 1.5rem;
 }

 .severity-badge {
     padding: 0.4rem 0.8rem;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 700;
 }

 .severity-critical {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 2px 8px;
     background: #EF4444;
     border-radius: 4px;
     flex: none;
     order: 1;
     flex-grow: 0;
     color: white;
 }

 .severity-warning {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 2px 8px;
     background: #F59E0B;
     border-radius: 4px;
     flex: none;
     order: 1;
     flex-grow: 0;
     color: white;
 }

 /* Stats Bar */
 .stats-bar {
     background: var(--card-bg);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 1.5rem 2rem;
 }

 .see-trends {
     font-family: 'Space Mono';
     font-style: normal;
     font-weight: 400;
     font-size: 15.5px;
     line-height: 24px;
     /* identical to box height, or 155% */
     display: flex;
     align-items: center;

     color: #34D399;


     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
 }

 .see-trends:hover {
     color: var(--success);
 }

 /* Coverage Cards */
 .coverage-card {
     padding: 2rem;
     /* transition: all 0.3s; */
     /* text-align: center; */
     height: 100%;
     box-sizing: border-box;
     /* width: 302px; */
     /* height: 210px; */
     background: rgba(15, 23, 42, 0.5);
     border: 1px solid #1E293B;
     border-radius: 12px;
 }

 .coverage-card:hover {
     transform: translateY(-5px);
     background: var(--card-hover);
     border-color: var(--primary-blue);
 }

 .coverage-icon {
     width: 60px;
     height: 60px;
     margin: 0 auto 1.5rem;
     background: linear-gradient(135deg, rgba(0, 161, 224, 0.2), rgba(0, 102, 255, 0.2));
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
 }

 /* Alert Section */
 .alert-section {
     background: linear-gradient(135deg, rgba(0, 161, 224, 0.05), rgba(0, 102, 255, 0.05));
     border-radius: 24px;
     padding: 4rem 2rem;
 }

 .feature-checkbox {
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 0px;
     width: 38px;
     height: 38px;
     border: 1px solid #334155;
     flex: none;
     order: 0;
     flex-grow: 0;
     background: transparent;
     font-family: 'Space Mono';
     font-size: 13px;
 }

 .feature-checkbox::after {
     /* content: '✓';
     color: var(--success);
     font-weight: 700; */
 }

 .alert-visual {
     box-sizing: border-box;
     flex-direction: column;
     align-items: flex-start;
     padding: 0px;
     margin: 0 auto;
     background: rgba(15, 23, 42, 0.6);
     border: 1px solid #334155;
     backdrop-filter: blur(6px);
     border-radius: 8px 8px 0px 0px;
     flex: none;
     order: 1;
     flex-grow: 0;
     height: 100%;
 }

 .alert-item {
     background: rgba(0, 161, 224, 0.1);
     border-left: 3px solid var(--primary-blue);
     padding: 1rem;
     margin-bottom: 1rem;
     border-radius: 8px;
 }

 .alert-item.success-alert {
     border-left-color: var(--success);
 }

 /* Brands */
 .brand-logo {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text-secondary);
     opacity: 0.6;
     transition: all 0.3s;
 }

 .brand-logo:hover {
     opacity: 1;
     color: var(--text-primary);
     transform: scale(1.1);
 }

 /* Lifecycle Cards */
 .lifecycle-card {
     /* Container */

     box-sizing: border-box;

     /* Auto layout */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 0px;
     gap: 18px;
     border-width: 1px 0px 1px 1px;
     border-style: solid;
     border-color: #064165;
     height: 100%;
     text-align: center;

     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
 }


 .lifecycle-card:hover {
     transform: translateY(-5px);
     border-color: var(--primary-blue);
 }

 .step-number {
     /* Overlay+Border */

     box-sizing: border-box;

     /* Auto layout */
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 0px;

     width: 64px;
     height: 64px;

     background: rgba(14, 165, 233, 0.1);
     border: 1px solid rgba(14, 165, 233, 0.3);
     border-radius: 9999px;

     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
     /* 3 */

     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
     font-size: 20px;
     line-height: 28px;
     /* identical to box height, or 140% */
     display: flex;
     align-items: center;
     text-align: center;

     color: #38BDF8;


     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
 }

 .lifecycle-cta {
     color: var(--primary-blue);
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s;
 }

 .lifecycle-cta:hover {
     color: var(--cyan-accent);
 }

 /* Platform Section */
 .platform-section {
     /* Section */

     box-sizing: border-box;

     /* Auto layout */
     align-items: flex-start;
     padding: 80px;



     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(6px);
     /* Note: backdrop-filter has minimal browser support */
     border-radius: 12px;

     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
 }

 .platform-feature {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .feature-number {
     font-weight: 600;
     /* flex-shrink: 0; */
     color: rgba(59, 130, 246, 1);
     font-family: 'Space Mono';
     font-size: 17px;
 }

 .stat-card {
     text-align: center;
     /* margin-bottom: 2rem; */
     /* box-sizing: border-box; */
     /* display: flex; */
     flex-direction: column;
     align-items: center;
     padding: 24px;
     /* position: absolute; */
     left: 0px;
     right: 267.5px;
     top: 0px;
                        background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(6px);
     border-radius: 12px;
 }

 .stat-number {
     font-size: 2.1rem;
     font-weight: 800;
     /* background: linear-gradient(135deg, var(--cyan-accent), var(--primary-blue)); */
     /* -webkit-background-clip: text; */
     /* -webkit-text-fill-color: transparent; */
     background-clip: text;
     /* margin-bottom: 0.5rem; */
     color: white;
     line-height: 36px;
 }

 .stat-score {
     /* flex-shrink: 0; */
     color: white;
     font-family: 'Space Mono';
     font-size: 12px;
     display: inline-block;
 }

 .progress-custom {
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     margin: 1rem 0;
 }

 .progress-bar-custom {
     background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
     animation: shimmer 2s infinite;
     background-size: 200% 100%;
 }

 .code-preview {
     background: #1E1E1E;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 1.5rem;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.85rem;
     line-height: 1.8;
 }

 /* Footer */
 footer {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 3rem 0;
     margin-top: 5rem;
 }

 .footer-logo {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .footer-links a {
     color: var(--text-secondary);
     text-decoration: none;
     transition: color 0.3s;
     margin: 0 1rem;
 }

 .footer-links a:hover {
     color: var(--text-primary);
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.5rem;
     }

     .section-title {
         font-size: 2rem;
     }

     .hero-section {
         padding: 120px 0 60px;
     }
 }