<style>

  *{
    font-family:'Inter',sans-serif;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    background:#F7F9FB;
    color:#0F172A;
    overflow-x:hidden;
    position:relative;
  }

  /* =========================================
     GLOBAL NOISE
  ========================================= */

  body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.03;
    z-index:9999;
    background-image:
    radial-gradient(circle at 20% 20%, black 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, black 1px, transparent 1px);
    background-size:3px 3px;
  }

  /* =========================================
     AURORA
  ========================================= */

  .aurora-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
  }

  .aurora{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:9999px;
    filter:blur(120px);
    opacity:.18;
    animation:aurora 18s ease infinite alternate;
  }

  .aurora.one{
    background:#10B981;
    top:-200px;
    left:-120px;
  }

  .aurora.two{
    background:#2563EB;
    right:-200px;
    top:100px;
    animation-delay:4s;
  }

  .aurora.three{
    background:#14B8A6;
    bottom:-200px;
    left:35%;
    animation-delay:8s;
  }

  @keyframes aurora{
    0%{
      transform:translateY(0) translateX(0) scale(1);
    }
    100%{
      transform:translateY(40px) translateX(30px) scale(1.15);
    }
  }

  /* =========================================
     HERO
  ========================================= */

  .hero-image{
    background-image:url('../images/hero.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }

  .hero-overlay{
    background:
    linear-gradient(
      90deg,
      rgba(247,249,251,1) 0%,
      rgba(247,249,251,.95) 30%,
      rgba(247,249,251,.72) 50%,
      rgba(247,249,251,.08) 75%,
      rgba(247,249,251,0) 100%
    );
  }

  /* =========================================
     GLASS
  ========================================= */

  .glass-card{
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.5);

    box-shadow:
    0 10px 50px rgba(15,23,42,.06),
    inset 0 1px 1px rgba(255,255,255,.6);
  }

  /* =========================================
     CARD
  ========================================= */

  .section-card{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.5);

    backdrop-filter:blur(18px);

    transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-color .5s ease;

    box-shadow:
    0 10px 40px rgba(15,23,42,.04);
  }

  .section-card:hover{
    transform:
    perspective(1000px)
    rotateX(2deg)
    rotateY(-2deg)
    translateY(-10px);

    box-shadow:
    0 30px 60px rgba(16,185,129,.12);

    border-color:rgba(16,185,129,.2);
  }

  /* =========================================
     BUTTON
  ========================================= */

  .gradient-button{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
      135deg,
      #2563EB,
      #1D4ED8
    );
  }

  .gradient-button::before{
    content:'';

    position:absolute;
    inset:-40%;

    background:
    radial-gradient(
      circle,
      rgba(255,255,255,.4),
      transparent 60%
    );

    animation:glow 6s linear infinite;
  }

  @keyframes glow{
    0%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(360deg);
    }
  }

  .green-gradient{
    background:
    linear-gradient(
      135deg,
      #10B981,
      #047857
    );
  }

  button{
    transition:transform .25s ease;
  }

  button:hover{
    transform:scale(1.08);
  }

  /* =========================================
     MOBILE NAV
  ========================================= */

  .site-header.menu-open{
    z-index:70;
  }

  button.mobile-nav-toggle:hover{
    transform:scale(1.05);
  }

  .mobile-nav-toggle .nav-bar{
    display:block;
    height:2px;
    width:22px;
    border-radius:9999px;
    background:#0f172a;
    transition:transform .25s ease, opacity .2s ease;
  }

  .mobile-nav-toggle .nav-bar + .nav-bar{
    margin-top:6px;
  }

  .mobile-nav-toggle.is-open .nav-bar:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .mobile-nav-toggle.is-open .nav-bar:nth-child(2){
    opacity:0;
  }

  .mobile-nav-toggle.is-open .nav-bar:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  #mobile-nav{
    transition:opacity .25s ease, visibility .25s ease;
  }

  #mobile-nav.mobile-nav--visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #mobile-nav .mobile-nav-panel{
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }

  #mobile-nav.mobile-nav--visible .mobile-nav-panel{
    transform:translateX(0);
  }

  /* =========================================
     DASHBOARD
  ========================================= */

  .dashboard-wrap{
    position:relative;
  }

  .dashboard-glow{
    position:absolute;
    inset:auto;
    width:300px;
    height:300px;
    background:#10B981;
    filter:blur(100px);
    opacity:.2;
    border-radius:9999px;
    top:20%;
    left:20%;
    z-index:0;
  }

  .dashboard-card{
    position:relative;
    z-index:2;

    animation:floatCard 6s ease-in-out infinite;
  }

  @keyframes floatCard{
    0%{
      transform:translateY(0px);
    }
    50%{
      transform:translateY(-10px);
    }
    100%{
      transform:translateY(0px);
    }
  }

  .pulse-dot{
    animation:pulse 2s infinite;
  }

  @keyframes pulse{
    0%{
      transform:scale(1);
      opacity:1;
    }
    100%{
      transform:scale(2.2);
      opacity:0;
    }
  }

  /* =========================================
     SOLUTION IMAGE
  ========================================= */

  .solution-image{
    background-size:cover;
    background-position:center;
    transition:transform .8s ease;
  }

  .section-card:hover .solution-image{
    transform:scale(1.08);
  }

  .solution-image-1{
    background-image:url('../images/agriculture.jpg');
  }

  .solution-image-2{
    background-image:url('../images/livestock.jpg');
  }

  .solution-image-3{
    background-image:url('../images/carbon.jpg');
  }

  .solution-image-4{
    background-image:url('../images/energy.jpg');
  }

  /* =========================================
     CTA
  ========================================= */

  .cta-bg{
    background:
    linear-gradient(
      135deg,
      rgba(16,185,129,.06),
      rgba(255,255,255,1)
    );
  }

  /* =========================================
     DASHBOARD SCREEN
  ========================================= */

  .dashboard-screen{
    background:
    linear-gradient(
      180deg,
      #0F172A,
      #111827
    );
  }

  .mini-chart{
    height:70px;
    position:relative;
    overflow:hidden;
  }

  .mini-chart::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,185,129,.8),
      transparent
    );

    animation:scan 3s linear infinite;
  }

  /* DASHBOARD */

  .dashboard-dark{
    background:
    linear-gradient(
      180deg,
      #07111F,
      #111827
    );
  }

  .dashboard-glow{
    position:absolute;
    width:300px;
    height:300px;
    background:#10B981;
    filter:blur(120px);
    opacity:.2;
    border-radius:9999px;
    top:10%;
    left:10%;
  }

  .floating{
    animation:floating 6s ease-in-out infinite;
  }

  @keyframes floating{
    0%{
      transform:translateY(0px);
    }
    50%{
      transform:translateY(-10px);
    }
    100%{
      transform:translateY(0px);
    }
  }

  .mini-chart{
    height:70px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
  }

  .mini-chart::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,185,129,.8),
      transparent
    );

    animation:scan 3s linear infinite;
  }

  @keyframes scan{
    0%{
      transform:translateX(-100%);
    }
    100%{
      transform:translateX(100%);
    }
  }

  /* =========================================
     TEXT
  ========================================= */

  h1,h2,h3,h4{
    letter-spacing:-0.04em;
  }

  .green-gradient{
    background:
    linear-gradient(
      135deg,
      #10B981,
      #047857
    );
  }
  .greenLabel {
    color:#047857;
  }

  /* HERO */

  .hero-grid{
    background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);

    background-size:42px 42px;
  }

  /* DARK PANEL */

  .dark-panel{
    background:
    linear-gradient(
      180deg,
      #07111F,
      #111827
    );
  }

  .mini-chart{
    height:70px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
  }

  .mini-chart::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,185,129,.8),
      transparent
    );

    animation:scan 3s linear infinite;
  }

  /* TECH NODES */

  .tech-node{
    position:relative;
    overflow:hidden;
  }

  .tech-node::before{
    content:'';

    position:absolute;
    width:180px;
    height:180px;
    border-radius:9999px;
    background:rgba(16,185,129,.08);
    filter:blur(40px);

    top:-60px;
    right:-40px;
  }

  /* FLOW LINE */

  .flow-line{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;

    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,185,129,.35),
      transparent
    );
  }

  .solution-image{
    background-size:cover;
    background-position:center;
    transition:transform .8s ease;
  }

  .section-card:hover .solution-image{
    transform:scale(1.08);
  }

  .challenges ul {
    list-style: disc;
  }
  .challenges ul li {
    margin-left: 50px;
  }
  .sensor-pulse{
  width:14px;
  height:14px;
  background:#10b981;
  border-radius:50%;
  position:relative;
}

.sensor-pulse::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid #10b981;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{
    transform:scale(.5);
    opacity:1;
  }
  100%{
    transform:scale(2);
    opacity:0;
  }
}
</style>
