:root {
      --bg: #0b140f;
      --card: #13261c;
      --accent: #3fd27f;
      --muted: #9fb7a7;
      --light: #f4fff9
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      background: var(--bg);
      color: var(--light);
      line-height: 1.6
    }

    a {
      text-decoration: none;
      color: inherit
    }
 
    header {
      min-height: 100vh;
      padding: 90px 10%;
      width: 100%;
      height: 100%;
      background-image: url('/assets/subection/dashboard2.jpg');
      background-size: 100%;
      background-repeat: no-repeat;
      /* background: radial-gradient(80% 80% at 10% 10%, #1f4d34 0%, #0b140f 60%) */
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 80px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 20px 10%;
      background: rgba(11, 20, 15, .85);
      backdrop-filter: blur(10px);
      z-index: 1000;
      transition: .3s
    }

    nav.shrink {
      padding: 10px 10%
    }

    nav .logo {
      font-weight: 800;
      font-size: 18px;
      display: flex;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 22px;
      padding: 0;
      margin: 0
    }

    nav li {
      font-size: 14px;
      color: var(--muted);
      position: relative;
      cursor: pointer
    }

    nav li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--card);
      padding: 12px 0;
      border-radius: 10px;
      min-width: 240px
    }

    nav li ul li {
      padding: 10px 18px;
      white-space: nowrap;
      color: var(--light)
    }

    nav li ul li:hover {
      background: rgba(63, 210, 127, .15)
    }

    nav li:hover ul {
      display: block
    }

    nav li {
      font-size: 14px;
      color: var(--muted)
    }

    .hero h1 {
      font-size: 52px;
      max-width: 900px;
      line-height: 1.15
    }

    .hero p {
      max-width: 720px;
      font-size: 18px;
      color: var(--muted)
    }

    .cta a {
      display: inline-block;
      margin: 12px 12px 0 0;
      padding: 14px 26px;
      border-radius: 10px;
      font-weight: 600;
      transition: .3s
    }

    .cta a:hover {
      transform: translateY(-3px)
    }

    .primary {
      background: var(--accent)
    }

    .secondary {
      border: 1px solid var(--accent)
    }

    section {
      padding: 90px 10%
    }

    h2 {
      font-size: 40px
    }

    .subtitle {
      color: var(--muted);
      max-width: 700px;
      margin-bottom: 40px
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px
    }

    .card {
      background: var(--card);
      padding: 30px;
      border-radius: 18px;
      transition: .3s
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .4)
    }

    .card i {
      font-size: 32px;
      color: var(--accent);
      margin-bottom: 15px
    }

    .dark {
      background: #070910
    }

    .slider {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory
    }

    .slide {
      min-width: 300px;
      background: var(--card);
      padding: 25px;
      border-radius: 16px;
      scroll-snap-align: start
    }

    form {
      max-width: 600px;
      display: grid;
      gap: 15px
    }

    input,
    textarea,
    button {
      padding: 14px;
      border-radius: 8px;
      border: none;
      font-family: inherit
    }

    button {
      background: var(--accent);
      font-weight: 600;
      cursor: pointer
    }

    footer {
      padding: 60px 10%;
      background: #000;
      text-align: center;
      color: var(--muted)
    }

    .section-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center
    }

    .section-grid img {
      transition: .3s
    }

    .section-grid img:hover {
      transform: scale(1.02)
    }

    ul li i {
      margin-right: 8px;
      color: var(--accent)
    }

    @media(max-width:900px) {
      nav ul {
        display: none;
        flex-direction: column;
        background: var(--card);
        position: absolute;
        top: 70px;
        right: 10%;
        padding: 20px;
        border-radius: 14px
      }

      nav ul.open {
        display: flex
      }

      nav .hamburger {
        display: block;
        cursor: pointer;
        font-size: 22px
      }

      nav li ul {
        position: static
      }

      nav li:hover ul {
        display: none
      }

      nav li.open ul {
        display: block
      }

      .hero h1 {
        font-size: 40px
      }

      .section-grid {
        grid-template-columns: 1fr
      }
    }