:root{
      --bg:#030303;
      --accent:#FF0039;
      --accent-soft:rgba(235,0,25,.22);
      --accent-soft2:rgba(235,0,25,.12);
      --card-bg:#2B2B2B;
      --text:#fff;
      --text-dim:#777;
      --line:#2B2B2B;
      --font-main:'Inter',sans-serif;
      --font-mono:'JetBrains Mono',monospace;
    }

    *{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
    body{background:var(--bg);color:var(--text);font-family:var(--font-main);overflow-x:hidden}

    /* --- VERTICAL LINES (only center used in this version) --- */
    .v-line{position:fixed;top:0;bottom:0;width:1px;background:var(--line);z-index:2;pointer-events:none}
    .v-line-2{left:50%}

    /* --- CURSOR DOT --- */
    #cursor-dot{width:5px;height:5px;background:#fff;position:fixed;border-radius:50%;pointer-events:none;z-index:10000}

    /* --- NAV --- */
    .nav-container{position:fixed;top:30px;left:0;width:100%;display:flex;justify-content:center;z-index:1000}
    .nav-pill{
      background:rgba(10,10,10,.6);
      backdrop-filter:blur(20px);
      border:1px solid var(--line);
      padding:5px;
      border-radius:100px;
      display:flex;align-items:center;
      box-shadow:0 10px 30px rgba(0,0,0,.5)
    }
    .nav-item{
      color:var(--text-dim);
      text-decoration:none;
      font-size:.7rem;
      padding:10px 22px;
      border-radius:100px;
      transition:.3s cubic-bezier(.4,0,.2,1);
      text-transform:uppercase;
      letter-spacing:1px
    }
    /*.nav-item.active{background:var(--accent);color:#fff;box-shadow:0 0 15px rgba(235,0,25,.5)}*/
    .nav-item:hover:not(.active){color:#fff;background:rgba(255,255,255,.05)}

      /* All active nav items now share the Red style */
    .nav-item.active {
      background: #FF0039 !important; /* Force the red color */
      color: #fff !important;
      box-shadow: 0 0 15px rgba(255, 0, 57, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Ensure the bold "INS" text doesn't stay red on a red background */
    .nav-item.active b {
      color: #fff !important;
    }

    /* --- COMMON --- */
    .label-mono{
      font-family:var(--font-mono);
      font-size:.6rem;
      color:var(--text-dim);
      text-transform:uppercase;
      margin-bottom:25px;
      display:block;
      letter-spacing:3px
    }
    .section-header{margin-bottom:80px}
    .section-title{font-size:2.8rem;font-weight:200;margin-top:15px;letter-spacing:-1px}

    /* --- HERO --- */
    .hero{
      height:100vh;
      display:flex;
      align-items:center;
      padding:0 10%;
      position:relative;
      z-index:10
    }
    .hero-bg-wrapper{position:absolute;inset:0;height:100vh;z-index:0;overflow:hidden}
    .hero-bg-image{width:100%;height:100%;object-fit:cover;filter:brightness(.25) saturate(.8)}
    .hero-overlay{
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 50% 50%,transparent 0%,var(--bg) 90%),
        linear-gradient(to bottom,transparent,var(--accent) 250%);
    }
    .hero-content{max-width:650px;position:relative;z-index:10}
    h1{font-size:clamp(2.5rem,6vw,4.2rem);font-weight:200;line-height:1.05;letter-spacing:-2px;margin-bottom:30px}
    h1 b{font-weight:600;color:#fff}

    .module-render{
      position:absolute;right:8%;top:45%;
      transform:translateY(-50%);
      width:38vw;z-index:15
    }
    .module-render img{width:100%}

    .hero-metrics{
      position:absolute;
      bottom:80px;left:10%;right:10%;
      display:flex;gap:80px;
      z-index:20
    }
    .metric-item{border-left:1px solid var(--accent);padding-left:20px}
    .metric-title{display:block;font-size:1.1rem;font-weight:300;margin-bottom:5px}
    .metric-sub{display:block;font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}

    /* --- CTA BUTTON (shared) --- */
    .btn-primary{
      display:inline-flex;align-items:center;gap:14px;
      background:var(--accent);
      color:#fff;
      text-decoration:none;
      padding:18px 34px;
      border-radius:4px;
      font-size:.75rem;
      letter-spacing:2px;
      font-weight:600;
      transition:.4s cubic-bezier(.19,1,.22,1);
      border:1px solid transparent;
      cursor:pointer
    }
    .btn-primary:hover{
      background:rgb(220,0,22);
      transform:translateY(-2px);
      box-shadow:0 10px 25px rgba(235,0,25,.25)
    }

    .link-underline{
      color:#fff;font-size:.7rem;letter-spacing:2px;text-decoration:none;
      border-bottom:1px solid var(--accent);padding-bottom:5px
    }

    /* =========================================================
       PRODUCTS
       ========================================================= */
    .products-section{
      min-height:auto;
      padding:140px 10% 80px;
      background:#030303;
      position:relative;
      z-index:10
    }
    .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}

    .product-card{
      position:relative;height:520px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(40px);
      padding:60px 45px;
      display:flex;flex-direction:column;justify-content:flex-start;
      text-decoration:none;overflow:hidden;
      transition:all .6s cubic-bezier(.19,1,.22,1)
    }
    .card-info{margin-top:auto}
    .product-card:hover{
      border-color:var(--accent);
      transform:translateY(-10px);
      background:rgba(255,255,255,.04)
    }
    .card-icon{font-family:var(--font-mono);font-size:2rem;color:#fff;font-weight:200;opacity:.8}
    .card-label{font-family:var(--font-mono);font-size:.65rem;color:#777;text-transform:uppercase;letter-spacing:2px;margin-bottom:15px;display:block}
    .card-title{font-size:1.4rem;font-weight:300;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;color:#fff}
    .card-description{font-size:.85rem;color:#888;line-height:1.6;font-weight:300;justify-content: flex-end;}

    .card-glow{
      position:absolute;bottom:-50px;right:-50px;
      width:200px;height:200px;
      opacity:0;transition:opacity .6s ease;
      pointer-events:none;z-index:2
    }
    .product-card:hover .card-glow{opacity:1}

    .card-bg{
      position:absolute;inset:0;
      background-size:cover;background-position:center;
      opacity:.32;transform:scale(1.02);
      filter:grayscale(1) saturate(.7) brightness(.82) contrast(1.06);
      transition:all .8s cubic-bezier(.19,1,.22,1);
      pointer-events:none;z-index:0
    }
    .card-bg::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,.68))
    }
    .product-card > *:not(.card-bg){position:relative;z-index:2}
    .product-card:hover .card-bg{
      opacity:.46;transform:scale(1.06);
      filter:grayscale(.18) saturate(1.35) brightness(.95) contrast(1.10)
    }

    /* =========================================================
       CAPABILITIES
       ========================================================= */
    .features-section{
      padding:80px 10% 120px;
      background:#030303;
      border-top:1px solid rgba(255,255,255,.05);
      position:relative;z-index:10
    }
    .section-intro{color:#777;max-width:500px;font-weight:300;margin-top:20px;line-height:1.6}
    .features-grid{
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:1px;background:rgba(255,255,255,.08);
      margin-top:80px;border:1px solid rgba(255,255,255,.08)
    }
    .feature-card{
      background:#030303;padding:50px 35px;
      transition:all .4s ease;position:relative;overflow:hidden
    }
    .feature-card::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(circle at top right, rgba(20,20,25,.14), transparent 70%);
      opacity:0;transition:opacity .4s ease
    }
    .feature-card:hover{background:#050505}
    .feature-card:hover::before{opacity:1}
    .feature-icon{width:32px;height:32px;color:var(--accent);margin-bottom:30px;position:relative;z-index:2}
    .feature-title{font-size:1rem;font-weight:400;color:#fff;margin-bottom:15px;letter-spacing:.5px;position:relative;z-index:2}
    .feature-text{font-size:.8rem;color:#777;line-height:1.6;font-weight:300;position:relative;z-index:2}

    /* =========================================================
       FLAGSHIP
       ========================================================= */
    .flagship-section{
      padding:100px 10%;
      background:#030303;color:#fff;
      position:relative;overflow:hidden;
      border-top:1px solid rgba(255,255,255,.05);
      z-index:10
    }
    .flagship-container{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}
    .product-visual{position:relative}
    .image-wrapper{position:relative;padding:40px;display:flex;justify-content:center;align-items:center}
    .main-render{width:100%;max-width:600px;z-index:2}
    .product-glow{
      position:absolute;width:120%;height:120%;
      z-index:1;pointer-events:none
    }
    .spec-title{font-size:3rem;font-weight:200;margin-bottom:50px;letter-spacing:-1px}
    .spec-title b{font-weight:600;color:#fff}
    .specs-list{border-top:1px solid rgba(255,255,255,.1);margin-bottom:50px}
    .spec-row{display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.05)}
    .spec-label{color:#777;font-size:.9rem;font-weight:300}
    .spec-value{color:#fff;font-family:var(--font-mono);font-size:.9rem;letter-spacing:.5px}

    /* =========================================================
       CONFIG / CUSTOMIZATION
       ========================================================= */
    .config-section{
      padding:120px 10%;
      background:#030303;color:#fff;
      border-top:1px solid rgba(255,255,255,.05);
      position:relative;z-index:10
    }
    .config-container{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
    .config-title{font-size:3rem;font-weight:200;margin:20px 0;letter-spacing:-1px}
    .config-title b{color:#fff;font-weight:600}
    .config-description{color:#777;line-height:1.7;margin-bottom:50px;font-weight:300}

    .scale-selector{
      margin-top:40px;
      padding:30px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.05)
    }
    .scale-labels{
      display:flex;justify-content:space-between;
      font-family:var(--font-mono);
      font-size:.6rem;text-transform:uppercase;
      color:#555;margin-bottom:15px
    }
    .config-slider{
      width:100%;
      appearance:none;
      background:rgba(255,255,255,.1);
      height:2px;outline:none
    }
    .config-slider::-webkit-slider-thumb{
      appearance:none;
      width:15px;height:15px;
      background:var(--accent);
      border:2px solid #fff;
      border-radius:50%;
      cursor:pointer;
      box-shadow:0 0 15px rgba(235,0,25,.55)
    }
    .scale-markers{display:flex;justify-content:space-between;margin-top:15px;font-size:.7rem;color:#888}

    .stats-display{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
    .stat-box{
      padding:25px;
      border-left:1px solid var(--accent);
      background:rgba(255,255,255,.01)
    }
    .stat-label{display:block;font-size:.65rem;text-transform:uppercase;color:#555;margin-bottom:10px;letter-spacing:1px}
    .stat-value{font-family:var(--font-mono);font-size:1.4rem;color:#fff}

    .graph-container{position:relative;padding:20px;border:1px dashed rgba(255,255,255,.1)}
    .config-graph{width:100%;height:auto}
    .graph-labels{display:flex;justify-content:space-between;font-size:.6rem;color:#444;margin-top:10px}

    /* =========================================================
       ABOUT
       ========================================================= */
    .about-section{
      padding:140px 10%;
      background:#030303;
      position:relative;overflow:hidden;
      border-top:1px solid rgba(255,255,255,.05);
      z-index:10
    }
    .about-container{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:100px;
      align-items:flex-start
    }

    .mission-text{
      font-size:clamp(2rem,4vw,3.5rem);
      font-weight:200;
      line-height:1.1;
      margin-top:30px;
      letter-spacing:-2px;
      color:#eee
    }
    .mission-text span{
      color:#fff;
      font-weight:500;
      border-bottom:2px solid var(--accent);
    }
    .mission-sub{
      margin-top:40px;
      font-size:1.1rem;
      color:#777;
      max-width:450px;
      line-height:1.6;
      font-weight:300
    }
    .mission-actions{margin-top:35px;display:flex;gap:14px;flex-wrap:wrap}

    .btn-ghost{
      display:inline-flex;align-items:center;gap:12px;
      padding:18px 34px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.02);
      color:#fff;text-decoration:none;
      font-size:.75rem;letter-spacing:2px;font-weight:600;
      transition:.4s cubic-bezier(.19,1,.22,1)
    }
    .btn-ghost:hover{
      border-color:rgba(235,0,25,.55);
      box-shadow:0 10px 25px rgba(235,0,25,.12);
      transform:translateY(-2px)
    }

    .heritage-block{
      position:relative;
      padding:60px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.05);
      backdrop-filter:blur(20px)
    }
    .heritage-title{font-size:1.8rem;font-weight:300;margin-bottom:25px}
    .heritage-description{font-size:.9rem;color:#888;line-height:1.8;margin-bottom:30px;font-weight:300}
    .heritage-quote{
      font-family:var(--font-mono);
      font-size:.75rem;
      color:#fff;
      padding-left:20px;
      border-left:1px solid var(--accent);
      line-height:1.6;
      text-transform:uppercase;
      letter-spacing:1px
    }
    .heritage-stats{
      display:flex;gap:40px;
      margin-top:40px;padding-top:40px;
      border-top:1px solid rgba(255,255,255,.05)
    }
    .h-val{display:block;font-size:1.2rem;font-weight:600;color:#fff}
    .h-lab{font-size:.6rem;text-transform:uppercase;color:#555;letter-spacing:1px}

    .about-glow{
      position:absolute;
      top:-20%;
      right:-20%;
      width:300px;height:300px;
      z-index:-1
    }

    /* =========================================================
       FOOTER / CONTACT
       ========================================================= */
    .site-footer{
      padding:120px 10% 60px;
      background:#020202;
      border-top:1px solid rgba(255,255,255,.05);
      position:relative;overflow:hidden;
      z-index:10
    }
    .footer-container{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:120px;
      position:relative;z-index:2
    }
    .footer-title{
      font-size:3rem;
      font-weight:200;
      margin:20px 0 50px;
      letter-spacing:-1px
    }
    .footer-title b{font-weight:600}

    .contact-form{display:flex;flex-direction:column;gap:25px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .input-group{display:flex;flex-direction:column;gap:8px}
    .input-group label{
      font-family:var(--font-mono);
      font-size:.65rem;
      text-transform:uppercase;
      color:#555;
      letter-spacing:1px
    }
    .input-group input,
    .input-group select,
    .input-group textarea{
      background:rgba(235,0,25,.06);
      border:1px solid rgba(255,255,255,.05);
      padding:15px;
      color:#fff;
      font-family:var(--font-main);
      font-size:.9rem;
      outline:none;
      transition:.3s
    }
    .input-group input:focus,
    .input-group textarea:focus,
    .input-group select:focus{
      border-color:rgba(235,0,25,.8);
      background:rgba(235,0,25,.10)
    }

    .submit-btn{
      background:var(--accent);
      color:#fff;
      border:none;
      padding:20px 40px;
      width:fit-content;
      display:flex;align-items:center;gap:15px;
      font-family:var(--font-main);
      font-weight:600;
      font-size:.75rem;
      letter-spacing:2px;
      cursor:pointer;
      transition:.4s cubic-bezier(.19,1,.22,1)
    }
    .submit-btn:hover{
      background:rgb(220,0,22);
      transform:translateY(-3px);
      box-shadow:0 10px 30px rgba(235,0,25,.30)
    }

    .info-block{
      margin-bottom:40px
    }
    .info-label{
      font-family:var(--font-mono);
      font-size:.65rem;
      text-transform:uppercase;
      color:var(--accent);
      margin-bottom:10px;
      letter-spacing:1px
    }

    .info-text a {
    font-size:1rem;
    color:#888;
    line-height:1.6;
    font-weight:300;
    text-decoration: none;   
    }

    
    .info-text a:hover {
        text-decoration: underline; 
        opacity: 0.8;              
    }

    .footer-nav{margin-top:60px;display:flex;gap:30px;flex-wrap:wrap}
    .footer-nav a{color:#444;text-decoration:none;font-size:.75rem;transition:.3s}
    .footer-nav a:hover{color:#fff}

    .footer-copyright{margin-top:80px;font-size:.7rem;color:#333}

    .footer-glow{
      position:absolute;
      bottom:-150px;right:-150px;
      width:500px;height:500px;
      z-index:1
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media (max-width:1400px){.features-grid{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:1100px){
      .products-grid{grid-template-columns:1fr 1fr}
      .about-container{grid-template-columns:1fr;gap:60px}
      .heritage-block{padding:40px}
    }
    @media (max-width:1024px){
      .config-container{grid-template-columns:1fr;gap:60px}
      .flagship-container{grid-template-columns:1fr;gap:60px}
      .spec-title,.footer-title,.config-title{font-size:2.2rem}
      .footer-container{grid-template-columns:1fr;gap:80px}
      .form-row{grid-template-columns:1fr}
    }
    @media (max-width:1000px){.features-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:768px){.products-grid{grid-template-columns:1fr}}
    @media (max-width:600px){.features-grid{grid-template-columns:1fr}}


  .variant-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .btn-variant {
    background: transparent;
    border: 1px solid #2B2B2B;
    color:var(--text-dim);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius:2px;
  }

  .btn-variant:hover {
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
  }

  .btn-variant.active {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: bold;
  }
  
  /* Slight animation for image swap */
  .fade-in {
      animation: fadeIn 0.4s ease-in-out;
  }
  
  @keyframes fadeIn {
      from { opacity: 0.5; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
  }