:root{
    --bg:#ffeaea; --card:#ffffff; --accent:#e01717; --accent-2:#8d0000; --muted:#7a6a6a; --radius:14px; --glass:rgba(255,255,255,0.6);
    --max:1100px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  }
  html{
      scroll-behavior: smooth;
  }
  *{
      box-sizing:border-box
  }
  body{
      margin:0;
      background:linear-gradient(180deg,#360000f6 0%,#360000 100%), url("../asset/img/bodybg.gif");
      background-size: cover;
      background-position: center;
      color:#0f1724;
      line-height:1.45
  }

  .bg-dark{
    background:linear-gradient(90deg,#86000098 0%,#2b0000ec 100%), url("../asset/img/background-fixed-bg.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top:1px solid #000000;
    box-shadow: 0 6px 24px rgba(14, 30, 37, 0.06);
    border-bottom:1px solid #3f0000;
    animation: bg-anim 5s infinite;
  }

  @keyframes bg-anim {
    0% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 10% 90%;
    }
    100% {
        background-position: 100% 100%;
    }
  }


  .container{
      max-width:var(--max);
      margin:0 auto;
      padding:28px
  }
  header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 0
  }
  nav{
      display:flex;
      gap:12px;
      align-items: center;
      justify-content: center;  
  }
  nav a{
      color:var(--card);
      text-decoration:none;
      margin:0 6px;
      transition:color 0.2s ease
  }
  nav a:hover{
      color:var(--accent)
  }
  .logo{
      display:flex;
      gap:12px;
      align-items:center
  }
  .logo svg{
      width:48px;
      height:48px
  }
  .hero{
      display:grid;
      grid-template-columns:1fr 460px;
      gap:34px;
      align-items:center;
      padding:36px;
      margin-top:28px;
      background:var(--card);
      border-radius:var(--radius);
  }
  .eyebrow{
      display:inline-block;
      padding:6px 20px;
      background:var(--glass);
      border-radius:999px;
      font-weight:700;
      background-color: var(--bg);
      color:var(--accent);
      margin-bottom:16px
  }
  h1{
      font-size:34px;
      margin:0 0 12px
  }
  p.lead{
      color:var(--accent-2);
      margin:0 0 20px
  }
  /* Style classes */
  .cta {
      display: flex;
      gap: 12px;
  }

  .btn {
      background: var(--accent);
      color: white;
      padding: 12px 18px;
      border-radius: 10px;
      border: 0;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .btn:hover{
      background: var(--accent-2);
      transform: scale(1.02);
  }

  .btn.alt {
      background: transparent;
      color: var(--accent);
      border: 2px solid rgba(30, 110, 216, 0.14);
  }

  .card {
      background: var(--card);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 6px 24px rgba(14, 30, 37, 0.06);
      position: relative;
      transition: all 0.2s ease;
      border: 1px solid rgba(187, 187, 187, 0.14);
  }

  .card:hover{
      transform: scale(1.02);
  }

  .card h3{
    font-size: 20px;
    margin:0 0 12px;
    color:var(--accent);
  }

  .overlay{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-image:linear-gradient(rgba(255, 0, 0, 0.9),rgba(255, 0, 0, 0.9)), url("../asset/img/hero-img.png");
      background-blend-mode: color;
      background-size: cover;
      background-position: center;
      border-radius: var(--radius);
      z-index: 9999;
  }

  section {
      padding: 56px 28px;
  }

  /* Kite Illustration area */
  .visual {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .kite-svg {
      max-width: 420px;
      width: 100%;
      height: auto;
  }

  /* Features */
  .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin: 28px 0;
      transition: all 0.2s ease;
  }

  .feature {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--card));
      padding: 18px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      transition: all 0.2s ease;
  }

  .features .feature:hover{
      transform: scale(1.02);
  }

  .feature i {
      width: 36px;
      height: 36px;
      color: var(--accent);
      font-size: 24px;
  }

  .feature h4 {
      margin: 0;
      font-size: 16px;
  }

  .feature p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
  }

  /* Services/Benefits */
  .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin: 28px 0;
  }

  .benefits li {
      margin-bottom: 12px;
  }

  footer {
      border-top: 1px solid rgba(15, 23, 36, 0.06);
      padding: 10px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--bg);
  }

  footer .container{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  a{
      color: var(--accent);
      text-decoration: none;
  }

  a:hover{
      text-decoration: none;
  }

  .burger-menu {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border:none;
      background-color: transparent;
  }

  .burger-menu span {
      display: block;
      width: 24px;
      height: 3px;
      background-color: var(--accent);
      border-radius: 2px;
      transition: all 0.2s ease;
  }

  /* Responsive */
  @media (max-width: 980px) {

      header {
          width: 90%;
          left: 5%;
          right: 5%;
          top: 2%;
          border-radius: 12px;
          position: fixed;
          z-index: 99999999;
          background-color: var(--card);
          padding: 12px;
      }

      main{
          margin-top: 0 !important;
          padding: 0 !important;
      }
      .hero {
          grid-template-columns: 1fr;
      }

      .features {
          grid-template-columns: repeat(2, 1fr);
      }

      .two-col {
          grid-template-columns: 1fr;
      }

      nav {
          display: none;
      }

      nav.active {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          background: var(--card);
          padding: 12px;
          z-index: 99999999;
      }

      nav a{
          margin:6px;
          color:var(--accent);
      }

      .burger-menu {
          display: flex;
          right:30px;
          position: absolute;
          z-index: 99999999;
      }

      .burger-menu.active {
          position: fixed;
      }

      footer {
          flex-direction: column;
          gap: 12px;
      }
  }

  @media (max-width: 520px) {
      h1 {
          font-size: 26px;
      }

      .features {
          grid-template-columns: 1fr;
      }
      section {
      padding: 20px 10px;
  }

  }

  /* Small helpers */
  .muted {
      color: var(--muted);
  }

  .center {
      text-align: center;
  }