:root{--bg-deep:#090408;--bg-card:#10080E;--bg-card-hover:#180F16;
      --brand:#EF4444;--brand2:#F97316;--accent:#FBBF24;--purple:#DC2626;
      --text-1:#FFFFFF;--text-2:#CBD5E1;--text-3:#64748B;
      --border-subtle:rgba(239,68,68,0.12);--border-glow:rgba(239,68,68,0.3);
      --shadow-glow:0 4px 40px rgba(239,68,68,0.15);--radius:14px;--radius-lg:20px}
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg-deep);color:var(--text-2);line-height:1.65;overflow-x:hidden}
    body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;
      background:radial-gradient(ellipse 1000px 600px at 30% 0%,rgba(239,68,68,0.07),transparent),
                 radial-gradient(ellipse 900px 500px at 70% 30%,rgba(249,115,22,0.05),transparent),
                 radial-gradient(ellipse 800px 500px at 50% 80%,rgba(251,191,36,0.04),transparent)}
    .container{max-width:1260px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

    /* Nav */
    .navbar{position:sticky;top:0;z-index:999;background:rgba(9,4,8,0.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--border-subtle)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1260px;margin:0 auto;padding:0 32px;height:60px}
    .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
    .nav-logo-box{width:36px;height:36px;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:900}
    .nav-logo span{color:#fff;font-size:18px;font-weight:800}
    .nav-links{display:flex;gap:28px;list-style:none}
    .nav-links a{color:var(--text-2);text-decoration:none;font-size:13px;font-weight:500;transition:.3s}
    .nav-links a:hover{color:var(--brand)}
    .nav-btns{display:flex;gap:10px}
    .btn-sm-out{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff;padding:8px 18px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:600;transition:.3s}
    .btn-sm-out:hover{border-color:var(--brand);color:var(--brand)}
    .btn-sm-fill{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff;padding:8px 18px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:600;transition:.3s;box-shadow:0 2px 12px rgba(239,68,68,0.3)}
    .btn-sm-fill:hover{box-shadow:0 4px 20px rgba(239,68,68,0.45);transform:translateY(-1px)}

    /* Hero */
    .hero{padding:80px 0 60px;text-align:center}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);border-radius:50px;padding:7px 18px;margin-bottom:24px;font-size:12px;color:var(--brand);font-weight:600;letter-spacing:1px}
    .hero-badge .dot{width:7px;height:7px;background:#EF4444;border-radius:50%;animation:pulse-dot 2s infinite;box-shadow:0 0 10px #EF4444}
    @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.3}}
    .hero h1{font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1.15;color:var(--text-1);margin-bottom:16px}
    .hero h1 .grad{background:linear-gradient(135deg,#EF4444,#F97316,#FBBF24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-desc{font-size:17px;color:var(--text-3);max-width:680px;margin:0 auto 30px;line-height:1.7}
    .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
    .btn-lg{font-size:14px;font-weight:700;padding:13px 32px;border-radius:10px;border:none;cursor:pointer;transition:.3s}
    .btn-primary{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;box-shadow:0 4px 24px rgba(239,68,68,0.35)}
    .btn-primary:hover{box-shadow:0 6px 32px rgba(239,68,68,0.5);transform:translateY(-2px)}
    .btn-ghost{background:rgba(255,255,255,0.04);color:#fff;border:1px solid rgba(255,255,255,0.18)}
    .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

    /* KPI strip */
    .kpi-strip{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
    .kpi-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:22px 28px;text-align:center;min-width:160px;transition:.35s}
    .kpi-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-3px)}
    .kpi-card .val{font-size:34px;font-weight:900;background:linear-gradient(135deg,#EF4444,#F97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .kpi-card .val.green{background:linear-gradient(135deg,#10B981,#34D399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .kpi-card .val.amber{background:linear-gradient(135deg,#F59E0B,#FBBF24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .kpi-card .lbl{font-size:12px;color:var(--text-3);margin-top:4px;letter-spacing:0.5px}

    /* Section */
    .section{padding:80px 0}
    .sec-label{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--brand);margin-bottom:12px;font-family:'JetBrains Mono',monospace}
    .sec-title{font-size:clamp(26px,3.4vw,40px);font-weight:900;color:var(--text-1);margin-bottom:12px;line-height:1.2}
    .sec-title .grad{background:linear-gradient(135deg,#EF4444,#F97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .sec-desc{font-size:15px;color:var(--text-3);max-width:600px;line-height:1.6}
    .sec-center{text-align:center}.sec-center .sec-desc{margin:0 auto}

    /* Attack type cards */
    .attack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:40px}
    .attack-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;padding:24px;transition:.35s;position:relative}
    .attack-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(239,68,68,0.03),transparent);pointer-events:none}
    .attack-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateX(4px)}
    .attack-card .severity{font-size:10px;font-weight:700;padding:4px 10px;border-radius:50px;display:inline-block;margin-bottom:12px;letter-spacing:0.5px}
    .attack-card h4{font-size:17px;font-weight:800;color:var(--text-1);margin-bottom:8px}
    .attack-card p{font-size:13px;color:var(--text-3);line-height:1.6}

    /* Detection pipeline */
    .pipeline{display:flex;align-items:stretch;gap:0;margin-top:40px;flex-wrap:wrap;justify-content:center}
    .pipe-step{flex:1;min-width:200px;max-width:280px;background:var(--bg-card);border:1px solid var(--border-subtle);padding:32px 22px;text-align:center;position:relative;transition:.35s}
    .pipe-step:first-child{border-radius:16px 0 0 16px}
    .pipe-step:last-child{border-radius:0 16px 16px 0}
    .pipe-step:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);z-index:2}
    .pipe-num{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;margin-bottom:14px}
    .pipe-step h4{font-size:15px;font-weight:800;color:var(--text-1);margin-bottom:8px}
    .pipe-step p{font-size:12px;color:var(--text-3);line-height:1.5}
    .pipe-arrow{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:var(--bg-card-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:18px;z-index:3;border:1px solid var(--border-subtle)}

    /* Detection techniques table */
    .detect-table-wrap{overflow-x:auto;margin-top:36px}
    .detect-table{width:100%;border-collapse:collapse;min-width:700px}
    .detect-table th{background:rgba(239,68,68,0.06);padding:14px 18px;text-align:left;font-size:13px;font-weight:700;color:var(--text-1);border-bottom:2px solid var(--border-subtle)}
    .detect-table th:first-child{border-radius:12px 0 0 0}.detect-table th:last-child{border-radius:0 12px 0 0}
    .detect-table td{padding:13px 18px;font-size:13px;border-bottom:1px solid var(--border-subtle);color:var(--text-2)}
    .detect-table tr:hover td{background:rgba(239,68,68,0.03)}
    .badge-pass{color:#10B981;font-weight:700}
    .badge-fail{color:#EF4444;font-weight:700}

    /* Real cases */
    .cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;margin-top:40px}
    .case-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:.35s}
    .case-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}
    .case-header{padding:18px 22px;background:rgba(239,68,68,0.05);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:12px}
    .case-header .case-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(239,68,68,0.12);color:#EF4444}
    .case-body{padding:20px 22px}
    .case-body h4{font-size:16px;font-weight:800;color:var(--text-1);margin-bottom:10px}
    .case-body p{font-size:13px;color:var(--text-3);line-height:1.65}
    .case-tag{display:inline-block;font-size:10px;padding:4px 10px;border-radius:50px;margin-top:12px;font-weight:700;letter-spacing:0.5px}

    /* Management panel */
    .mgmt-panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;margin-top:40px}
    .mgmt-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-subtle)}
    .mgmt-tab{padding:14px 24px;font-size:13px;font-weight:700;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;transition:.3s;background:transparent;border-top:none;border-left:none;border-right:none}
    .mgmt-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
    .mgmt-tab:hover{color:var(--text-2)}
    .mgmt-content{padding:28px}
    .mgmt-content .rule-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
    .rule-status{width:10px;height:10px;border-radius:50%}
    .rule-status.active{background:#10B981;box-shadow:0 0 8px #10B981}
    .rule-status.inactive{background:#64748B}
    .rule-info{flex:1}
    .rule-info h5{font-size:14px;color:var(--text-1);font-weight:700}
    .rule-info p{font-size:12px;color:var(--text-3);margin-top:2px}
    .toggle-sw{width:48px;height:26px;border-radius:13px;cursor:pointer;position:relative;transition:.3s;border:none}
    .toggle-sw.on{background:linear-gradient(135deg,#EF4444,#DC2626)}
    .toggle-sw.off{background:#334155}
    .toggle-sw::after{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:2px;transition:.3s}
    .toggle-sw.on::after{left:24px}.toggle-sw.off::after{left:2px}

    /* FAQ */
    .faq-list{max-width:800px;margin:36px auto 0}
    .faq-item{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:.3s}
    .faq-item:hover{border-color:var(--border-glow)}
    .faq-q{padding:18px 22px;font-weight:700;color:var(--text-1);font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
    .faq-q::after{content:'+';font-size:20px;color:var(--brand);transition:.3s}
    .faq-item.open .faq-q::after{content:'−'}
    .faq-a{padding:0 22px 18px;font-size:13px;color:var(--text-3);line-height:1.7;display:none}
    .faq-item.open .faq-a{display:block}

    /* CTA */
    .cta-banner{background:linear-gradient(135deg,rgba(239,68,68,0.08),rgba(249,115,22,0.1));border:1px solid rgba(239,68,68,0.2);border-radius:24px;padding:56px 40px;text-align:center;margin-top:60px}
    .cta-banner h3{font-size:clamp(24px,3vw,36px);font-weight:900;color:var(--text-1);margin-bottom:12px}
    .cta-banner p{font-size:15px;color:var(--text-3);margin-bottom:24px}

    .footer{background:var(--bg-card);border-top:1px solid var(--border-subtle);padding:40px 0 24px;margin-top:60px;text-align:center;font-size:12px;color:var(--text-3)}

    @media (max-width:768px){
      .container{padding:0 16px}
      .hero{padding:56px 0 36px}
      .pipeline{flex-direction:column;align-items:center}
      .pipe-step{max-width:100%;border-radius:12px!important;margin-bottom:8px}
      .pipe-arrow{display:none}
      .cases-grid{grid-template-columns:1fr}
      .nav-links{display:none}
      .mgmt-tabs{overflow-x:auto}
    }