/* ========================================================= 
   MOSQUISCAN 
   HIGH-TECH GREEN SCIENCE DESIGN 
========================================================= */ 
 
:root { 
 
  --green-dark: #032d22; 
  --green-deep: #064e3b; 
  --green: #087f5b; 
  --green-light: #16a34a; 
  --green-bright: #4ade80; 
 
  --mint: #a7f3d0; 
 
  --red: #ef4444; 
  --red-dark: #991b1b; 
 
  --yellow: #facc15; 
 
  --blue: #38bdf8; 
 
  --dark: #0f172a; 
  --gray: #64748b; 
 
  --border: #dce9e2; 
 
  --white: #ffffff; 
 
  --shadow: 
    0 20px 60px 
    rgba(3,45,34,.10); 
 
} 
 
 
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
 
html { 
  scroll-behavior: smooth; 
} 
 
 
body { 
 
  font-family: 
    Inter, 
    "Segoe UI", 
    Arial, 
    sans-serif; 
 
  color: var(--dark); 
 
  background: 
 
    radial-gradient( 
      circle at 10% 10%, 
      rgba(22,163,74,.08), 
      transparent 25% 
    ), 
 
    radial-gradient( 
      circle at 90% 80%, 
      rgba(56,189,248,.06), 
      transparent 25% 
    ), 
 
    #f3f8f5; 
 
  min-height: 100vh; 
 
} 
 
 
/* ========================================================= 
   AMBIENT LIGHTS 
========================================================= */ 
 
.ambient { 
 
  position: fixed; 
 
  width: 240px; 
  height: 240px; 
 
  border-radius: 50%; 
 
  filter: blur(100px); 
 
  opacity: .18; 
 
  pointer-events: none; 
 
  z-index: -5; 
 
} 
 
 
.ambient-1 { 
 
  top: 15%; 
  left: -100px; 
 
  background: 
    #22c55e; 
 
} 
 
 
.ambient-2 { 
 
  right: -100px; 
  top: 45%; 
 
  background: 
    #0ea5e9; 
 
} 
 
 
.ambient-3 { 
 
  bottom: -100px; 
  left: 45%; 
 
  background: 
    #facc15; 
 
} 
 
 
/* ========================================================= 
   HEADER 
========================================================= */ 
 
.main-header { 
 
  position: relative; 
 
  min-height: 100px; 
 
  overflow: hidden; 
 
  background: 
 
    linear-gradient( 
      135deg, 
      #022c22 0%, 
      #065f46 48%, 
      #16a34a 100% 
    ); 
 
  color: white; 
 
  box-shadow: 
    0 10px 35px 
    rgba(3,45,34,.35); 
 
} 
 
 
.header-grid { 
 
  position: absolute; 
 
  inset: 0; 
 
  opacity: .13; 
 
  background-image: 
 
    linear-gradient( 
      rgba(255,255,255,.35) 1px, 
      transparent 1px 
    ), 
 
    linear-gradient( 
      90deg, 
      rgba(255,255,255,.35) 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    36px 36px; 
 
} 
 
 
.header-glow { 
 
  position: absolute; 
 
  width: 350px; 
  height: 350px; 
 
  right: 10%; 
 
  top: -250px; 
 
  border-radius: 50%; 
 
  background: 
    rgba(74,222,128,.20); 
 
  filter: blur(20px); 
 
} 
 
 
.header-inner { 
 
  position: relative; 
 
  z-index: 2; 
 
  width: 
    min(1200px,92%); 
 
  min-height: 100px; 
 
  margin: auto; 
 
  display: flex; 
 
  align-items: center; 
 
  justify-content: space-between; 
 
  gap: 20px; 
 
} 
 
 
/* ========================================================= 
   LOGO 
========================================================= */ 
 
.brand { 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 15px; 
 
} 
 
 
.logo-ring { 
 
  width: 78px; 
  height: 78px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 50%; 
 
  background: 
    rgba(255,255,255,.12); 
 
  border: 
    2px solid 
    rgba(255,255,255,.45); 
 
  box-shadow: 
    0 0 0 5px 
    rgba(255,255,255,.05), 
 
    0 0 30px 
    rgba(134,239,172,.25); 
 
} 
 
 
.school-logo { 
 
  width: 68px; 
  height: 68px; 
 
  border-radius: 50%; 
 
  object-fit: contain; 
 
  background: white; 
 
  padding: 3px; 
 
} 
 
 
.brand-name { 
 
  font-size: 1.7rem; 
 
  line-height: 1; 
 
  font-weight: 950; 
 
  letter-spacing: 3px; 
 
} 
 
 
.brand-subtitle { 
 
  margin-top: 7px; 
 
  font-size: .62rem; 
 
  font-weight: 800; 
 
  letter-spacing: 2px; 
 
  color: 
    #bbf7d0; 
 
} 
 
 
.school-info { 
 
  text-align: right; 
 
  display: flex; 
 
  flex-direction: column; 
 
  gap: 5px; 
 
} 
 
 
.school-info strong { 
 
  font-size: .72rem; 
 
  letter-spacing: 1px; 
 
} 
 
 
.school-info span { 
 
  font-size: .61rem; 
 
  opacity: .65; 
 
  letter-spacing: 1px; 
 
} 
 
 
/* ========================================================= 
   HERO 
========================================================= */ 
 
.hero { 
 
  position: relative; 
 
  overflow: hidden; 
 
  color: white; 
 
  padding: 
    80px 
    0 
    0; 
 
  background: 
 
    radial-gradient( 
      circle at 75% 50%, 
      rgba(34,197,94,.25), 
      transparent 30% 
    ), 
 
    radial-gradient( 
      circle at 100% 0%, 
      rgba(56,189,248,.13), 
      transparent 25% 
    ), 
 
    linear-gradient( 
      135deg, 
      #021f18, 
      #034b38 50%, 
      #087f5b 
    ); 
 
} 
 
 
.hero-grid { 
 
  position: absolute; 
 
  inset: 0; 
 
  opacity: .13; 
 
  background-image: 
 
    linear-gradient( 
      rgba(255,255,255,.25) 1px, 
      transparent 1px 
    ), 
 
    linear-gradient( 
      90deg, 
      rgba(255,255,255,.25) 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    44px 44px; 
 
} 
 
 
.hero-noise { 
 
  position: absolute; 
 
  inset: 0; 
 
  opacity: .08; 
 
  background-image: 
 
    radial-gradient( 
      white 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    22px 22px; 
 
} 
 
 
.hero-inner { 
 
  position: relative; 
 
  z-index: 2; 
 
  width: 
    min(1200px,92%); 
 
  margin: auto; 
 
  display: grid; 
 
  grid-template-columns: 
    1fr 
    1fr; 
 
  align-items: center; 
 
  gap: 40px; 
 
} 
 
 
/* ========================================================= 
   HERO TEXT 
========================================================= */ 
 
.hero-copy { 
 
  max-width: 620px; 
 
} 
 
 
.live-badge { 
 
  display: inline-flex; 
 
  align-items: center; 
 
  gap: 8px; 
 
  padding: 
    8px 
    13px; 
 
  border: 
    1px solid 
    rgba(167,243,208,.3); 
 
  border-radius: 50px; 
 
  background: 
    rgba(255,255,255,.07); 
 
  backdrop-filter: 
    blur(12px); 
 
  font-size: .65rem; 
 
  font-weight: 900; 
 
  letter-spacing: 1.2px; 
 
} 
 
 
.live-dot { 
 
  width: 8px; 
  height: 8px; 
 
  border-radius: 50%; 
 
  background: 
    #4ade80; 
 
  box-shadow: 
    0 0 15px 
    #4ade80; 
 
  animation: 
    livePulse 1.4s infinite; 
 
} 
 
 
@keyframes livePulse { 
 
  50% { 
 
    opacity: .3; 
 
    transform: scale(.6); 
 
  } 
 
} 
 
 
.hero h1 { 
 
  margin-top: 22px; 
 
  font-size: 
    clamp( 
      3.2rem, 
      6vw, 
      6rem 
    ); 
 
  line-height: .88; 
 
  letter-spacing: -5px; 
 
  font-weight: 950; 
 
} 
 
 
.hero h1 span { 
 
  display: block; 
 
  color: 
    #4ade80; 
 
  text-shadow: 
    0 0 30px 
    rgba(74,222,128,.35); 
 
} 
 
 
/* ========================================================= 
   HERO DESCRIPTION 
========================================================= */ 
 
.hero-description { 
 
  margin-top: 28px; 
 
  max-width: 570px; 
 
  color: 
    rgba(255,255,255,.72); 
 
  font-size: .94rem; 
 
  line-height: 1.8; 
 
} 
 
 
.hero-description strong { 
 
  color: 
    #bbf7d0; 
 
} 
 
 
/* ========================================================= 
   HERO BUTTONS 
========================================================= */ 
 
.hero-pills { 
 
  display: flex; 
 
  flex-wrap: wrap; 
 
  gap: 8px; 
 
  margin-top: 27px; 
 
} 
 
 
/* 
   These remain visually identical to the original 
   hero pills, but now work as clickable controls. 
*/ 
 
.hero-pills span, 
.hero-pills button { 
 
  padding: 
    8px 
    12px; 
 
  border-radius: 9px; 
 
  background: 
    rgba(255,255,255,.08); 
 
  border: 
    1px solid 
    rgba(255,255,255,.12); 
 
  color: 
    white; 
 
  font-family: 
    inherit; 
 
  font-size: .65rem; 
 
  font-weight: 800; 
 
  cursor: pointer; 
 
  transition: 
    .2s ease; 
 
} 
 
 
.hero-pills button { 
 
  appearance: none; 
 
  -webkit-appearance: none; 
 
} 
 
 
.hero-pills button:hover, 
.hero-pills span:hover { 
 
  background: 
    rgba(255,255,255,.16); 
 
  border-color: 
    rgba(167,243,208,.4); 
 
  transform: 
    translateY(-2px); 
 
  box-shadow: 
    0 6px 18px 
    rgba(0,0,0,.15); 
 
} 
 
 
.hero-pills button:active, 
.hero-pills span:active { 
 
  transform: 
    translateY(0); 
 
} 
 
 
.hero-pills button:focus-visible, 
.hero-pills span:focus-visible { 
 
  outline: 
    2px solid 
    #4ade80; 
 
  outline-offset: 
    3px; 
 
} 
 
 
/* ========================================================= 
   HERO MINI STATS 
========================================================= */ 
 
.hero-mini-stats { 
 
  display: flex; 
 
  gap: 35px; 
 
  margin-top: 35px; 
 
} 
 
 
.hero-mini-stats div { 
 
  display: flex; 
 
  flex-direction: column; 
 
} 
 
 
.hero-mini-stats strong { 
 
  font-size: 1.5rem; 
 
  color: 
    #bbf7d0; 
 
} 
 
 
.hero-mini-stats span { 
 
  margin-top: 3px; 
 
  font-size: .58rem; 
 
  color: 
    rgba(255,255,255,.5); 
 
} 
 
 
/* ========================================================= 
   MOSQUITO SCANNER 
========================================================= */ 
 
.mosquito-stage { 
 
  position: relative; 
 
  min-height: 510px; 
 
  display: flex; 
 
  justify-content: center; 
 
  align-items: center; 
 
} 
 
 
.scan-grid { 
 
  position: absolute; 
 
  width: 430px; 
  height: 430px; 
 
  opacity: .13; 
 
  background-image: 
 
    linear-gradient( 
      rgba(134,239,172,.5) 1px, 
      transparent 1px 
    ), 
 
    linear-gradient( 
      90deg, 
      rgba(134,239,172,.5) 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    25px 25px; 
 
  transform: 
    perspective(500px) 
    rotateX(55deg); 
 
  mask-image: 
    radial-gradient( 
      circle, 
      black, 
      transparent 70% 
    ); 
 
} 
 
 
/* ========================================================= 
   RADAR 
========================================================= */ 
 
.radar { 
 
  position: absolute; 
 
  border-radius: 50%; 
 
  border: 
    1px solid 
    rgba(134,239,172,.35); 
 
  box-shadow: 
    inset 
    0 0 35px 
    rgba(34,197,94,.08); 
 
} 
 
 
.radar-outer { 
 
  width: 450px; 
  height: 450px; 
 
  animation: 
    radarSpin 18s linear infinite; 
 
} 
 
 
.radar-middle { 
 
  width: 350px; 
  height: 350px; 
 
  border-style: dashed; 
 
  animation: 
    radarSpin 12s linear infinite reverse; 
 
} 
 
 
.radar-inner { 
 
  width: 250px; 
  height: 250px; 
 
  border: 
    2px solid 
    rgba(134,239,172,.25); 
 
} 
 
 
@keyframes radarSpin { 
 
  to { 
    transform: rotate(360deg); 
  } 
 
} 
 
 
/* ========================================================= 
   BRACKETS 
========================================================= */ 
 
.bracket { 
 
  position: absolute; 
 
  width: 55px; 
  height: 55px; 
 
  border-color: 
    #86efac; 
 
  opacity: .7; 
 
} 
 
 
.bracket-tl { 
 
  top: 50px; 
  left: 35px; 
 
  border-top: 2px solid; 
  border-left: 2px solid; 
 
} 
 
 
.bracket-tr { 
 
  top: 50px; 
  right: 35px; 
 
  border-top: 2px solid; 
  border-right: 2px solid; 
 
} 
 
 
.bracket-bl { 
 
  bottom: 45px; 
  left: 35px; 
 
  border-bottom: 2px solid; 
  border-left: 2px solid; 
 
} 
 
 
.bracket-br { 
 
  bottom: 45px; 
  right: 35px; 
 
  border-bottom: 2px solid; 
  border-right: 2px solid; 
 
} 
 
 
/* ========================================================= 
   MOSQUITO 
========================================================= */ 
 
.mosquito-wrap { 
 
  position: relative; 
 
  z-index: 5; 
 
  width: 360px; 
  height: 360px; 
 
  display: grid; 
 
  place-items: center; 
 
} 
 
 
.mosquito-svg { 
 
  position: relative; 
 
  z-index: 4; 
 
  width: 330px; 
 
  height: 330px; 
 
  filter: 
    drop-shadow( 
      0 0 15px 
      rgba(134,239,172,.5) 
    ) 
 
    drop-shadow( 
      0 0 45px 
      rgba(34,197,94,.25) 
    ); 
 
  animation: 
    mosquitoFloat 4s ease-in-out infinite; 
 
} 
 
 
@keyframes mosquitoFloat { 
 
  0%,100% { 
 
    transform: 
      translateY(0) 
      rotate(-2deg); 
 
  } 
 
  50% { 
 
    transform: 
      translateY(-12px) 
      rotate(2deg); 
 
  } 
 
} 
 
 
.mosquito-glow { 
 
  position: absolute; 
 
  width: 190px; 
  height: 190px; 
 
  border-radius: 50%; 
 
  background: 
    rgba(74,222,128,.18); 
 
  filter: 
    blur(35px); 
 
  animation: 
    mosquitoGlow 2.5s ease-in-out infinite alternate; 
 
} 
 
 
@keyframes mosquitoGlow { 
 
  from { 
    transform: scale(.85); 
  } 
 
  to { 
    transform: scale(1.2); 
  } 
 
} 
 
 
/* ========================================================= 
   SCAN BEAM 
========================================================= */ 
 
.scan-beam { 
 
  position: absolute; 
 
  z-index: 8; 
 
  width: 350px; 
 
  height: 3px; 
 
  background: 
    #86efac; 
 
  box-shadow: 
    0 0 8px #86efac, 
    0 0 25px #22c55e; 
 
  animation: 
    scanBeam 3s ease-in-out infinite; 
 
} 
 
 
@keyframes scanBeam { 
 
  0% { 
 
    transform: 
      translateY(-150px); 
 
    opacity: 0; 
 
  } 
 
  15% { 
 
    opacity: 1; 
 
  } 
 
  50% { 
 
    opacity: 1; 
 
  } 
 
  85% { 
 
    opacity: 1; 
 
  } 
 
  100% { 
 
    transform: 
      translateY(150px); 
 
    opacity: 0; 
 
  } 
 
} 
 
 
/* ========================================================= 
   DATA CHIPS 
========================================================= */ 
 
.data-chip { 
 
  position: absolute; 
 
  z-index: 10; 
 
  padding: 
    9px 
    13px; 
 
  border-radius: 9px; 
 
  background: 
    rgba(2,44,34,.85); 
 
  border: 
    1px solid 
    rgba(134,239,172,.35); 
 
  box-shadow: 
    0 10px 30px 
    rgba(0,0,0,.2); 
 
  backdrop-filter: 
    blur(10px); 
 
  font-size: .6rem; 
 
  font-weight: 900; 
 
  letter-spacing: 1px; 
 
} 
 
 
.data-chip span { 
 
  color: 
    #4ade80; 
 
} 
 
 
.chip-ai { 
 
  top: 70px; 
  left: 15px; 
 
} 
 
 
.chip-scan { 
 
  top: 190px; 
  right: 0; 
 
} 
 
 
.chip-led { 
 
  bottom: 75px; 
  left: 35px; 
 
} 
 
 
.data-coordinate { 
 
  position: absolute; 
 
  right: 20px; 
  bottom: 50px; 
 
  color: 
    rgba(167,243,208,.6); 
 
  font-size: .52rem; 
 
  line-height: 1.7; 
 
  letter-spacing: 1px; 
 
} 
 
 
/* ========================================================= 
   WORKFLOW 
========================================================= */ 
 
.hero-workflow { 
 
  position: relative; 
 
  z-index: 20; 
 
  width: 
    min(1100px,92%); 
 
  margin: 
    55px auto 0; 
 
  padding: 
    17px 22px; 
 
  display: flex; 
 
  align-items: center; 
 
  justify-content: space-between; 
 
  border: 
    1px solid 
    rgba(167,243,208,.16); 
 
  border-radius: 
    18px 18px 0 0; 
 
  background: 
    rgba(0,30,22,.65); 
 
  backdrop-filter: 
    blur(15px); 
 
} 
 
 
.flow-item { 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 10px; 
 
} 
 
 
.flow-icon { 
 
  width: 42px; 
  height: 42px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 11px; 
 
  background: 
    rgba(255,255,255,.08); 
 
} 
 
 
.flow-item strong { 
 
  display: block; 
 
  font-size: .62rem; 
 
  letter-spacing: 1px; 
 
} 
 
 
.flow-item span { 
 
  display: block; 
 
  margin-top: 3px; 
 
  color: 
    rgba(255,255,255,.45); 
 
  font-size: .55rem; 
 
} 
 
 
.flow-arrow { 
 
  color: 
    #4ade80; 
 
  font-size: 1.3rem; 
 
} 
 
 
/* ========================================================= 
   MAIN 
========================================================= */ 
 
.main-container { 
 
  width: 
    min(1200px,92%); 
 
  margin: 
    40px auto 80px; 
 
} 
 
 
/* ========================================================= 
   DASHBOARD 
========================================================= */ 
 
.dashboard-grid { 
 
  display: grid; 
 
  grid-template-columns: 
    repeat(3,1fr); 
 
  gap: 18px; 
 
} 
 
 
.dashboard-card { 
 
  position: relative; 
 
  overflow: hidden; 
 
  min-height: 125px; 
 
  padding: 22px; 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 17px; 
 
  border: 
    1px solid 
    var(--border); 
 
  border-radius: 18px; 
 
  background: 
    rgba(255,255,255,.94); 
 
  box-shadow: 
    var(--shadow); 
 
} 
 
 
.dashboard-card::after { 
 
  content: ""; 
 
  position: absolute; 
 
  width: 130px; 
  height: 130px; 
 
  right: -60px; 
  bottom: -70px; 
 
  border-radius: 50%; 
 
  opacity: .13; 
 
} 
 
 
.total-card::after { 
  background: var(--yellow); 
} 
 
 
.possible-card::after { 
  background: var(--red); 
} 
 
 
.safe-card::after { 
  background: var(--green-light); 
} 
 
 
.dashboard-symbol { 
 
  width: 56px; 
  height: 56px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 16px; 
 
  background: 
    #f1f5f9; 
 
  font-size: 1.5rem; 
 
  color: 
    var(--green); 
 
} 
 
 
.red-symbol { 
 
  color: 
    var(--red); 
 
  background: 
    #fee2e2; 
 
} 
 
 
.green-symbol { 
 
  color: 
    var(--green-light); 
 
  background: 
    #dcfce7; 
 
} 
 
 
.dashboard-card span { 
 
  display: block; 
 
  color: 
    var(--gray); 
 
  font-size: .62rem; 
 
  font-weight: 900; 
 
  letter-spacing: 1px; 
 
} 
 
 
.dashboard-card strong { 
 
  display: block; 
 
  margin-top: 3px; 
 
  font-size: 2rem; 
 
} 
 
 
/* ========================================================= 
   SECTION 
========================================================= */ 
 
.section-card { 
 
  position: relative; 
 
  margin-top: 25px; 
 
  padding: 32px; 
 
  border: 
    1px solid 
    var(--border); 
 
  border-radius: 22px; 
 
  background: 
    rgba(255,255,255,.96); 
 
  box-shadow: 
    var(--shadow); 
 
  overflow: hidden; 
 
} 
 
 
.section-card::before { 
 
  content: ""; 
 
  position: absolute; 
 
  left: 0; 
  right: 0; 
  top: 0; 
 
  height: 4px; 
 
  background: 
    linear-gradient( 
      90deg, 
      #064e3b, 
      #16a34a, 
      #4ade80, 
      #facc15 
    ); 
 
} 
 
 
.section-heading { 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 14px; 
 
  margin-bottom: 28px; 
 
} 
 
 
.section-number { 
 
  width: 44px; 
  height: 44px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 12px; 
 
  background: 
    #dcfce7; 
 
  color: 
    #065f46; 
 
  font-size: .7rem; 
 
  font-weight: 950; 
 
} 
 
 
.section-heading h2 { 
 
  font-size: 1.4rem; 
 
  font-weight: 950; 
 
} 
 
 
.section-heading p { 
 
  margin-top: 4px; 
 
  color: 
    var(--gray); 
 
  font-size: .73rem; 
 
} 
 
 
/* ========================================================= 
   INSPECTION 
========================================================= */ 
 
.inspection-grid { 
 
  display: grid; 
 
  grid-template-columns: 
    1fr 
    1fr; 
 
  gap: 22px; 
 
} 
 
 
.upload-box { 
 
  position: relative; 
 
  min-height: 300px; 
 
  display: flex; 
 
  flex-direction: column; 
 
  align-items: center; 
 
  justify-content: center; 
 
  text-align: center; 
 
  padding: 30px; 
 
  border: 
    2px dashed 
    #b7d8c5; 
 
  border-radius: 18px; 
 
  cursor: pointer; 
 
  overflow: hidden; 
 
  background: 
 
    radial-gradient( 
      circle, 
      rgba(22,163,74,.09) 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    18px 18px; 
 
  transition: 
    .25s ease; 
 
} 
 
 
.upload-box:hover { 
 
  border-color: 
    var(--green); 
 
  transform: 
    translateY(-3px); 
 
  box-shadow: 
    0 15px 35px 
    rgba(8,127,91,.08); 
 
} 
 
 
.upload-icon { 
 
  width: 70px; 
  height: 70px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 20px; 
 
  background: 
    #dcfce7; 
 
  font-size: 2rem; 
 
} 
 
 
.upload-box h3 { 
 
  margin-top: 17px; 
 
  font-size: 1rem; 
 
} 
 
 
.upload-box p { 
 
  max-width: 350px; 
 
  margin-top: 7px; 
 
  color: 
    var(--gray); 
 
  font-size: .72rem; 
 
  line-height: 1.6; 
 
} 
 
 
.upload-button { 
 
  margin-top: 17px; 
 
  padding: 
    10px 
    17px; 
 
  border-radius: 10px; 
 
  background: 
    linear-gradient( 
      135deg, 
      #064e3b, 
      #16a34a 
    ); 
 
  color: 
    white; 
 
  font-size: .7rem; 
 
  font-weight: 900; 
 
} 
 
 
/* ========================================================= 
   PREVIEW 
========================================================= */ 
 
.preview-area { 
 
  margin-top: 15px; 
 
  border: 
    1px solid 
    var(--border); 
 
  border-radius: 15px; 
 
  overflow: hidden; 
 
} 
 
 
.preview-header { 
 
  padding: 
    10px 14px; 
 
  display: flex; 
 
  align-items: center; 
 
  justify-content: space-between; 
 
  background: 
    #f8fafc; 
 
  font-size: .7rem; 
 
} 
 
 
.preview-area img { 
 
  display: block; 
 
  width: 100%; 
 
  max-height: 270px; 
 
  object-fit: contain; 
 
  background: 
    #f1f5f9; 
 
} 
 
 
.small-button { 
 
  border: none; 
 
  padding: 
    6px 10px; 
 
  border-radius: 7px; 
 
  background: 
    #fee2e2; 
 
  color: 
    #991b1b; 
 
  font-size: .6rem; 
 
  font-weight: 900; 
 
  cursor: pointer; 
 
} 
 
 
/* ========================================================= 
   BUTTONS 
========================================================= */ 
 
.primary-button, 
.secondary-button, 
.location-button, 
.outline-button, 
.save-button { 
 
  width: 100%; 
 
  min-height: 48px; 
 
  margin-top: 14px; 
 
  border: none; 
 
  border-radius: 11px; 
 
  font-size: .72rem; 
 
  font-weight: 900; 
 
  cursor: pointer; 
 
  transition: 
    .2s ease; 
 
} 
 
 
.primary-button { 
 
  color: 
    white; 
 
  background: 
    linear-gradient( 
      135deg, 
      #064e3b, 
      #16a34a 
    ); 
 
  box-shadow: 
    0 8px 20px 
    rgba(8,127,91,.18); 
 
} 
 
 
.secondary-button { 
 
  background: 
    #ecfdf5; 
 
  color: 
    #065f46; 
 
  border: 
    1px solid 
    #bbf7d0; 
 
} 
 
 
.location-button { 
 
  background: 
    #087f5b; 
 
  color: 
    white; 
 
} 
 
 
.outline-button { 
 
  background: 
    white; 
 
  color: 
    #475569; 
 
  border: 
    1px solid 
    #dbe7df; 
 
} 
 
 
.save-button { 
 
  background: 
    linear-gradient( 
      135deg, 
      #064e3b, 
      #16a34a 
    ); 
 
  color: 
    white; 
 
} 
 
 
.primary-button:hover, 
.secondary-button:hover, 
.location-button:hover, 
.outline-button:hover, 
.save-button:hover { 
 
  transform: 
    translateY(-2px); 
 
} 
 
 
button:disabled { 
 
  opacity: 
    .45; 
 
  cursor: 
    not-allowed; 
 
  transform: 
    none !important; 
 
} 
 
 
/* ========================================================= 
   AI CARD 
========================================================= */ 
 
.ai-card { 
 
  padding: 22px; 
 
  border-radius: 18px; 
 
  background: 
    linear-gradient( 
      135deg, 
      #f8fffb, 
      #f1f8f4 
    ); 
 
  border: 
    1px solid 
    #d8e9df; 
 
} 
 
 
.ai-top { 
 
  display: flex; 
 
  justify-content: space-between; 
 
  align-items: center; 
 
} 
 
 
.eyebrow { 
 
  color: 
    #087f5b; 
 
  font-size: .58rem; 
 
  font-weight: 950; 
 
  letter-spacing: 1.4px; 
 
} 
 
 
.ai-top h3 { 
 
  margin-top: 3px; 
 
  font-size: 1rem; 
 
} 
 
 
.result-icon { 
 
  width: 45px; 
  height: 45px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 13px; 
 
  background: 
    white; 
 
  color: 
    #087f5b; 
 
  font-size: .75rem; 
 
  font-weight: 950; 
 
} 
 
 
.ai-result { 
 
  min-height: 62px; 
 
  margin-top: 20px; 
 
  padding: 
    15px; 
 
  display: flex; 
 
  align-items: center; 
 
  border-radius: 12px; 
 
  background: 
    white; 
 
  border: 
    1px solid 
    #dbe7df; 
 
  font-size: .85rem; 
 
  font-weight: 950; 
 
} 
 
 
.confidence-area { 
 
  margin-top: 18px; 
 
} 
 
 
.confidence-header { 
 
  display: flex; 
 
  justify-content: space-between; 
 
  font-size: .68rem; 
 
  color: 
    var(--gray); 
 
} 
 
 
.confidence-header strong { 
 
  color: 
    var(--dark); 
 
} 
 
 
.confidence-bar { 
 
  height: 8px; 
 
  margin-top: 7px; 
 
  overflow: hidden; 
 
  border-radius: 50px; 
 
  background: 
    #e2e8f0; 
 
} 
 
 
.confidence-fill { 
 
  height: 100%; 
 
  border-radius: 50px; 
 
  background: 
    linear-gradient( 
      90deg, 
      #16a34a, 
      #4ade80 
    ); 
 
  transition: 
    width .5s ease; 
 
} 
 
 
.reason-box { 
 
  margin-top: 18px; 
 
  padding: 14px; 
 
  border-left: 
    4px solid 
    #16a34a; 
 
  border-radius: 8px; 
 
  background: 
    #dcfce7; 
 
} 
 
 
.reason-box span { 
 
  color: 
    #065f46; 
 
  font-size: .57rem; 
 
  font-weight: 950; 
 
  letter-spacing: 1px; 
 
} 
 
 
.reason-box p { 
 
  margin-top: 5px; 
 
  color: 
    #36594a; 
 
  font-size: .7rem; 
 
  line-height: 1.55; 
 
}


/* =========================================================
   SUGGESTED ACTION PANEL
========================================================= */

.suggestion-panel {

  margin-top: 12px;

}


.suggestion-panel span {

  color:
    var(--green);

}


.suggestion-panel p {

  margin-top: 8px;

}


/* ========================================================= 
   ESP32 
========================================================= */ 
 
.esp-card { 
 
  margin-top: 14px; 
 
  padding: 17px; 
 
  border: 
    1px solid 
    #bbf7d0; 
 
  border-radius: 16px; 
 
  background: 
    linear-gradient( 
      135deg, 
      #f0fdf4, 
      #ecfdf5 
    ); 
 
} 
 
 
.esp-header { 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 10px; 
 
} 
 
 
.esp-icon { 
 
  width: 40px; 
  height: 40px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 10px; 
 
  background: 
    white; 
 
} 
 
 
.esp-header strong { 
 
  display: block; 
 
  font-size: .67rem; 
 
  letter-spacing: .8px; 
 
} 
 
 
.esp-header span { 
 
  display: block; 
 
  margin-top: 3px; 
 
  color: 
    var(--gray); 
 
  font-size: .58rem; 
 
} 
 
 
.esp-status { 
 
  margin-left: auto; 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 5px; 
 
  color: 
    var(--gray); 
 
  font-size: .58rem; 
 
  font-weight: 800; 
 
} 
 
 
#espDot { 
 
  width: 7px; 
  height: 7px; 
 
  border-radius: 50%; 
 
  background: 
    #94a3b8; 
 
} 
 
 
.led-preview { 
 
  display: flex; 
 
  gap: 20px; 
 
  margin-top: 16px; 
 
} 
 
 
.led-item { 
 
  display: flex; 
 
  align-items: center; 
 
  gap: 7px; 
 
  font-size: .65rem; 
 
  font-weight: 800; 
 
} 
 
 
.led { 
 
  width: 14px; 
  height: 14px; 
 
  border-radius: 50%; 
 
} 
 
 
.red-led { 
 
  background: 
    #ef4444; 
 
  box-shadow: 
    0 0 14px 
    rgba(239,68,68,.75); 
 
} 
 
 
.green-led { 
 
  background: 
    #22c55e; 
 
  box-shadow: 
    0 0 14px 
    rgba(34,197,94,.75); 
 
} 
 
 
/* ========================================================= 
   LOCATION 
========================================================= */ 
 
.location-grid { 
 
  display: grid; 
 
  grid-template-columns: 
    .8fr 
    1.2fr; 
 
  gap: 22px; 
 
} 
 
 
.button-row { 
 
  display: grid; 
 
  grid-template-columns: 
    1fr 
    90px; 
 
  gap: 10px; 
 
} 
 
 
.button-row button { 
 
  margin-top: 0; 
 
} 
 
 
.coordinates-grid { 
 
  display: grid; 
 
  grid-template-columns: 
    1fr 
    1fr; 
 
  gap: 10px; 
 
} 
 
 
.input-group { 
 
  margin-top: 14px; 
 
} 
 
 
.input-group label { 
 
  display: block; 
 
  margin-bottom: 6px; 
 
  color: 
    #334155; 
 
  font-size: .64rem; 
 
  font-weight: 850; 
 
} 
 
 
.input-group input, 
.input-group textarea { 
 
  width: 100%; 
 
  padding: 
    12px; 
 
  border: 
    1px solid 
    #d6e2dc; 
 
  border-radius: 10px; 
 
  outline: none; 
 
  background: 
    #fbfefc; 
 
  font-family: inherit; 
 
  font-size: .72rem; 
 
} 
 
 
.input-group input:focus, 
.input-group textarea:focus { 
 
  border-color: 
    #16a34a; 
 
  box-shadow: 
    0 0 0 3px 
    rgba(22,163,74,.1); 
 
} 
 
 
.input-group textarea { 
 
  resize: vertical; 
 
} 
 
 
.map-container { 
 
  overflow: hidden; 
 
  min-height: 430px; 
 
  border-radius: 18px; 
 
  border: 
    1px solid 
    var(--border); 
 
} 
 
 
.map { 
 
  width: 100%; 
 
  min-height: 430px; 
 
  height: 100%; 
 
} 
 
 
/* ========================================================= 
   RECORDS 
========================================================= */ 
 
.records-title-row { 
 
  display: flex; 
 
  align-items: center; 
 
  justify-content: space-between; 
 
  gap: 20px; 
 
  margin-bottom: 24px; 
 
} 
 
 
.records-heading { 
 
  margin-bottom: 0; 
 
 
} 
 
 
.clear-records-button { 
 
  border: none; 
 
  padding: 
    10px 14px; 
 
  border-radius: 10px; 
 
  background: 
    #fee2e2; 
 
  color: 
    #991b1b; 
 
  font-size: .65rem; 
 
  font-weight: 900; 
 
  cursor: pointer; 
 
} 
 
 
.records-container { 
 
  display: grid; 
 
  gap: 13px; 
 
} 
 
 
.empty-records { 
 
  padding: 
    55px 20px; 
 
  text-align: center; 
 
  border: 
    2px dashed 
    #dbe7df; 
 
  border-radius: 15px; 
 
} 
 
 
.empty-icon { 
 
  font-size: 
    2.5rem; 
 
  color: 
    #16a34a; 
 
} 
 
 
.empty-records h3 { 
 
  margin-top: 10px; 
 
  font-size: .9rem; 
 
} 
 
 
.empty-records p { 
 
  margin-top: 5px; 
 
  color: 
    var(--gray); 
 
  font-size: .68rem; 
 
} 
 
 
/* ========================================================= 
   HOW IT WORKS 
========================================================= */ 
 
.how-section { 
 
  background: 
    linear-gradient( 
      135deg, 
      #ffffff, 
      #effcf4 
    ); 
 
} 
 
 
.how-grid { 
 
  display: grid; 
 
  grid-template-columns: 
    repeat(4,1fr); 
 
  gap: 14px; 
 
} 
 
 
.how-card { 
 
  position: relative; 
 
  min-height: 205px; 
 
  padding: 22px; 
 
  overflow: hidden; 
 
  border: 
    1px solid 
    #dbe7df; 
 
  border-radius: 16px; 
 
  background: 
    rgba(255,255,255,.8); 
 
  transition: 
    .25s ease; 
 
} 
 
 
.how-card:hover { 
 
  transform: 
    translateY(-5px); 
 
  box-shadow: 
    0 15px 35px 
    rgba(6,78,59,.1); 
 
} 
 
 
.how-number { 
 
  position: absolute; 
 
  top: 10px; 
  right: 14px; 
 
  color: 
    #dcfce7; 
 
  font-size: 
    2.5rem; 
 
  font-weight: 
    950; 
 
} 
 
 
.how-icon { 
 
  width: 52px; 
  height: 52px; 
 
  display: grid; 
 
  place-items: center; 
 
  border-radius: 14px; 
 
  background: 
    #dcfce7; 
 
  font-size: 1.4rem; 
 
} 
 
 
.how-card h3 { 
 
  margin-top: 17px; 
 
  font-size: .88rem; 
 
} 
 
 
.how-card p { 
 
  margin-top: 7px; 
 
  color: 
    var(--gray); 
 
  font-size: .68rem; 
 
  line-height: 1.6; 
 
} 
 
 
/* ========================================================= 
   FOOTER 
========================================================= */ 
 
.main-footer { 
 
  position: relative; 
 
  overflow: hidden; 
 
  padding: 
    40px 0; 
 
  color: 
    white; 
 
  background: 
    #022c22; 
 
} 
 
 
.footer-grid { 
 
  position: absolute; 
 
  inset: 0; 
 
  opacity: .08; 
 
  background-image: 
 
    linear-gradient( 
      rgba(255,255,255,.5) 1px, 
      transparent 1px 
    ), 
 
    linear-gradient( 
      90deg, 
      rgba(255,255,255,.5) 1px, 
      transparent 1px 
    ); 
 
  background-size: 
    30px 30px; 
 
} 
 
 
.footer-content { 
 
  position: relative; 
 
  z-index: 2; 
 
  width: 
    min(1200px,92%); 
 
  margin: auto; 
 
  display: flex; 
 
  align-items: center; 
 
  justify-content: space-between; 
 
  gap: 25px; 
 
} 
 
 
.footer-content strong { 
 
  font-size: .82rem; 
 
  letter-spacing: 2px; 
 
} 
 
 
.footer-content p { 
 
  max-width: 450px; 
 
  margin-top: 6px; 
 
  color: 
    rgba(255,255,255,.5); 
 
  font-size: .64rem; 
 
  line-height: 1.5; 
 
} 
 
 
.footer-school { 
 
  text-align: right; 
 
} 
 
 
.footer-school span { 
 
  display: block; 
 
  margin-top: 5px; 
 
  color: 
    #86efac; 
 
  font-size: .6rem; 
 
} 
 
 
/* ========================================================= 
   MESSAGE 
========================================================= */ 
 
.message-box { 
 
  position: fixed; 
 
  right: 22px; 
  bottom: 22px; 
 
  z-index: 9999; 
 
  max-width: 350px; 
 
  padding: 
    13px 17px; 
 
  border-radius: 12px; 
 
  background: 
    #064e3b; 
 
  color: 
    white; 
 
  box-shadow: 
    0 15px 40px 
    rgba(0,0,0,.2); 
 
  font-size: .7rem; 
 
  font-weight: 750; 
 
  opacity: 0; 
 
  transform: 
    translateY(15px); 
 
  pointer-events: none; 
 
  transition: 
    .25s ease; 
 
} 
 
 
.message-box.show { 
 
  opacity: 1; 
 
  transform: 
    translateY(0); 
 
} 
 
 
.message-box.success { 
 
  background: 
    #15803d; 
 
} 
 
 
.message-box.error { 
 
  background: 
    #b91c1c; 
 
} 
 
 
/* ========================================================= 
   UTILITIES 
========================================================= */ 
 
.hidden { 
 
  display: none !important; 
 
} 
 
 
/* ========================================================= 
   MAP 
========================================================= */ 
 
.leaflet-container { 
 
  font-family: 
    Inter, 
    "Segoe UI", 
    Arial, 
    sans-serif; 
 
} 
 
 
.custom-marker { 
 
  width: 18px; 
  height: 18px; 
 
  border-radius: 50%; 
 
  border: 
    3px solid white; 
 
  box-shadow: 
    0 3px 12px 
    rgba(0,0,0,.25); 
 
} 
 
 
.custom-marker.possible { 
 
  background: 
    #dc2626; 
 
} 
 
 
.custom-marker.not-possible { 
 
  background: 
    #16a34a; 
 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 950px) { 
 
 
  .school-info { 
    display: none; 
  } 
 
 
  .hero-inner { 
 
    grid-template-columns: 
      1fr; 
 
    text-align: center; 
 
  } 
 
 
  .hero-copy { 
 
    margin: auto; 
 
  } 
 
 
  .hero-description { 
 
    margin-left: auto; 
    margin-right: auto; 
 
  } 
 
 
  .hero-pills { 
 
    justify-content: center; 
 
  } 
 
 
  .hero-mini-stats { 
 
    justify-content: center; 
 
  } 
 
 
  .dashboard-grid { 
 
    grid-template-columns: 
      1fr; 
 
  } 
 
 
  .inspection-grid { 
 
    grid-template-columns: 
      1fr; 
 
  } 
 
 
  .location-grid { 
 
    grid-template-columns: 
      1fr; 
 
  } 
 
 
  .how-grid { 
 
    grid-template-columns: 
      repeat(2,1fr); 
 
  } 
 
} 
 
 
@media (max-width: 700px) { 
 
 
  .main-header { 
 
    min-height: 
      82px; 
 
  } 
 
 
  .header-inner { 
 
    min-height: 
      82px; 
 
  } 
 
 
  .logo-ring { 
 
    width: 65px; 
    height: 65px; 
 
  } 
 
 
  .school-logo { 
 
    width: 57px; 
    height: 57px; 
 
  } 
 
 
  .brand-name { 
 
    font-size: 
      1.25rem; 
 
    letter-spacing: 
      2px; 
 
  } 
 
 
  .brand-subtitle { 
 
    font-size: 
      .48rem; 
 
  } 
 
 
  .hero { 
 
    padding-top: 
      55px; 
 
  } 
 
 
  .hero h1 { 
 
    font-size: 
      clamp( 
        3rem, 
        15vw, 
        4.5rem 
      ); 
 
    letter-spacing: 
      -3px; 
 
  } 
 
 
  .mosquito-stage { 
 
    min-height: 
      430px; 
 
  } 
 
 
  .mosquito-wrap { 
 
    width: 
      280px; 
 
    height: 
      280px; 
 
  } 
 
 
  .mosquito-svg { 
 
    width: 
      260px; 
 
    height: 
      260px; 
 
  } 
 
 
  .radar-outer { 
 
    width: 
      340px; 
 
    height: 
      340px; 
 
  } 
 
 
  .radar-middle { 
 
    width: 
      270px; 
 
    height: 
      270px; 
 
  } 
 
 
  .radar-inner { 
 
    width: 
      200px; 
 
    height: 
      200px; 
 
  } 
 
 
  .scan-beam { 
 
    width: 
      270px; 
 
  } 
 
 
  .hero-workflow { 
 
    flex-direction: 
      column; 
 
    align-items: 
      stretch; 
 
    border-radius: 
      16px; 
 
  } 
 
 
  .flow-arrow { 
 
    text-align: 
      center; 
 
    transform: 
      rotate(90deg); 
 
  } 
 
 
  .section-card { 
 
    padding: 
      21px; 
 
    border-radius: 
      17px; 
 
  } 
 
 
  .coordinates-grid { 
 
    grid-template-columns: 
      1fr; 
 
  } 
 
 
  .records-title-row { 
 
    flex-direction: 
      column; 
 
    align-items: 
      stretch; 
 
  } 
 
 
  .clear-records-button { 
 
    width: 
      100%; 
 
  } 
 
 
  .how-grid { 
 
    grid-template-columns: 
      1fr; 
 
  } 
 
 
  .footer-content { 
 
    flex-direction: 
      column; 
 
    align-items: 
      flex-start; 
 
  } 
 
 
  .footer-school { 
 
    text-align: 
      left; 
 
  } 
 
}