:root{
      --red:#e50914;
      --red2:#b80610;
      --black:#070707;
      --panel:#111111;
      --panel2:#171717;
      --line:rgba(255,255,255,.09);
      --muted:#a5a5a5;
      --white:#fff;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,Segoe UI,Arial,sans-serif;
      color:#fff;
      background:
        radial-gradient(circle at 75% 12%,rgba(229,9,20,.18),transparent 28%),
        radial-gradient(circle at 15% 45%,rgba(229,9,20,.07),transparent 25%),
        #050505;
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}
    .navbar{
      background:rgba(5,5,5,.78);
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--line);
    }
    .brand{
      display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px
    }
    .brand-mark{
      width:38px;height:38px;border-radius:10px;background:var(--red);
      display:grid;place-items:center;box-shadow:0 0 28px rgba(229,9,20,.3)
    }
    .brand small{display:block;color:#999;font-size:9px;letter-spacing:2px;font-weight:700}
    .nav-link{color:#aaa!important;font-size:14px}
    .nav-link:hover{color:#fff!important}

    .btn-red{
      background:var(--red);color:#fff;border:1px solid var(--red);
      padding:12px 20px;border-radius:10px;font-weight:700;
      box-shadow:0 10px 30px rgba(229,9,20,.18);
      transition:.25s
    }
    .btn-red:hover{background:#ff1a25;color:#fff;transform:translateY(-2px)}
    .btn-outline{
      border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
      color:#fff;padding:12px 20px;border-radius:10px;font-weight:700
    }
    .btn-outline:hover{background:rgba(255,255,255,.09);color:#fff}

    .hero{padding:125px 0 75px;position:relative}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:#ff5a61;font-size:12px;font-weight:800;letter-spacing:2px;
      text-transform:uppercase;margin-bottom:18px
    }
    .eyebrow i{font-size:8px}
    h1{
      font-size:clamp(42px,6vw,78px);line-height:.98;font-weight:850;
      letter-spacing:-3px;margin:0 0 24px;max-width:850px
    }
    h1 span{color:var(--red)}
    .hero-copy{font-size:18px;line-height:1.75;color:#aaa;max-width:680px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

    .hero-card{
      position:relative;border:1px solid var(--line);border-radius:22px;
      background:linear-gradient(145deg,#151515,#0b0b0b);
      padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.5)
    }
    .window-top{display:flex;align-items:center;gap:7px;padding:2px 2px 14px}
    .dot{width:8px;height:8px;border-radius:50%;background:#444}
    .mock{
      min-height:390px;border:1px solid var(--line);border-radius:15px;
      background:#090909;overflow:hidden
    }
    .mock-head{
      padding:15px 17px;border-bottom:1px solid var(--line);
      display:flex;justify-content:space-between;align-items:center
    }
    .mock-body{display:grid;grid-template-columns:145px 1fr;min-height:330px}
    .mock-side{border-right:1px solid var(--line);padding:13px}
    .side-item{padding:9px 10px;border-radius:7px;color:#777;font-size:11px;margin-bottom:3px}
    .side-item.active{background:rgba(229,9,20,.13);color:#ff6970}
    .mock-main{padding:17px}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .kpi{background:#111;border:1px solid var(--line);border-radius:10px;padding:12px}
    .kpi b{font-size:19px}.kpi small{display:block;color:#777;font-size:9px;margin-top:3px}
    .drawing-row{
      margin-top:10px;padding:12px;background:#111;border:1px solid var(--line);
      border-radius:9px;display:grid;grid-template-columns:1fr 70px 75px;gap:8px;align-items:center
    }
    .drawing-row strong{font-size:11px}.drawing-row small{font-size:9px;color:#777;display:block}
    .status{font-size:8px;padding:5px 7px;border-radius:20px;text-align:center;background:rgba(229,9,20,.13);color:#ff6d73}
    .rev{font-size:10px;color:#aaa;text-align:right}

    .section{padding:90px 0}
    .section-label{color:#ff5a61;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:2px}
    .section-title{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-1.5px;margin:10px 0 15px}
    .section-copy{color:#999;line-height:1.75;max-width:720px}

    .feature{
      height:100%;padding:27px;border:1px solid var(--line);border-radius:17px;
      background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
      transition:.25s
    }
    .feature:hover{transform:translateY(-5px);border-color:rgba(229,9,20,.38)}
    .icon{
      width:48px;height:48px;border-radius:12px;background:rgba(229,9,20,.12);
      color:#ff4d55;display:grid;place-items:center;font-size:19px;margin-bottom:20px
    }
    .feature h4{font-size:18px;margin-bottom:9px}
    .feature p{color:#8e8e8e;font-size:14px;line-height:1.7;margin:0}

    .workflow{
      position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:45px
    }
    .workflow:before{
      content:"";position:absolute;left:9%;right:9%;top:29px;height:1px;background:rgba(229,9,20,.45)
    }
    .step{position:relative;text-align:center}
    .step-num{
      width:58px;height:58px;margin:auto;border-radius:50%;display:grid;place-items:center;
      background:#0d0d0d;border:1px solid rgba(229,9,20,.5);color:#ff5961;
      font-weight:800;position:relative;z-index:2
    }
    .step h6{margin-top:15px;margin-bottom:6px}
    .step p{color:#777;font-size:12px;line-height:1.5}

    .modules{
      border:1px solid var(--line);border-radius:22px;background:#0c0c0c;overflow:hidden
    }
    .module-row{
      display:flex;align-items:center;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line)
    }
    .module-row:last-child{border-bottom:0}
    .module-row i{width:28px;color:#ff4b53}
    .module-row span{color:#999;font-size:14px;margin-left:auto}

    .cta{
      padding:75px 30px;text-align:center;border:1px solid rgba(229,9,20,.25);
      border-radius:24px;background:
      radial-gradient(circle at 50% 0,rgba(229,9,20,.16),transparent 45%),#0b0b0b
    }

    footer{border-top:1px solid var(--line);padding:28px 0;color:#777;font-size:12px}
    .footer-red{color:#e50914;font-weight:800}

    @media(max-width:991px){
      .hero{padding-top:105px}
      .workflow{grid-template-columns:1fr;gap:22px}
      .workflow:before{display:none}
      .mock-body{grid-template-columns:100px 1fr}
    }
    @media(max-width:575px){
      h1{letter-spacing:-2px}
      .hero-copy{font-size:16px}
      .mock{min-height:320px}
      .mock-body{min-height:260px}
      .kpis{grid-template-columns:1fr}
      .drawing-row{grid-template-columns:1fr 60px}
      .drawing-row .rev{display:none}
      .section{padding:65px 0}
    }