{"id":571,"date":"2025-06-15T03:00:42","date_gmt":"2025-06-15T03:00:42","guid":{"rendered":"https:\/\/firerant.com.au\/?page_id=571"},"modified":"2026-10-19T12:16:21","modified_gmt":"2026-10-19T12:16:21","slug":"app","status":"publish","type":"page","link":"https:\/\/firerant.com.au\/?page_id=571","title":{"rendered":"APP"},"content":{"rendered":"\n<style>\n.fr-apphero-wrapper {\n  font-family: Inter, -apple-system, sans-serif;\n  position: relative;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.fr-apphero-image {\n  position: absolute;\n  inset: 0;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Untitled-design-2026-06-24T013817.446-scaled.png');\n  background-size: cover;\n  background-position: center center;\n  background-repeat: no-repeat;\n  z-index: 0;\n}\n.fr-apphero-wrapper::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.35) 45%, rgba(20,0,0,0.65) 100%);\n  z-index: 1;\n}\n\n\/* NAV *\/\n.fr-apphero-nav {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 40px;\n  background: transparent;\n}\n.fr-apphero-nav-logo img {\n  height: 45px;\n  width: auto;\n}\n.fr-apphero-nav-links {\n  display: flex;\n  align-items: center;\n  gap: 2rem;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.fr-apphero-nav-links li a {\n  color: rgba(255,255,255,0.8);\n  text-decoration: none;\n  font-size: 0.85rem;\n  font-weight: 600;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  transition: color 0.3s;\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n.fr-apphero-nav-links li a:hover { color: #ff3b3b; }\n.fr-apphero-nav-links li.active a { color: #ff3b3b; }\n.fr-apphero-nav-links li a i { font-size: 0.9rem; }\n.fr-apphero-nav-links li.fr-apphero-cta a {\n  background: #ff3b3b;\n  color: #fff;\n  padding: 10px 26px;\n  border-radius: 980px;\n  letter-spacing: 0.5px;\n  font-weight: 500;\n  font-size: 0.82rem;\n  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;\n  box-shadow: 0 2px 10px rgba(255,59,59,0.25);\n}\n.fr-apphero-nav-links li.fr-apphero-cta a:hover {\n  background: #e62e2e;\n  transform: scale(1.04);\n  box-shadow: 0 4px 16px rgba(255,59,59,0.4);\n  color: #fff;\n}\n\n\/* Mobile toggle *\/\n.fr-apphero-toggle {\n  display: none;\n  flex-direction: column;\n  gap: 5px;\n  cursor: pointer;\n  padding: 5px;\n}\n.fr-apphero-toggle span {\n  width: 25px;\n  height: 2px;\n  background: #fff;\n  border-radius: 2px;\n  transition: 0.3s;\n}\n\n\/* HERO CONTENT *\/\n.fr-apphero-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n  padding: 2rem;\n}\n.fr-apphero-content .fr-apphero-label {\n  color: #ff3b3b;\n  font-size: 0.85rem;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  font-weight: 700;\n  margin: 0 0 1.2rem;\n}\n.fr-apphero-content .fr-apphero-line-small {\n  font-size: clamp(1.2rem, 3vw, 1.8rem);\n  font-weight: 700;\n  color: rgba(255,255,255,0.85);\n  margin: 0 0 0.5rem;\n  letter-spacing: 1px;\n}\n.fr-apphero-content .fr-apphero-line-large {\n  font-size: clamp(2.2rem, 7vw, 4.2rem);\n  font-weight: 900;\n  color: #fff;\n  margin: 0 0 0.5rem;\n  line-height: 1.15;\n  white-space: nowrap;\n}\n.fr-apphero-content .fr-apphero-line-red {\n  font-size: clamp(1.2rem, 3vw, 1.8rem);\n  font-weight: 700;\n  color: #ff3b3b;\n  margin: 0 0 1.5rem;\n  letter-spacing: 1px;\n}\n.fr-apphero-content .fr-apphero-desc {\n  color: rgba(255,255,255,0.7);\n  font-size: 1.05rem;\n  line-height: 1.8;\n  max-width: 650px;\n  margin: 0 auto 2.5rem;\n}\n.fr-apphero-buttons {\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n.fr-apphero-btn-p {\n  display: inline-block;\n  padding: 14px 36px;\n  background: #ff3b3b;\n  color: #fff;\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.88rem;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  border-radius: 980px;\n  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;\n  box-shadow: 0 2px 10px rgba(255,59,59,0.25);\n}\n.fr-apphero-btn-p:hover {\n  background: #e62e2e;\n  transform: scale(1.04);\n  box-shadow: 0 4px 16px rgba(255,59,59,0.4);\n  color: #fff;\n}\n.fr-apphero-btn-o {\n  display: inline-block;\n  padding: 14px 36px;\n  background: transparent;\n  color: #fff;\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.88rem;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  border-radius: 980px;\n  border: 2px solid rgba(255,255,255,0.35);\n  transition: border-color 0.3s, color 0.3s, transform 0.2s;\n}\n.fr-apphero-btn-o:hover {\n  border-color: #ff3b3b;\n  color: #ff3b3b;\n  transform: scale(1.04);\n}\n\n\/* ===== STATS CARDS \u2014 BOTTOM OVERLAY ===== *\/\n.fr-apphero-stats {\n  position: absolute;\n  bottom: 30px;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  padding: 0 40px;\n}\n.fr-apphero-stats-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 1rem;\n  max-width: 1100px;\n  margin: 0 auto;\n}\n.fr-apphero-stat {\n  background: rgba(10,10,10,0.6);\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n  border: 1px solid rgba(255,59,59,0.12);\n  border-radius: 14px;\n  padding: 20px 16px;\n  text-align: center;\n  transition: border-color 0.3s, transform 0.3s;\n}\n.fr-apphero-stat:hover {\n  border-color: rgba(255,59,59,0.35);\n  transform: translateY(-3px);\n}\n.fr-apphero-stat-num {\n  font-size: clamp(1.6rem, 3.5vw, 2.2rem);\n  font-weight: 900;\n  color: #ff3b3b;\n  margin: 0 0 0.4rem;\n  line-height: 1;\n}\n.fr-apphero-stat-lbl {\n  font-size: 0.72rem;\n  color: rgba(255,255,255,0.6);\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  line-height: 1.4;\n  margin: 0;\n}\n.fr-apphero-stat-src {\n  font-size: 0.6rem;\n  color: rgba(255,255,255,0.25);\n  margin-top: 0.4rem;\n  font-style: italic;\n}\n\n\/* ===== MOBILE \u2014 COMPLETELY DIFFERENT LAYOUT ===== *\/\n@media (max-width: 768px) {\n  .fr-apphero-wrapper {\n    min-height: auto;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .fr-apphero-wrapper::before {\n    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.95) 100%);\n  }\n\n  \/* Nav \u2014 minimal *\/\n  .fr-apphero-nav {\n    padding: 14px 20px;\n    flex-wrap: wrap;\n  }\n\n  .fr-apphero-nav-logo img {\n    height: 32px;\n  }\n\n  .fr-apphero-toggle {\n    display: flex;\n  }\n\n  .fr-apphero-nav-links {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    gap: 0;\n    margin-top: 12px;\n    background: rgba(0,0,0,0.95);\n    border-radius: 16px;\n    padding: 16px 20px;\n    border: 1px solid rgba(255,59,59,0.1);\n  }\n\n  .fr-apphero-nav-links.active {\n    display: flex;\n  }\n\n  .fr-apphero-nav-links li {\n    width: 100%;\n  }\n\n  .fr-apphero-nav-links li a {\n    padding: 12px 0;\n    font-size: 0.82rem;\n    border-bottom: 1px solid rgba(255,255,255,0.05);\n    width: 100%;\n  }\n\n  .fr-apphero-nav-links li:last-child a {\n    border-bottom: none;\n  }\n\n  .fr-apphero-nav-links li.fr-apphero-cta {\n    margin-top: 8px;\n  }\n\n  .fr-apphero-nav-links li.fr-apphero-cta a {\n    justify-content: center;\n    border-bottom: none;\n  }\n\n  \/* Hero content \u2014 mobile curated *\/\n  .fr-apphero-content {\n    padding: 100px 24px 40px;\n    text-align: left;\n  }\n\n  .fr-apphero-content .fr-apphero-label {\n    font-size: 0.68rem;\n    letter-spacing: 2.5px;\n    margin-bottom: 1rem;\n  }\n\n  .fr-apphero-content .fr-apphero-line-small {\n    font-size: 0.85rem;\n    letter-spacing: 0.5px;\n    margin-bottom: 0.4rem;\n  }\n\n  .fr-apphero-content .fr-apphero-line-large {\n    white-space: normal;\n    font-size: 1.75rem;\n    line-height: 1.2;\n    margin-bottom: 0.6rem;\n  }\n\n  .fr-apphero-content .fr-apphero-line-red {\n    font-size: 0.8rem;\n    letter-spacing: 1px;\n    margin-bottom: 1.2rem;\n  }\n\n  .fr-apphero-content .fr-apphero-desc {\n    font-size: 0.85rem;\n    line-height: 1.7;\n    margin-bottom: 1.8rem;\n    color: rgba(255,255,255,0.6);\n  }\n\n  \/* Buttons \u2014 stacked, full width *\/\n  .fr-apphero-buttons {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 10px;\n  }\n\n  .fr-apphero-btn-p,\n  .fr-apphero-btn-o {\n    padding: 14px 24px;\n    font-size: 0.8rem;\n    text-align: center;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  \/* Stats \u2014 horizontal scroll strip (FIXED CLIPPING) *\/\n  .fr-apphero-stats {\n    position: relative;\n    bottom: auto;\n    padding: 24px 0 30px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n\n  .fr-apphero-stats::-webkit-scrollbar {\n    display: none;\n  }\n\n  .fr-apphero-stats-grid {\n    display: flex;\n    gap: 10px;\n    padding: 0 24px;\n    width: max-content;\n  }\n\n  .fr-apphero-stats-grid::after {\n    content: '';\n    min-width: 24px;\n    flex-shrink: 0;\n  }\n\n  .fr-apphero-stat {\n    min-width: 140px;\n    padding: 16px 14px;\n    border-radius: 12px;\n    flex-shrink: 0;\n  }\n\n  .fr-apphero-stat-num {\n    font-size: 1.5rem;\n  }\n\n  .fr-apphero-stat-lbl {\n    font-size: 0.6rem;\n    letter-spacing: 0.5px;\n  }\n\n  .fr-apphero-stat-src {\n    font-size: 0.52rem;\n  }\n}\n\n@media (max-width: 380px) {\n  .fr-apphero-content {\n    padding: 90px 18px 30px;\n  }\n\n  .fr-apphero-content .fr-apphero-line-large {\n    font-size: 1.5rem;\n  }\n\n  .fr-apphero-stat {\n    min-width: 125px;\n    padding: 14px 10px;\n  }\n\n  .fr-apphero-stat-num {\n    font-size: 1.3rem;\n  }\n}\n<\/style>\n\n<div class=\"fr-apphero-wrapper\">\n  <!-- Image Background -->\n  <div class=\"fr-apphero-image\"><\/div>\n\n  <!-- Navigation -->\n  <nav class=\"fr-apphero-nav\">\n    <a href=\"https:\/\/firerant.com.au\/\" class=\"fr-apphero-nav-logo\">\n      <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/FR-logo-scaled.png\" alt=\"Fire Rant Logo\">\n    <\/a>\n    <div class=\"fr-apphero-toggle\" onclick=\"this.nextElementSibling.classList.toggle('active')\">\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n    <\/div>\n    <ul class=\"fr-apphero-nav-links\">\n      <li><a href=\"https:\/\/firerant.com.au\/?page_id=573\"><i class=\"fas fa-map-marker-alt\"><\/i> Map<\/a><\/li>\n      <li class=\"active\"><a href=\"https:\/\/firerant.com.au\/?page_id=571\"><i class=\"fas fa-mobile-alt\"><\/i> App<\/a><\/li>\n      <li><a href=\"https:\/\/firerant.com.au\/?page_id=392\"><i class=\"fas fa-info-circle\"><\/i> About<\/a><\/li>\n      <li><a href=\"https:\/\/firerant.com.au\/?page_id=1452\"><i class=\"fas fa-language\"><\/i> \u4e2d\u6587<\/a><\/li>\n      <li><\/li>\n      <li class=\"fr-apphero-cta\"><a href=\"https:\/\/firerant.com.au\/?page_id=571\"><i class=\"fas fa-download\"><\/i> Get the App<\/a><\/li>\n    <\/ul>\n  <\/nav>\n\n  <!-- Hero Content -->\n  <div class=\"fr-apphero-content\">\n    <p class=\"fr-apphero-label\">The App<\/p>\n    <p class=\"fr-apphero-line-small\">PHOTOGRAPH. IDENTIFY. REPORT.<\/p>\n    <h1 class=\"fr-apphero-line-large\">CITIZEN BIOSECURITY IN YOUR POCKET.<\/h1>\n    <p class=\"fr-apphero-line-red\">AI-POWERED. GEO-TAGGED. GAMIFIED.<\/p>\n    <p class=\"fr-apphero-desc\">Fire Rant turns every smartphone into a surveillance tool \u2014 real-time nest identification, evidence-grade reporting, and community-driven engagement in a single platform.<\/p>\n    <div class=\"fr-apphero-buttons\">\n      <a href=\"https:\/\/firerant.com.au\/?page_id=1344\" class=\"fr-apphero-btn-p\">Ask about iOS access<\/a>\n      <a href=\"#features\" class=\"fr-apphero-btn-o\">Explore Features<\/a>\n    <\/div>\n  <\/div>\n\n  <!-- Stats Cards \u2014 Bottom -->\n  <div class=\"fr-apphero-stats\">\n    <div class=\"fr-apphero-stats-grid\">\n\n      <div class=\"fr-apphero-stat\">\n        <p class=\"fr-apphero-stat-num\">85%+<\/p>\n        <p class=\"fr-apphero-stat-lbl\">AI confidence score<\/p>\n        <p class=\"fr-apphero-stat-src\">Computer vision model<\/p>\n      <\/div>\n\n      <div class=\"fr-apphero-stat\">\n        <p class=\"fr-apphero-stat-num\">20K+<\/p>\n        <p class=\"fr-apphero-stat-lbl\">Training images from iNaturalist<\/p>\n        <p class=\"fr-apphero-stat-src\">Verified S. invicta data<\/p>\n      <\/div>\n\n      <div class=\"fr-apphero-stat\">\n        <p class=\"fr-apphero-stat-num\">60s<\/p>\n        <p class=\"fr-apphero-stat-lbl\">Nest identification speed<\/p>\n        <p class=\"fr-apphero-stat-src\">Real-time inference<\/p>\n      <\/div>\n\n      <div class=\"fr-apphero-stat\">\n        <p class=\"fr-apphero-stat-num\">99%<\/p>\n        <p class=\"fr-apphero-stat-lbl\">Biosecurity alerts from citizens<\/p>\n        <p class=\"fr-apphero-stat-src\">National data, 2026<\/p>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n.fr-appintro {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.fr-appintro-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 4rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-appintro-text .fr-label {\n  color: #ff3b3b;\n  font-size: 0.8rem;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  margin-bottom: 0.5rem;\n}\n\n.fr-appintro-text h2 {\n  color: #fff;\n  font-size: 2.2rem;\n  font-weight: 800;\n  margin: 0 0 1.5rem;\n}\n\n.fr-appintro-divider {\n  width: 60px;\n  height: 3px;\n  background: #ff3b3b;\n  margin: 0 0 1.5rem;\n}\n\n.fr-appintro-text p {\n  color: rgba(255,255,255,0.75);\n  font-size: 1rem;\n  line-height: 1.85;\n  margin-bottom: 1.5rem;\n}\n\n.fr-appintro-text .fr-tagline {\n  color: #ff3b3b;\n  font-weight: 700;\n  font-size: 1.1rem;\n  margin-top: 1.5rem;\n  letter-spacing: 1px;\n}\n\n.fr-appintro-highlights {\n  list-style: none;\n  padding: 0;\n  margin: 0 0 24px;\n}\n\n.fr-appintro-highlights li {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.04);\n  color: rgba(255,255,255,0.75);\n  font-size: 0.92rem;\n  line-height: 1.6;\n}\n\n.fr-appintro-highlights li:last-child { border-bottom: none; }\n\n.fr-appintro-highlights li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n\n.fr-appintro-highlights li strong { color: #fff; }\n\n.fr-appintro-btns {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-top: 1.5rem;\n}\n\n.fr-appintro-btn-p {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 30px;\n  background: #ff3b3b;\n  color: #fff;\n  text-decoration: none;\n  font-weight: 700;\n  font-size: 0.82rem;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-radius: 980px;\n  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;\n  box-shadow: 0 2px 10px rgba(255,59,59,0.25);\n}\n\n.fr-appintro-btn-p:hover {\n  background: #e62e2e;\n  transform: scale(1.04);\n  box-shadow: 0 4px 16px rgba(255,59,59,0.4);\n  color: #fff;\n}\n\n.fr-appintro-btn-o {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 30px;\n  background: transparent;\n  color: #fff;\n  text-decoration: none;\n  font-weight: 700;\n  font-size: 0.82rem;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-radius: 980px;\n  border: 2px solid rgba(255,255,255,0.2);\n  transition: border-color 0.3s, color 0.3s, transform 0.2s;\n}\n\n.fr-appintro-btn-o:hover {\n  border-color: #ff3b3b;\n  color: #ff3b3b;\n  transform: scale(1.04);\n}\n\n\/* ===== RIGHT COLUMN \u2014 AUTO-PLAY iPHONE ===== *\/\n.frap-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n}\n\n.frap-phone {\n  position: relative;\n  width: 320px;\n  height: 640px;\n  background: #000;\n  border-radius: 44px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 25px 70px rgba(0,0,0,.75);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar *\/\n.frap-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 30;\n}\n\n.frap-status-r { text-align: right; font-weight: 600; }\n\n.frap-island {\n  width: 110px;\n  height: 28px;\n  background: #000;\n  border-radius: 20px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n}\n\n.frap-island img { width: 16px; height: 16px; object-fit: contain; }\n\n\/* ===== SCREENS ===== *\/\n.frap-scr {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.6s ease, transform 0.6s ease;\n  pointer-events: none;\n  overflow: hidden;\n}\n\n.frap-scr.active {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n\/* Screen overlay label *\/\n.frap-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 20;\n  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);\n  padding: 60px 20px 24px;\n  opacity: 0;\n  transform: translateY(10px);\n  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;\n}\n\n.frap-scr.active .frap-overlay {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.frap-overlay-tag {\n  display: inline-block;\n  background: rgba(255, 59, 59, 0.15);\n  border: 1px solid rgba(255, 59, 59, 0.4);\n  color: #ff3b3b;\n  font-size: 9px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  margin-bottom: 8px;\n}\n\n.frap-overlay-title {\n  font-size: 16px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 4px;\n}\n\n.frap-overlay-desc {\n  font-size: 11px;\n  color: rgba(255,255,255,0.6);\n  margin: 0;\n  line-height: 1.5;\n}\n\n\/* Progress Dots *\/\n.frap-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.frap-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.2);\n  transition: background 0.3s, transform 0.3s;\n}\n\n.frap-dot.active {\n  background: #ff3b3b;\n  transform: scale(1.3);\n}\n\n\/* Screen Label Below Phone *\/\n.frap-screen-label {\n  color: rgba(255,255,255,0.5);\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  transition: color 0.3s;\n  text-align: center;\n}\n\n\/* ===== INDIVIDUAL SCREEN STYLES ===== *\/\n\n\/* Dashboard *\/\n.frap-dash {\n  background: #0d0d0d;\n  padding: 54px 20px 130px;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.frap-dash::-webkit-scrollbar { display: none; }\n.frap-d-greet { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 12px; line-height: 1.15; }\n.frap-d-pts { display: inline-flex; align-items: center; gap: 5px; background: #1b0706; color: #ff3b3b; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-bottom: 24px; }\n.frap-d-sec { margin-bottom: 24px; }\n.frap-d-sec-t { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 12px; }\n.frap-d-rpt { display: grid; grid-template-columns: 44px 1fr 14px; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 10px; }\n.frap-d-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; }\n.frap-d-thumb img { width: 100%; height: 100%; object-fit: cover; }\n.frap-d-rpt-t { font-size: 13px; font-weight: 700; color: #fff; margin: 0; }\n.frap-d-rpt-m { font-size: 10px; color: rgba(255,255,255,0.4); margin: 2px 0 0; }\n.frap-d-link { display: flex; align-items: center; gap: 6px; color: #ff3b3b; font-size: 12px; font-weight: 700; text-decoration: none; margin-top: 8px; }\n.frap-d-ldr { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; margin-bottom: 10px; }\n.frap-d-rank { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.4); }\n.frap-d-rank.gold { color: #ffb000; }\n.frap-d-name { font-size: 13px; color: #fff; font-weight: 600; }\n.frap-d-score { display: inline-flex; align-items: center; gap: 4px; background: #1b0706; color: #ff3b3b; padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; }\n\n\/* Reports *\/\n.frap-reports {\n  background: #0d0d0d;\n  padding: 54px 20px 130px;\n}\n.frap-r-hdr { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 16px; }\n.frap-r-tabs { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }\n.frap-r-tab { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.4); padding-bottom: 10px; }\n.frap-r-tab.on { color: #ff3b3b; border-bottom: 2px solid #ff3b3b; }\n.frap-r-item { display: grid; grid-template-columns: 48px 1fr 14px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }\n.frap-r-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; }\n.frap-r-thumb img { width: 100%; height: 100%; object-fit: cover; }\n.frap-r-t { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 3px; }\n.frap-r-m { font-size: 10px; color: rgba(255,255,255,0.4); margin: 0; }\n\n\/* Camera *\/\n.frap-camera { background: #000; }\n.frap-cam-vid { position: absolute; inset: 0; }\n.frap-cam-vid video { width: 100%; height: 100%; object-fit: cover; }\n.frap-cam-ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 40px; }\n.frap-cam-hint { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 14px; }\n.frap-cam-shutter { width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; position: relative; }\n.frap-cam-shutter::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #ff3b3b; }\n\n\/* Analyzing *\/\n.frap-analyze { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }\n.frap-az-circle { width: 140px; height: 140px; animation: frapSpin 10s linear infinite; position: relative; }\n@keyframes frapSpin { to { transform: rotate(360deg); } }\n.frap-az-circle img { width: 100%; height: 100%; object-fit: contain; }\n.frap-az-vid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }\n.frap-az-vid video { width: 100%; height: 100%; object-fit: cover; }\n.frap-az-title { font-size: 16px; font-weight: 700; color: #111; margin: 0; }\n.frap-az-dots { display: flex; gap: 6px; }\n.frap-az-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,59,59,0.2); animation: frapDotPulse 1.4s ease infinite; }\n.frap-az-dot:nth-child(2) { animation-delay: 0.2s; }\n.frap-az-dot:nth-child(3) { animation-delay: 0.4s; }\n@keyframes frapDotPulse { 0%, 100% { background: rgba(255,59,59,0.2); } 50% { background: #ff3b3b; transform: scale(1.3); } }\n\n\/* Results *\/\n.frap-results { background: #fff; overflow-y: auto; padding: 0; scrollbar-width: none; }\n.frap-results::-webkit-scrollbar { display: none; }\n.frap-res-hdr { background: #ff3b3b; padding: 50px 20px 16px; }\n.frap-res-hdr-t { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }\n.frap-res-body { padding: 20px; }\n.frap-res-alert { text-align: center; padding: 16px 0 20px; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 16px; }\n.frap-res-alert i { font-size: 32px; color: #ff3b3b; margin-bottom: 8px; }\n.frap-res-species { font-size: 20px; font-weight: 800; color: #ff3b3b; margin: 0 0 8px; }\n.frap-res-conf { display: inline-block; background: rgba(255,59,59,0.08); color: #ff3b3b; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }\n.frap-res-sec-t { font-size: 13px; font-weight: 800; color: #111; margin: 16px 0 8px; }\n.frap-res-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #333; margin-bottom: 6px; }\n.frap-res-feat i { color: #ff3b3b; font-size: 6px; margin-top: 5px; }\n.frap-res-btn { display: block; width: 100%; padding: 12px; border-radius: 10px; background: #ff3b3b; color: #fff; font-size: 13px; font-weight: 700; text-align: center; border: none; margin-top: 16px; }\n\n\/* Knowledge Hub *\/\n.frap-articles {\n  background: #0d0d0d;\n  padding: 54px 20px 130px;\n}\n.frap-k-hdr { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 16px; }\n.frap-k-card { border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #111; border: 1px solid rgba(255,255,255,0.06); }\n.frap-k-img { width: 100%; height: 90px; overflow: hidden; }\n.frap-k-img img { width: 100%; height: 100%; object-fit: cover; }\n.frap-k-info { padding: 10px 14px; }\n.frap-k-t { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 4px; }\n.frap-k-cat { font-size: 10px; color: #ff3b3b; font-weight: 600; margin: 0; }\n\n\/* Profile *\/\n.frap-profile {\n  background: #0d0d0d;\n  padding: 54px 20px 130px;\n}\n.frap-p-hdr { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 20px; }\n.frap-p-pts { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }\n.frap-p-pts-lbl { font-size: 11px; color: rgba(255,255,255,0.5); }\n.frap-p-pts-val { font-size: 20px; font-weight: 800; color: #ff3b3b; }\n.frap-p-field { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }\n.frap-p-lbl { font-size: 10px; color: rgba(255,255,255,0.4); margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.5px; }\n.frap-p-val { font-size: 14px; color: #fff; font-weight: 600; margin: 0; }\n.frap-p-btn { display: block; width: 100%; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 10px; }\n.frap-p-btn.danger { border-color: rgba(255,59,59,0.3); color: #ff3b3b; }\n\n\/* Bottom Nav *\/\n.frap-bnav {\n  position: absolute;\n  left: 0; right: 0; bottom: 0;\n  height: 110px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 20;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n\n.frap-bnav.visible { opacity: 1; pointer-events: auto; }\n\n.frap-bnav-cam {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px; height: 26px;\n  color: #fff;\n  display: flex; align-items: center; justify-content: center;\n}\n\n.frap-bnav-cam svg {\n  width: 20px; height: 20px;\n  stroke: currentColor; fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round; stroke-linejoin: round;\n}\n\n.frap-bnav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px; height: 26px;\n  color: rgba(255,255,255,0.7);\n  display: flex; align-items: center; justify-content: center;\n}\n\n.frap-bnav-icon svg {\n  width: 20px; height: 20px;\n  stroke: currentColor; fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round; stroke-linejoin: round;\n}\n\n.frap-bnav-icon.bn1 { left: 30px; }\n.frap-bnav-icon.bn2 { left: 88px; }\n.frap-bnav-icon.bn3 { right: 88px; }\n.frap-bnav-icon.bn4 { right: 30px; }\n.frap-bnav-icon.on { color: #fff; }\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-appintro { padding: 60px 20px; }\n  .fr-appintro-grid { grid-template-columns: 1fr; gap: 3rem; }\n  .fr-appintro-text { text-align: center; order: 2; }\n  .fr-appintro-divider { margin: 0 auto 1.5rem; }\n  .frap-wrap { order: 1; }\n  .frap-phone { width: 280px; height: 580px; }\n  .fr-appintro-btns { flex-direction: column; align-items: stretch; }\n  .fr-appintro-btn-p, .fr-appintro-btn-o { width: 100%; justify-content: center; box-sizing: border-box; text-align: center; }\n}\n<\/style>\n\n<div class=\"fr-appintro\">\n  <div class=\"fr-appintro-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-appintro-text\">\n      <p class=\"fr-label\">Introducing Fire Rant<\/p>\n      <h2>EVERY SMARTPHONE. A SURVEILLANCE TOOL.<\/h2>\n<p class=\"fr-demo-fiction-note\" role=\"note\">Illustrative demo. Names, contact details, locations and activity shown here are fictional.<\/p>\n      <div class=\"fr-appintro-divider\"><\/div>\n      <p>\n        Fire Rant is a citizen biosecurity platform that transforms community observations into actionable intelligence. \n        Photograph a suspected nest, receive AI-powered verification in under 60 seconds, and unlock free professional-grade \n        bait delivered to your door.\n      <\/p>\n      <p>\n        Built on 20,000+ verified training images from iNaturalist and designed for Australian conditions \u2014 Fire Rant bridges \n        the gap between community detection and coordinated eradication response.\n      <\/p>\n\n      <ul class=\"fr-appintro-highlights\">\n        <li><i class=\"fas fa-brain\"><\/i><span><strong>AI Nest Identification<\/strong> \u2014 Computer vision trained on verified <em>S. invicta<\/em> data, 85%+ confidence<\/span><\/li>\n        <li><i class=\"fas fa-map-marker-alt\"><\/i><span><strong>Geo-Tagged Reporting<\/strong> \u2014 GPS auto-fill creating evidence-grade location data<\/span><\/li>\n        <li><i class=\"fas fa-trophy\"><\/i><span><strong>Gamified Engagement<\/strong> \u2014 Points, leaderboards, and community rankings<\/span><\/li>\n        \n      <\/ul>\n\n      <div class=\"fr-appintro-btns\">\n        <a href=\"https:\/\/firerant.com.au\/?page_id=1344\" class=\"fr-appintro-btn-p\"><i class=\"fab fa-apple\"><\/i> Ask about iOS access<\/a>\n        <a href=\"#howto\" class=\"fr-appintro-btn-o\"><i class=\"fas fa-play-circle\"><\/i> See How It Works<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- RIGHT \u2014 AUTO-PLAY iPHONE -->\n    <div class=\"frap-wrap\">\n      <div class=\"frap-phone\">\n\n        <!-- Status Bar -->\n        <div class=\"frap-status\">\n          <span>2:34<\/span>\n          <div class=\"frap-island\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\"><\/div>\n          <span class=\"frap-status-r\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- SCREEN 1: Dashboard -->\n        <div class=\"frap-scr frap-dash active\" data-idx=\"0\">\n          <p class=\"frap-d-greet\">Good afternoon,<br>John Doe<\/p>\n          <div class=\"frap-d-pts\"><i class=\"fas fa-star\"><\/i> 660 points<\/div>\n          <div class=\"frap-d-sec\">\n            <p class=\"frap-d-sec-t\">Recent reports<\/p>\n            <div class=\"frap-d-rpt\">\n              <div class=\"frap-d-thumb\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div>\n              <div><p class=\"frap-d-rpt-t\">Demo report 01<\/p><p class=\"frap-d-rpt-m\">Jan 15, 2026<\/p><\/div>\n              <span style=\"color:rgba(255,255,255,.5);font-size:18px\">\u203a<\/span>\n            <\/div>\n            <div class=\"frap-d-rpt\">\n              <div class=\"frap-d-thumb\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div>\n              <div><p class=\"frap-d-rpt-t\">Demo report 02<\/p><p class=\"frap-d-rpt-m\">Jan 14, 2026<\/p><\/div>\n              <span style=\"color:rgba(255,255,255,.5);font-size:18px\">\u203a<\/span>\n            <\/div>\n            <a class=\"frap-d-link\" href=\"#\"><i class=\"fas fa-list\"><\/i> All reports<\/a>\n          <\/div>\n          <div class=\"frap-d-sec\">\n            <p class=\"frap-d-sec-t\">Leaderboard<\/p>\n            <div class=\"frap-d-ldr\">\n              <span class=\"frap-d-rank gold\">#1<\/span>\n              <span class=\"frap-d-name\">John Doe<\/span>\n              <span class=\"frap-d-score\"><i class=\"fas fa-star\"><\/i> 660<\/span>\n            <\/div>\n            <div class=\"frap-d-ldr\">\n              <span class=\"frap-d-rank\">#2<\/span>\n              <span class=\"frap-d-name\">Jamie Doe<\/span>\n              <span class=\"frap-d-score\"><i class=\"fas fa-star\"><\/i> 130<\/span>\n            <\/div>\n            <a class=\"frap-d-link\" href=\"#\"><i class=\"fas fa-chart-bar\"><\/i> See full leaderboard<\/a>\n          <\/div>\n          <!-- Overlay Label -->\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Dashboard<\/span>\n            <p class=\"frap-overlay-title\">Your Command Centre<\/p>\n            <p class=\"frap-overlay-desc\">Points, reports, leaderboard \u2014 everything at a glance<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 2: Camera -->\n        <div class=\"frap-scr frap-camera\" data-idx=\"1\">\n          <div class=\"frap-cam-vid\">\n            <video autoplay muted loop playsinline>\n              <source src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Fire-ant-hero-video.mp4\" type=\"video\/mp4\">\n            <\/video>\n          <\/div>\n          <div class=\"frap-cam-ui\">\n            <span class=\"frap-cam-hint\">Point at suspected nest<\/span>\n            <div class=\"frap-cam-shutter\"><\/div>\n          <\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Camera<\/span>\n            <p class=\"frap-overlay-title\">Capture &#038; Scan<\/p>\n            <p class=\"frap-overlay-desc\">Photograph the nest \u2014 AI analysis begins instantly<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 3: Analyzing -->\n        <div class=\"frap-scr frap-analyze\" data-idx=\"2\">\n          <div class=\"frap-az-circle\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Fire-Ant-circle--scaled.png\" alt=\"Fire Ant Circle\">\n            <div class=\"frap-az-vid\">\n              <video autoplay muted loop playsinline>\n                <source src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Fire-Rant-Custom-Icons.mp4\" type=\"video\/mp4\">\n              <\/video>\n            <\/div>\n          <\/div>\n          <p class=\"frap-az-title\">Analyzing image&#8230;<\/p>\n          <div class=\"frap-az-dots\">\n            <div class=\"frap-az-dot\"><\/div>\n            <div class=\"frap-az-dot\"><\/div>\n            <div class=\"frap-az-dot\"><\/div>\n          <\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">AI Engine<\/span>\n            <p class=\"frap-overlay-title\">Species Identification<\/p>\n            <p class=\"frap-overlay-desc\">20,000+ training images power 85%+ confidence scoring<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 4: Results -->\n        <div class=\"frap-scr frap-results\" data-idx=\"3\">\n          <div class=\"frap-res-hdr\">\n            <p class=\"frap-res-hdr-t\">Analysis Result<\/p>\n          <\/div>\n          <div class=\"frap-res-body\">\n            <div class=\"frap-res-alert\">\n              <i class=\"fas fa-exclamation-triangle\"><\/i>\n              <p class=\"frap-res-species\">RIFA<\/p>\n              <span class=\"frap-res-conf\">Confidence: 85.0%<\/span>\n            <\/div>\n            <p class=\"frap-res-sec-t\">Identified Features<\/p>\n            <div class=\"frap-res-feat\"><i class=\"fas fa-circle\"><\/i><span>Loose, crumbly soil<\/span><\/div>\n            <div class=\"frap-res-feat\"><i class=\"fas fa-circle\"><\/i><span>Multiple tiny, irregular gaps<\/span><\/div>\n            <div class=\"frap-res-feat\"><i class=\"fas fa-circle\"><\/i><span>No single large entrance hole<\/span><\/div>\n            <button class=\"frap-res-btn\">Create Report<\/button>\n          <\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Results<\/span>\n            <p class=\"frap-overlay-title\">Instant Verification<\/p>\n            <p class=\"frap-overlay-desc\">RIFA confirmed \u2014 one tap to submit a verified report<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 5: Reports -->\n        <div class=\"frap-scr frap-reports\" data-idx=\"4\">\n          <p class=\"frap-r-hdr\">My reports<\/p>\n          <div class=\"frap-r-tabs\">\n            <span class=\"frap-r-tab on\">Reports<\/span>\n            <span class=\"frap-r-tab\">Drafts<\/span>\n          <\/div>\n          <div class=\"frap-r-item\">\n            <div class=\"frap-r-thumb\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div>\n            <div><p class=\"frap-r-t\">Demo report 01<\/p><p class=\"frap-r-m\">Jan 15, 2026<\/p><\/div>\n            <span style=\"color:rgba(255,255,255,.5);font-size:18px\">\u203a<\/span>\n          <\/div>\n          <div class=\"frap-r-item\">\n            <div class=\"frap-r-thumb\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div>\n            <div><p class=\"frap-r-t\">Demo report 02<\/p><p class=\"frap-r-m\">Jan 14, 2026<\/p><\/div>\n            <span style=\"color:rgba(255,255,255,.5);font-size:18px\">\u203a<\/span>\n          <\/div>\n          <div class=\"frap-r-item\">\n            <div class=\"frap-r-thumb\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div>\n            <div><p class=\"frap-r-t\">Demo report 05<\/p><p class=\"frap-r-m\">Jan 11, 2026<\/p><\/div>\n            <span style=\"color:rgba(255,255,255,.5);font-size:18px\">\u203a<\/span>\n          <\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Reports<\/span>\n            <p class=\"frap-overlay-title\">Track Every Sighting<\/p>\n            <p class=\"frap-overlay-desc\">Your submission history with timestamps and GPS data<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 6: Knowledge Hub -->\n        <div class=\"frap-scr frap-articles\" data-idx=\"5\">\n          <p class=\"frap-k-hdr\">Knowledge Hub<\/p>\n          <div class=\"frap-k-card\"><div class=\"frap-k-img\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div><div class=\"frap-k-info\"><p class=\"frap-k-t\">How to deal with ants<\/p><p class=\"frap-k-cat\">Prevention and Control<\/p><\/div><\/div>\n          <div class=\"frap-k-card\"><div class=\"frap-k-img\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div><div class=\"frap-k-info\"><p class=\"frap-k-t\">How to identify fire ants<\/p><p class=\"frap-k-cat\">Fire Ant Identification<\/p><\/div><\/div>\n          <div class=\"frap-k-card\"><div class=\"frap-k-img\"><img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"ant\"><\/div><div class=\"frap-k-info\"><p class=\"frap-k-t\">Reporting best practices<\/p><p class=\"frap-k-cat\">Community Guide<\/p><\/div><\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Knowledge Hub<\/span>\n            <p class=\"frap-overlay-title\">Learn &#038; Identify<\/p>\n            <p class=\"frap-overlay-desc\">Expert articles on identification, treatment, and prevention<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- SCREEN 7: Profile -->\n        <div class=\"frap-scr frap-profile\" data-idx=\"6\">\n          <p class=\"frap-p-hdr\">Profile<\/p>\n          <div class=\"frap-p-pts\">\n            <span class=\"frap-p-pts-lbl\">Your Points<\/span>\n            <span class=\"frap-p-pts-val\"><i class=\"fas fa-star\"><\/i> 710<\/span>\n          <\/div>\n          <div class=\"frap-p-field\"><p class=\"frap-p-lbl\">Name<\/p><p class=\"frap-p-val\">John Doe<\/p><\/div>\n          <div class=\"frap-p-field\"><p class=\"frap-p-lbl\">Email<\/p><p class=\"frap-p-val\">john.doe@example.com<\/p><\/div>\n          <div class=\"frap-p-field\"><p class=\"frap-p-lbl\">Level<\/p><p class=\"frap-p-val\">Level 3 \u2014 Sentinel<\/p><\/div>\n          <div class=\"frap-p-btn\">Logout<\/div>\n          <div class=\"frap-p-btn danger\">Delete Account<\/div>\n          <div class=\"frap-overlay\">\n            <span class=\"frap-overlay-tag\">Profile<\/span>\n            <p class=\"frap-overlay-title\">Your Impact<\/p>\n            <p class=\"frap-overlay-desc\">710 points earned \u00b7 Level 3 Sentinel \u00b7 Active reporter<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- BOTTOM NAV -->\n        <div class=\"frap-bnav\" id=\"frapNav\">\n          <div class=\"frap-bnav-cam\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path><circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle><\/svg>\n          <\/div>\n          <div class=\"frap-bnav-icon bn1\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M3 11.5L12 4l9 7.5\"><\/path><path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path><\/svg>\n          <\/div>\n          <div class=\"frap-bnav-icon bn2\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M8 4h8\"><\/path><path d=\"M9 4a3 3 0 0 0 6 0\"><\/path><rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect><path d=\"M8 11h8\"><\/path><path d=\"M8 15h8\"><\/path><\/svg>\n          <\/div>\n          <div class=\"frap-bnav-icon bn3\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path><path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path><\/svg>\n          <\/div>\n          <div class=\"frap-bnav-icon bn4\">\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle><path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path><\/svg>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <!-- Progress Dots -->\n      <div class=\"frap-dots\" id=\"frapDots\">\n        <div class=\"frap-dot active\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n        <div class=\"frap-dot\"><\/div>\n      <\/div>\n\n      <span class=\"frap-screen-label\" id=\"frapLabel\">Dashboard<\/span>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n  var screens = document.querySelectorAll('.frap-scr');\n  var dots = document.querySelectorAll('.frap-dot');\n  var nav = document.getElementById('frapNav');\n  var label = document.getElementById('frapLabel');\n\n  if (!screens.length) return;\n\n  var names = ['Dashboard', 'Camera', 'Analyzing...', 'Results', 'Reports', 'Knowledge Hub', 'Profile'];\n  var navScreens = [0, 4, 5, 6];\n  var current = 0;\n  var interval = 4000;\n\n  function showScreen(idx) {\n    screens.forEach(function(s) { s.classList.remove('active'); });\n    dots.forEach(function(d) { d.classList.remove('active'); });\n    screens[idx].classList.add('active');\n    dots[idx].classList.add('active');\n    label.textContent = names[idx] || '';\n    nav.classList.toggle('visible', navScreens.indexOf(idx) > -1);\n    current = idx;\n  }\n\n  function next() {\n    var nextIdx = (current + 1) % screens.length;\n    showScreen(nextIdx);\n  }\n\n  var autoplay = setInterval(next, interval);\n\n  \/* Pause on hover, resume on leave *\/\n  var phone = document.querySelector('.frap-phone');\n  phone.addEventListener('mouseenter', function() {\n    clearInterval(autoplay);\n  });\n  phone.addEventListener('mouseleave', function() {\n    autoplay = setInterval(next, interval);\n  });\n\n  \/* Click dots to jump *\/\n  dots.forEach(function(dot, i) {\n    dot.addEventListener('click', function() {\n      clearInterval(autoplay);\n      showScreen(i);\n      autoplay = setInterval(next, interval);\n    });\n  });\n});\n<\/script>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP DOWNLOAD CTA SECTION\n     Clean, Apple-style download section\n     Matching site design system (#ff3b3b, black, Inter)\n============================================ -->\n\n\n\n<style>\n.fr-download {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  text-align: center;\n}\n\n.fr-download-inner {\n  max-width: 700px;\n  margin: 0 auto;\n}\n\n.fr-download-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 20px;\n  overflow: hidden;\n  margin: 0 auto 28px;\n  box-shadow: 0 8px 32px rgba(255, 59, 59, 0.3);\n}\n\n.fr-download-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fr-download h2 {\n  color: #fff;\n  font-size: 2.4rem;\n  font-weight: 800;\n  margin: 0 0 12px;\n  letter-spacing: -0.5px;\n}\n\n.fr-download p {\n  color: rgba(255, 255, 255, 0.55);\n  font-size: 1.1rem;\n  line-height: 1.6;\n  margin: 0 0 36px;\n}\n\n.fr-download-btns {\n  display: flex;\n  justify-content: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.fr-download-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 32px;\n  border-radius: 980px;\n  text-decoration: none;\n  font-weight: 700;\n  font-size: 0.95rem;\n  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;\n}\n\n.fr-download-btn:hover {\n  transform: scale(1.04);\n}\n\n.fr-download-btn.apple {\n  background: #fff;\n  color: #000;\n  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);\n}\n\n.fr-download-btn.apple:hover {\n  box-shadow: 0 6px 28px rgba(255, 255, 255, 0.2);\n  color: #000;\n}\n\n.fr-download-btn.google {\n  background: transparent;\n  color: #fff;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.fr-download-btn.google:hover {\n  border-color: #ff3b3b;\n  color: #ff3b3b;\n  box-shadow: 0 4px 20px rgba(255, 59, 59, 0.15);\n}\n\n.fr-download-btn i {\n  font-size: 22px;\n}\n\n.fr-download-btn .fr-btn-text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.2;\n}\n\n.fr-download-btn .fr-btn-sub {\n  font-size: 0.65rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  opacity: 0.7;\n}\n\n.fr-download-btn .fr-btn-store {\n  font-size: 1rem;\n  font-weight: 800;\n}\n\n.fr-download-note {\n  margin-top: 28px;\n  color: rgba(255, 255, 255, 0.3);\n  font-size: 0.8rem;\n}\n\n.fr-download-note i {\n  color: #ff3b3b;\n  margin-right: 4px;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n  .fr-download { padding: 60px 20px; }\n  .fr-download h2 { font-size: 1.8rem; }\n  .fr-download p { font-size: 0.95rem; }\n  .fr-download-btns { flex-direction: column; align-items: center; }\n  .fr-download-btn { width: 100%; max-width: 280px; justify-content: center; }\n}\n<\/style>\n\n<div class=\"fr-download\">\n  <div class=\"fr-download-inner\">\n\n    <div class=\"fr-download-icon\">\n      <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-Jun-13-2025-10_39_07-PM.png\" alt=\"Fire Rant App Icon\">\n    <\/div>\n\n    <h2>Download Fire Rant<\/h2>\n    <p>Join the frontline of Australia&#8217;s biosecurity effort. Detect, report, and earn rewards \u2014 every observation strengthens the national eradication response.<\/p>\n\n    <div class=\"fr-download-btns\">\n      <a href=\"https:\/\/firerant.com.au\/?page_id=1344\" class=\"fr-download-btn apple\">\n        <i class=\"fab fa-apple\"><\/i>\n        <div class=\"fr-btn-text\">\n          <span class=\"fr-btn-sub\">Ask about<\/span>\n          <span class=\"fr-btn-store\">iOS access<\/span>\n        <\/div>\n      <\/a>\n      <a href=\"https:\/\/firerant.com.au\/?page_id=1344\" class=\"fr-download-btn google\">\n        <i class=\"fab fa-google-play\"><\/i>\n        <div class=\"fr-btn-text\">\n          <span class=\"fr-btn-sub\">Ask about<\/span>\n          <span class=\"fr-btn-store\">Android access<\/span>\n        <\/div>\n      <\/a>\n    <\/div>\n\n    <p class=\"fr-download-note\"><i class=\"fas fa-shield-alt\"><\/i> Free to download \u00b7 iOS 15+ &#038; Android 12+ \u00b7 Pilot available in SEQ<\/p>\n\n  <\/div>\n<\/div>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 01\n     Open Fire Rant \u2192 Login \u2192 Loading \u2192 Dashboard\n     FIXED: Frontend rendering + Bottom nav stays fixed\n============================================ -->\n\n\n\n<style>\n.fr-step01 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.fr-step01-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step01-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step01-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step01-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step01-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step01-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step01-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 iPHONE *\/\n.fr-step01-phone-col {\n  display: flex;\n  justify-content: center;\n}\n\n.fr-s01-phone {\n  position: relative;\n  width: 320px;\n  height: 660px;\n  background: #000;\n  border-radius: 48px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 30px 80px rgba(0,0,0,.8);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n  cursor: pointer;\n}\n\n\/* Status Bar *\/\n.fr-s01-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 10;\n}\n\n.fr-s01-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s01-island {\n  width: 110px;\n  height: 28px;\n  background: #000;\n  border-radius: 20px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n}\n\n.fr-s01-island img {\n  width: 16px;\n  height: 16px;\n  object-fit: contain;\n}\n\n\/* ALL STATES *\/\n.fr-s01-state {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n\n.fr-s01-state.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* STATE 1: HOME SCREEN *\/\n.fr-s01-home {\n  padding: 60px 20px 40px;\n}\n\n.fr-s01-home::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-Jun-12-2025-10_59_33-PM-2-1.png') center\/cover;\n  filter: blur(12px) brightness(0.4);\n  z-index: 0;\n}\n\n.fr-s01-appicon {\n  position: relative;\n  z-index: 2;\n  width: 72px;\n  height: 72px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 6px 24px rgba(255, 59, 59, 0.4);\n  margin-bottom: 12px;\n  transition: transform 0.2s;\n}\n\n.fr-s01-appicon:hover {\n  transform: scale(1.08);\n}\n\n.fr-s01-appicon img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fr-s01-appname {\n  position: relative;\n  z-index: 2;\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  text-shadow: 0 1px 4px rgba(0,0,0,0.6);\n  margin-bottom: 24px;\n}\n\n.fr-s01-tap-hint {\n  position: relative;\n  z-index: 2;\n  font-size: 11px;\n  color: rgba(255,255,255,0.4);\n  font-weight: 500;\n  animation: fr01blink 2s infinite;\n}\n\n@keyframes fr01blink {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n\/* STATE 2: LOGIN SCREEN *\/\n.fr-s01-login {\n  background: #0d0d0d;\n  padding: 80px 28px 40px;\n  align-items: stretch;\n  justify-content: flex-start;\n}\n\n.fr-s01-login-logo {\n  width: 64px;\n  height: 64px;\n  border-radius: 16px;\n  overflow: hidden;\n  margin: 0 auto 20px;\n  box-shadow: 0 4px 16px rgba(255, 59, 59, 0.3);\n}\n\n.fr-s01-login-logo img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fr-s01-login-title {\n  font-size: 20px;\n  font-weight: 800;\n  color: #fff;\n  text-align: center;\n  margin: 0 0 6px;\n}\n\n.fr-s01-login-sub {\n  font-size: 12px;\n  color: rgba(255,255,255,0.4);\n  text-align: center;\n  margin: 0 0 28px;\n}\n\n.fr-s01-input {\n  width: 100%;\n  background: rgba(255,255,255,0.05);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 12px;\n  padding: 14px 16px;\n  font-size: 13px;\n  color: rgba(255,255,255,0.7);\n  margin-bottom: 12px;\n  font-family: inherit;\n  box-sizing: border-box;\n}\n\n.fr-s01-input-pass {\n  width: 100%;\n  background: rgba(255,255,255,0.05);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 12px;\n  padding: 14px 16px;\n  font-size: 13px;\n  color: rgba(255,255,255,0.7);\n  margin-bottom: 20px;\n  font-family: inherit;\n  box-sizing: border-box;\n}\n\n.fr-s01-login-btn {\n  width: 100%;\n  background: #ff3b3b;\n  color: #fff;\n  border: none;\n  border-radius: 980px;\n  padding: 14px;\n  font-size: 14px;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  font-family: inherit;\n  margin-bottom: 16px;\n}\n\n.fr-s01-login-btn:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 20px rgba(255, 59, 59, 0.4);\n}\n\n.fr-s01-login-divider {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.fr-s01-login-divider::before,\n.fr-s01-login-divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: rgba(255,255,255,0.08);\n}\n\n.fr-s01-login-divider span {\n  font-size: 10px;\n  color: rgba(255,255,255,0.3);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.fr-s01-social-btns {\n  display: flex;\n  gap: 10px;\n}\n\n.fr-s01-social {\n  flex: 1;\n  background: rgba(255,255,255,0.05);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 12px;\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.7);\n  cursor: pointer;\n  transition: border-color 0.2s;\n}\n\n.fr-s01-social:hover {\n  border-color: rgba(255,255,255,0.2);\n}\n\n.fr-s01-social i {\n  font-size: 14px;\n}\n\n.fr-s01-signup {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 11px;\n  color: rgba(255,255,255,0.35);\n}\n\n.fr-s01-signup a {\n  color: #ff3b3b;\n  text-decoration: none;\n  font-weight: 700;\n}\n\n\/* STATE 3: LOADING SCREEN *\/\n.fr-s01-loading {\n  background: #0d0d0d;\n}\n\n.fr-s01-load-icon {\n  width: 64px;\n  height: 64px;\n  border-radius: 16px;\n  overflow: hidden;\n  margin-bottom: 20px;\n  animation: fr01bounce 1s infinite;\n}\n\n.fr-s01-load-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n@keyframes fr01bounce {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-8px); }\n}\n\n.fr-s01-load-text {\n  font-size: 13px;\n  color: rgba(255,255,255,0.5);\n  font-weight: 600;\n  margin-bottom: 20px;\n}\n\n.fr-s01-load-bar-wrap {\n  width: 160px;\n  height: 4px;\n  background: rgba(255,255,255,0.08);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.fr-s01-load-bar {\n  height: 100%;\n  width: 0%;\n  background: #ff3b3b;\n  border-radius: 2px;\n  transition: width 1.8s ease;\n}\n\n.fr-s01-load-bar.go {\n  width: 100%;\n}\n\n\/* STATE 4: DASHBOARD *\/\n.fr-s01-dash {\n  background: #0d0d0d;\n  padding: 54px 20px 130px;\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n}\n\n.fr-s01-dash::-webkit-scrollbar { display: none; }\n\n.fr-s01-dash-greeting {\n  font-size: 22px;\n  font-weight: 800;\n  color: #fff;\n  margin: 10px 0 12px;\n  line-height: 1.2;\n}\n\n.fr-s01-dash-points {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #1b0706;\n  color: #ff3b3b;\n  padding: 8px 14px;\n  border-radius: 999px;\n  font-size: 13px;\n  font-weight: 800;\n  margin-bottom: 24px;\n}\n\n.fr-s01-dash-section {\n  margin-bottom: 22px;\n}\n\n.fr-s01-dash-section-title {\n  font-size: 15px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 12px;\n}\n\n\/* Report Cards *\/\n.fr-s01-dash-report {\n  display: grid;\n  grid-template-columns: 44px 1fr 14px;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  margin-bottom: 8px;\n  background: rgba(255,255,255,0.03);\n  border-radius: 12px;\n  border: 1px solid rgba(255,255,255,0.06);\n}\n\n.fr-s01-dash-rthumb {\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.fr-s01-dash-rthumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.fr-s01-dash-rname {\n  font-size: 13px;\n  font-weight: 700;\n  color: #fff;\n  margin: 0;\n}\n\n.fr-s01-dash-rmeta {\n  font-size: 10px;\n  color: rgba(255,255,255,0.4);\n  margin: 2px 0 0;\n}\n\n.fr-s01-dash-chevron {\n  color: rgba(255,255,255,0.3);\n  font-size: 12px;\n}\n\n\/* Red Link *\/\n.fr-s01-dash-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: #ff3b3b;\n  font-size: 12px;\n  font-weight: 700;\n  text-decoration: none;\n  margin-top: 6px;\n}\n\n\/* Leaderboard *\/\n.fr-s01-dash-leader {\n  display: grid;\n  grid-template-columns: 26px 1fr auto;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n}\n\n.fr-s01-dash-rank {\n  font-size: 13px;\n  font-weight: 800;\n  color: rgba(255,255,255,0.35);\n}\n\n.fr-s01-dash-rank.gold { color: #ffb000; }\n\n.fr-s01-dash-lname {\n  font-size: 13px;\n  font-weight: 600;\n  color: #fff;\n}\n\n.fr-s01-dash-lscore {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: #1b0706;\n  color: #ff3b3b;\n  padding: 5px 10px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 800;\n}\n\n\/* Article Rows *\/\n.fr-s01-dash-article {\n  display: grid;\n  grid-template-columns: 44px 1fr 14px;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  margin-bottom: 8px;\n  background: rgba(255,255,255,0.03);\n  border-radius: 12px;\n  border: 1px solid rgba(255,255,255,0.06);\n}\n\n.fr-s01-dash-athumb {\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.fr-s01-dash-athumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n\/* ===== BOTTOM NAV \u2014 SITS ON PHONE LEVEL ===== *\/\n.fr-s01-phone-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 110px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 50;\n  display: none;\n}\n\n.fr-s01-phone-nav.visible {\n  display: block;\n}\n\n.fr-s01-pn-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s01-pn-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s01-pn-icon.pn-home { left: 30px; color: #fff; }\n.fr-s01-pn-icon.pn-reports { left: 88px; }\n.fr-s01-pn-icon.pn-articles { right: 88px; }\n.fr-s01-pn-icon.pn-profile { right: 30px; }\n\n.fr-s01-pn-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s01-pn-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* RESET BUTTON *\/\n.fr-s01-reset {\n  position: absolute;\n  top: 16px;\n  right: -44px;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.3);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 30;\n}\n\n.fr-s01-reset:hover {\n  background: rgba(255, 59, 59, 0.25);\n}\n\n.fr-s01-reset i {\n  color: #ff3b3b;\n  font-size: 14px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step01 { padding: 50px 20px; }\n  .fr-step01-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step01-info h2 { font-size: 1.7rem; }\n  .fr-step01-features li { justify-content: center; }\n  .fr-s01-phone { width: 280px; height: 580px; }\n  .fr-s01-reset { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }\n}\n<\/style>\n\n<div class=\"fr-step01\">\n  <div class=\"fr-step01-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step01-info\">\n      <div class=\"fr-step01-tag\">\n        <i class=\"fas fa-play\"><\/i> Step 01\n      <\/div>\n      <h2>Open Fire Rant<br>in seconds<\/h2>\n      <p>Tap the app, sign in, and land on your dashboard in under 10 seconds. No friction \u2014 just open and go.<\/p>\n      <ul class=\"fr-step01-features\">\n        <li><i class=\"fas fa-bolt\"><\/i> Instant load \u2014 minimal login wall<\/li>\n        <li><i class=\"fas fa-lock\"><\/i> Secure login with social sign-in<\/li>\n        <li><i class=\"fas fa-home\"><\/i> Dashboard-first design<\/li>\n        <li><i class=\"fas fa-map-marker-alt\"><\/i> GPS auto-detects your location<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE -->\n    <div class=\"fr-step01-phone-col\">\n      <div class=\"fr-s01-phone\" id=\"frS01Phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s01-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s01-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s01-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- STATE 1: Home Screen -->\n        <div class=\"fr-s01-state fr-s01-home active\" id=\"frS01Home\">\n          <div class=\"fr-s01-appicon\" id=\"frS01AppIcon\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-Jun-13-2025-10_39_07-PM.png\" alt=\"Fire Rant\">\n          <\/div>\n          <span class=\"fr-s01-appname\">Fire Rant<\/span>\n          <span class=\"fr-s01-tap-hint\">Tap to open<\/span>\n        <\/div>\n\n        <!-- STATE 2: Login Screen -->\n        <div class=\"fr-s01-state fr-s01-login\" id=\"frS01Login\">\n          <div class=\"fr-s01-login-logo\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-Jun-13-2025-10_39_07-PM.png\" alt=\"Fire Rant\">\n          <\/div>\n          <p class=\"fr-s01-login-title\">Welcome back<\/p>\n          <p class=\"fr-s01-login-sub\">Sign in to continue reporting<\/p>\n\n          <div class=\"fr-s01-input\">john.doe@example.com<\/div>\n          <div class=\"fr-s01-input-pass\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022<\/div>\n\n          <button class=\"fr-s01-login-btn\" id=\"frS01LoginBtn\">Sign In<\/button>\n\n          <div class=\"fr-s01-login-divider\"><span>or continue with<\/span><\/div>\n\n          <div class=\"fr-s01-social-btns\">\n            <div class=\"fr-s01-social\"><i class=\"fab fa-apple\"><\/i> Apple<\/div>\n            <div class=\"fr-s01-social\"><i class=\"fab fa-google\"><\/i> Google<\/div>\n          <\/div>\n\n          <p class=\"fr-s01-signup\">New here? <a href=\"#\">Create account<\/a><\/p>\n        <\/div>\n\n        <!-- STATE 3: Loading Screen -->\n        <div class=\"fr-s01-state fr-s01-loading\" id=\"frS01Loading\">\n          <div class=\"fr-s01-load-icon\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-Jun-13-2025-10_39_07-PM.png\" alt=\"Fire Rant\">\n          <\/div>\n          <span class=\"fr-s01-load-text\">Loading your dashboard&#8230;<\/span>\n          <div class=\"fr-s01-load-bar-wrap\">\n            <div class=\"fr-s01-load-bar\" id=\"frS01LoadBar\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- STATE 4: DASHBOARD (scrollable content) -->\n        <div class=\"fr-s01-state fr-s01-dash\" id=\"frS01Dash\">\n\n          <!-- Greeting -->\n          <p class=\"fr-s01-dash-greeting\">Good afternoon,<br>John Doe<\/p>\n          <div class=\"fr-s01-dash-points\"><i class=\"fas fa-star\"><\/i> 660 points<\/div>\n\n          <!-- Recent Reports -->\n          <div class=\"fr-s01-dash-section\">\n            <p class=\"fr-s01-dash-section-title\">Recent reports<\/p>\n\n            <div class=\"fr-s01-dash-report\">\n              <div class=\"fr-s01-dash-rthumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire ant\">\n              <\/div>\n              <div>\n                <p class=\"fr-s01-dash-rname\">Demo report 01<\/p>\n                <p class=\"fr-s01-dash-rmeta\">Jan 15, 2026<\/p>\n              <\/div>\n              <i class=\"fas fa-chevron-right fr-s01-dash-chevron\"><\/i>\n            <\/div>\n\n            <div class=\"fr-s01-dash-report\">\n              <div class=\"fr-s01-dash-rthumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire ant\">\n              <\/div>\n              <div>\n                <p class=\"fr-s01-dash-rname\">Demo report 02<\/p>\n                <p class=\"fr-s01-dash-rmeta\">test \u00b7 Jan 14, 2026<\/p>\n              <\/div>\n              <i class=\"fas fa-chevron-right fr-s01-dash-chevron\"><\/i>\n            <\/div>\n\n            <a class=\"fr-s01-dash-link\" href=\"#\"><i class=\"fas fa-list\"><\/i> All reports<\/a>\n          <\/div>\n\n          <!-- Leaderboard -->\n          <div class=\"fr-s01-dash-section\">\n            <p class=\"fr-s01-dash-section-title\">Leaderboard<\/p>\n\n            <div class=\"fr-s01-dash-leader\">\n              <span class=\"fr-s01-dash-rank gold\">#1<\/span>\n              <span class=\"fr-s01-dash-lname\">John Doe<\/span>\n              <span class=\"fr-s01-dash-lscore\"><i class=\"fas fa-star\"><\/i> 660<\/span>\n            <\/div>\n\n            <div class=\"fr-s01-dash-leader\">\n              <span class=\"fr-s01-dash-rank\">#2<\/span>\n              <span class=\"fr-s01-dash-lname\">Jamie Doe<\/span>\n              <span class=\"fr-s01-dash-lscore\"><i class=\"fas fa-star\"><\/i> 130<\/span>\n            <\/div>\n\n            <a class=\"fr-s01-dash-link\" href=\"#\"><i class=\"fas fa-chart-bar\"><\/i> See full leaderboard<\/a>\n          <\/div>\n\n          <!-- Articles -->\n          <div class=\"fr-s01-dash-section\">\n            <p class=\"fr-s01-dash-section-title\">Articles<\/p>\n\n            <div class=\"fr-s01-dash-article\">\n              <div class=\"fr-s01-dash-athumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire ant\">\n              <\/div>\n              <div>\n                <p class=\"fr-s01-dash-rname\">How to deal with ants<\/p>\n                <p class=\"fr-s01-dash-rmeta\">Prevention and Control<\/p>\n              <\/div>\n              <i class=\"fas fa-chevron-right fr-s01-dash-chevron\"><\/i>\n            <\/div>\n\n            <div class=\"fr-s01-dash-article\">\n              <div class=\"fr-s01-dash-athumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire ant\">\n              <\/div>\n              <div>\n                <p class=\"fr-s01-dash-rname\">How to identify fire ants<\/p>\n                <p class=\"fr-s01-dash-rmeta\">Fire Ant Identification<\/p>\n              <\/div>\n              <i class=\"fas fa-chevron-right fr-s01-dash-chevron\"><\/i>\n            <\/div>\n\n            <a class=\"fr-s01-dash-link\" href=\"#\"><i class=\"fas fa-book-open\"><\/i> See all articles<\/a>\n          <\/div>\n\n        <\/div>\n\n        <!-- ===== BOTTOM NAV (OUTSIDE scrollable state \u2014 stays fixed) ===== -->\n        <div class=\"fr-s01-phone-nav\" id=\"frS01Nav\">\n          <div class=\"fr-s01-pn-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s01-pn-icon pn-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s01-pn-icon pn-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s01-pn-icon pn-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s01-pn-icon pn-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Reset Button -->\n        <div class=\"fr-s01-reset\" id=\"frS01Reset\" title=\"Reset\">\n          <i class=\"fas fa-redo-alt\"><\/i>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n  var home = document.getElementById('frS01Home');\n  var login = document.getElementById('frS01Login');\n  var loading = document.getElementById('frS01Loading');\n  var dash = document.getElementById('frS01Dash');\n  var navEl = document.getElementById('frS01Nav');\n  var appIcon = document.getElementById('frS01AppIcon');\n  var loginBtn = document.getElementById('frS01LoginBtn');\n  var loadBar = document.getElementById('frS01LoadBar');\n  var resetBtn = document.getElementById('frS01Reset');\n\n  if (!home || !appIcon) return;\n\n  function hideAll() {\n    home.classList.remove('active');\n    login.classList.remove('active');\n    loading.classList.remove('active');\n    dash.classList.remove('active');\n    loadBar.classList.remove('go');\n    loadBar.style.width = '0%';\n    navEl.classList.remove('visible');\n  }\n\n  function showState(el) {\n    hideAll();\n    el.classList.add('active');\n    if (el === dash) {\n      navEl.classList.add('visible');\n    }\n  }\n\n  appIcon.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(login);\n  });\n\n  loginBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(loading);\n    setTimeout(function() { loadBar.classList.add('go'); }, 100);\n    setTimeout(function() { showState(dash); }, 2200);\n  });\n\n  resetBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(home);\n  });\n});\n<\/script>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 02\n     Land on a clear reporting dashboard\n     2-Column: Info left, Real mockup right\n     SVG bottom nav icons\n============================================ -->\n\n\n\n<style>\n.fr-step02 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  border-top: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-step02-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step02-info {}\n\n.fr-step02-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step02-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step02-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step02-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step02-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step02-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 PHONE MOCKUP *\/\n.fr-step02-phone-col {\n  display: flex;\n  justify-content: center;\n}\n\n.fr-s02-phone {\n  position: relative;\n  width: 320px;\n  height: 660px;\n  background: #000;\n  border-radius: 48px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 30px 80px rgba(0,0,0,.8);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar *\/\n.fr-s02-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 10;\n}\n\n.fr-s02-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s02-island {\n  width: 140px;\n  height: 34px;\n  background: #000;\n  border-radius: 999px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n}\n\n.fr-s02-island img {\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n}\n\n\/* Scrollable Content *\/\n.fr-s02-content {\n  position: absolute;\n  inset: 0;\n  overflow-y: auto;\n  padding: 54px 20px 140px;\n  scrollbar-width: none;\n}\n\n.fr-s02-content::-webkit-scrollbar { display: none; }\n\n\/* Greeting *\/\n.fr-s02-greeting {\n  font-size: 24px;\n  font-weight: 800;\n  color: #fff;\n  margin: 16px 0 12px;\n  line-height: 1.2;\n}\n\n\/* Points Pill *\/\n.fr-s02-points {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #1b0706;\n  color: #ff3b3b;\n  padding: 8px 14px;\n  border-radius: 999px;\n  font-size: 13px;\n  font-weight: 800;\n  margin-bottom: 28px;\n}\n\n\/* Section *\/\n.fr-s02-section {\n  margin-bottom: 26px;\n}\n\n.fr-s02-section-title {\n  font-size: 16px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 14px;\n}\n\n\/* Report Cards *\/\n.fr-s02-report {\n  display: grid;\n  grid-template-columns: 50px 1fr 14px;\n  align-items: center;\n  gap: 12px;\n  padding: 10px;\n  margin-bottom: 10px;\n  background: rgba(255,255,255,0.03);\n  border-radius: 12px;\n  border: 1px solid rgba(255,255,255,0.06);\n}\n\n.fr-s02-thumb {\n  width: 50px;\n  height: 50px;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.fr-s02-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fr-s02-report-title {\n  font-size: 14px;\n  font-weight: 700;\n  color: #fff;\n  margin: 0 0 3px;\n}\n\n.fr-s02-report-sub {\n  font-size: 11px;\n  color: rgba(255,255,255,0.45);\n  margin: 0;\n}\n\n.fr-s02-chevron {\n  color: rgba(255,255,255,0.3);\n  font-size: 16px;\n}\n\n\/* Red Link *\/\n.fr-s02-red-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: #ff3b3b;\n  font-size: 13px;\n  font-weight: 700;\n  text-decoration: none;\n  margin-top: 6px;\n}\n\n.fr-s02-red-link i {\n  font-size: 12px;\n}\n\n\/* Leaderboard *\/\n.fr-s02-leader {\n  display: grid;\n  grid-template-columns: 30px 1fr auto;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n\n.fr-s02-rank {\n  font-size: 14px;\n  font-weight: 800;\n  color: rgba(255,255,255,0.35);\n}\n\n.fr-s02-rank.gold { color: #ffb000; }\n\n.fr-s02-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: #fff;\n}\n\n.fr-s02-score {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: #1b0706;\n  color: #ff3b3b;\n  padding: 6px 10px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 800;\n}\n\n\/* Articles Preview *\/\n.fr-s02-article-row {\n  display: grid;\n  grid-template-columns: 50px 1fr 14px;\n  align-items: center;\n  gap: 12px;\n  padding: 10px;\n  margin-bottom: 10px;\n  background: rgba(255,255,255,0.03);\n  border-radius: 12px;\n  border: 1px solid rgba(255,255,255,0.06);\n}\n\n.fr-s02-article-thumb {\n  width: 50px;\n  height: 50px;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.fr-s02-article-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* Bottom Nav *\/\n.fr-s02-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 120px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 20;\n}\n\n.fr-s02-nav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s02-nav-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s02-nav-icon.n-home { left: 30px; color: #fff; }\n.fr-s02-nav-icon.n-reports { left: 88px; }\n.fr-s02-nav-icon.n-articles { right: 88px; }\n.fr-s02-nav-icon.n-profile { right: 30px; }\n\n.fr-s02-nav-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  z-index: 26;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s02-nav-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step02 { padding: 50px 20px; }\n  .fr-step02-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step02-info h2 { font-size: 1.7rem; }\n  .fr-step02-features li { justify-content: center; }\n  .fr-s02-phone { width: 280px; height: 580px; }\n}\n<\/style>\n\n<div class=\"fr-step02\">\n  <div class=\"fr-step02-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step02-info\">\n      <div class=\"fr-step02-tag\">\n        <i class=\"fas fa-th-large\"><\/i> Step 02\n      <\/div>\n      <h2>Land on a clear<br>reporting dashboard<\/h2>\n      <p>Everything you need at a glance \u2014 your points, recent reports, leaderboard position, and quick actions. No hunting through menus.<\/p>\n      <ul class=\"fr-step02-features\">\n        <li><i class=\"fas fa-trophy\"><\/i> Live points &#038; community ranking<\/li>\n        <li><i class=\"fas fa-file-alt\"><\/i> Recent reports with status tracking<\/li>\n        <li><i class=\"fas fa-book-open\"><\/i> Education content &#038; identification guides<\/li>\n        <li><i class=\"fas fa-plus-circle\"><\/i> One-tap to create new report<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE MOCKUP -->\n    <div class=\"fr-step02-phone-col\">\n      <div class=\"fr-s02-phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s02-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s02-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s02-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- Scrollable Content -->\n        <div class=\"fr-s02-content\">\n\n          <!-- Greeting -->\n          <p class=\"fr-s02-greeting\">Good afternoon,<br>John Doe<\/p>\n          <div class=\"fr-s02-points\"><i class=\"fas fa-star\" aria-hidden=\"true\"><\/i> 660 points<\/div>\n\n          <!-- Recent Reports -->\n          <div class=\"fr-s02-section\">\n            <p class=\"fr-s02-section-title\">Recent reports<\/p>\n\n            <div class=\"fr-s02-report\">\n              <div class=\"fr-s02-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Report\">\n              <\/div>\n              <div>\n                <p class=\"fr-s02-report-title\">Demo report 01<\/p>\n                <p class=\"fr-s02-report-sub\">Jan 15, 2026<\/p>\n              <\/div>\n              <span class=\"fr-s02-chevron\">\u203a<\/span>\n            <\/div>\n\n            <div class=\"fr-s02-report\">\n              <div class=\"fr-s02-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Report\">\n              <\/div>\n              <div>\n                <p class=\"fr-s02-report-title\">Demo report 02<\/p>\n                <p class=\"fr-s02-report-sub\">test \u00b7 Jan 14, 2026<\/p>\n              <\/div>\n              <span class=\"fr-s02-chevron\">\u203a<\/span>\n            <\/div>\n\n            <a class=\"fr-s02-red-link\" href=\"#\"><i class=\"fas fa-bars\"><\/i> All reports<\/a>\n          <\/div>\n\n          <!-- Leaderboard -->\n          <div class=\"fr-s02-section\">\n            <p class=\"fr-s02-section-title\">Leaderboard<\/p>\n\n            <div class=\"fr-s02-leader\">\n              <span class=\"fr-s02-rank gold\">#1<\/span>\n              <span class=\"fr-s02-name\">John Doe<\/span>\n              <span class=\"fr-s02-score\"><i class=\"fas fa-star\"><\/i> 660<\/span>\n            <\/div>\n\n            <div class=\"fr-s02-leader\">\n              <span class=\"fr-s02-rank\">#2<\/span>\n              <span class=\"fr-s02-name\">Jamie Doe<\/span>\n              <span class=\"fr-s02-score\"><i class=\"fas fa-star\"><\/i> 130<\/span>\n            <\/div>\n\n            <a class=\"fr-s02-red-link\" href=\"#\"><i class=\"fas fa-chart-bar\"><\/i> See full leaderboard<\/a>\n          <\/div>\n\n          <!-- Articles -->\n          <div class=\"fr-s02-section\">\n            <p class=\"fr-s02-section-title\">Articles<\/p>\n\n            <div class=\"fr-s02-article-row\">\n              <div class=\"fr-s02-article-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Article\">\n              <\/div>\n              <div>\n                <p class=\"fr-s02-report-title\">How to deal with ants<\/p>\n                <p class=\"fr-s02-report-sub\">Prevention and Control<\/p>\n              <\/div>\n              <span class=\"fr-s02-chevron\">\u203a<\/span>\n            <\/div>\n\n            <div class=\"fr-s02-article-row\">\n              <div class=\"fr-s02-article-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Article\">\n              <\/div>\n              <div>\n                <p class=\"fr-s02-report-title\">How to identify fire ants<\/p>\n                <p class=\"fr-s02-report-sub\">Fire Ant Identification<\/p>\n              <\/div>\n              <span class=\"fr-s02-chevron\">\u203a<\/span>\n            <\/div>\n\n            <a class=\"fr-s02-red-link\" href=\"#\"><i class=\"fas fa-file-alt\"><\/i> See all articles<\/a>\n          <\/div>\n\n        <\/div>\n\n        <!-- Bottom Nav (SVG Icons) -->\n        <div class=\"fr-s02-nav\">\n          <div class=\"fr-s02-nav-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s02-nav-icon n-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s02-nav-icon n-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s02-nav-icon n-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s02-nav-icon n-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 03\n     Camera \u2192 Analyzing \u2192 Results\n     Uses detailed camera mockup style\n============================================ -->\n\n\n\n<style>\n.fr-step03 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  border-top: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-step03-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step03-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step03-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step03-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step03-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step03-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step03-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 iPHONE *\/\n.fr-step03-phone-col {\n  display: flex;\n  justify-content: center;\n  position: relative;\n}\n\n.fr-s03-phone {\n  position: relative;\n  width: 320px;\n  height: 640px;\n  background: #000;\n  border-radius: 44px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 25px 70px rgba(0,0,0,.75);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar (shared across states) *\/\n.fr-s03-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 30;\n}\n\n.fr-s03-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s03-island {\n  width: 140px;\n  height: 34px;\n  background: #000;\n  border-radius: 999px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n}\n\n.fr-s03-island img {\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n}\n\n\/* ALL STATES *\/\n.fr-s03-state {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n\n.fr-s03-state.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* ==========================================\n   STATE 1: CAMERA (matches detailed mockup)\n   ========================================== *\/\n\n\/* Video Background *\/\n.fr-s03-cam-video {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n}\n\n.fr-s03-cam-video video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* Top Controls *\/\n.fr-s03-cam-top {\n  position: absolute;\n  top: 60px;\n  left: 20px;\n  right: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 10;\n}\n\n.fr-s03-cam-top-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(0,0,0,0.4);\n  backdrop-filter: blur(10px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 14px;\n}\n\n\/* Scan Hint *\/\n.fr-s03-cam-hint {\n  position: absolute;\n  top: 110px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  z-index: 10;\n  color: rgba(255,255,255,0.7);\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n\/* Viewfinder Overlay *\/\n.fr-s03-cam-viewfinder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 220px;\n  height: 220px;\n  border: 2px solid rgba(255,59,59,0.5);\n  border-radius: 16px;\n  z-index: 5;\n}\n\n.fr-s03-cam-viewfinder::before,\n.fr-s03-cam-viewfinder::after {\n  content: '';\n  position: absolute;\n  width: 30px;\n  height: 30px;\n  border-color: #ff3b3b;\n  border-style: solid;\n}\n\n.fr-s03-cam-viewfinder::before {\n  top: -2px;\n  left: -2px;\n  border-width: 3px 0 0 3px;\n  border-radius: 16px 0 0 0;\n}\n\n.fr-s03-cam-viewfinder::after {\n  top: -2px;\n  right: -2px;\n  border-width: 3px 3px 0 0;\n  border-radius: 0 16px 0 0;\n}\n\n.fr-s03-cam-corner-bl,\n.fr-s03-cam-corner-br {\n  position: absolute;\n  width: 30px;\n  height: 30px;\n  border-color: #ff3b3b;\n  border-style: solid;\n}\n\n.fr-s03-cam-corner-bl {\n  bottom: -2px;\n  left: -2px;\n  border-width: 0 0 3px 3px;\n  border-radius: 0 0 0 16px;\n}\n\n.fr-s03-cam-corner-br {\n  bottom: -2px;\n  right: -2px;\n  border-width: 0 3px 3px 0;\n  border-radius: 0 0 16px 0;\n}\n\n\/* AI Badge *\/\n.fr-s03-cam-ai-badge {\n  position: absolute;\n  bottom: 220px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(0,0,0,0.5);\n  backdrop-filter: blur(10px);\n  padding: 8px 14px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,59,59,0.2);\n  z-index: 10;\n}\n\n.fr-s03-cam-ai-badge i {\n  color: #ff3b3b;\n  font-size: 12px;\n}\n\n.fr-s03-cam-ai-badge span {\n  color: rgba(255,255,255,0.8);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n\/* Bottom Controls *\/\n.fr-s03-cam-bottom {\n  position: absolute;\n  bottom: 30px;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 30px;\n  z-index: 10;\n}\n\n.fr-s03-cam-gallery {\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  background: rgba(255,255,255,0.15);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255,255,255,0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 16px;\n}\n\n.fr-s03-cam-shutter {\n  width: 68px;\n  height: 68px;\n  border-radius: 50%;\n  background: none;\n  border: 4px solid #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.fr-s03-cam-shutter:hover {\n  transform: scale(1.05);\n}\n\n.fr-s03-cam-shutter-inner {\n  width: 54px;\n  height: 54px;\n  border-radius: 50%;\n  background: #ff3b3b;\n  transition: background 0.15s;\n}\n\n.fr-s03-cam-shutter:hover .fr-s03-cam-shutter-inner {\n  background: #ff5555;\n}\n\n.fr-s03-cam-flip {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.15);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255,255,255,0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 16px;\n}\n\n\/* ==========================================\n   STATE 2: ANALYZING\n   ========================================== *\/\n.fr-s03-analyzing {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #0d0d0d;\n}\n\n.fr-s03-analyze-circle {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  margin-bottom: 24px;\n  animation: fr03spin 3s linear infinite;\n}\n\n.fr-s03-analyze-circle img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n@keyframes fr03spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.fr-s03-analyze-text {\n  font-size: 14px;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 8px;\n}\n\n.fr-s03-analyze-sub {\n  font-size: 11px;\n  color: rgba(255,255,255,0.4);\n  margin-bottom: 24px;\n}\n\n.fr-s03-analyze-steps {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  width: 200px;\n}\n\n.fr-s03-analyze-steps li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0;\n  font-size: 12px;\n  color: rgba(255,255,255,0.5);\n  transition: color 0.3s;\n}\n\n.fr-s03-analyze-steps li i {\n  font-size: 12px;\n  color: #ff3b3b;\n  width: 18px;\n  text-align: center;\n}\n\n.fr-s03-analyze-steps li.done {\n  color: rgba(255,255,255,0.85);\n}\n\n.fr-s03-analyze-steps li.done i {\n  color: #34C759;\n}\n\n\/* ==========================================\n   STATE 3: AI RESULTS\n   ========================================== *\/\n.fr-s03-results {\n  display: flex;\n  flex-direction: column;\n  background: #0d0d0d;\n  overflow-y: auto;\n}\n\n.fr-s03-results-header {\n  background: #ff3b3b;\n  padding: 66px 20px 22px;\n  text-align: center;\n  border-radius: 0 0 24px 24px;\n  flex-shrink: 0;\n}\n\n.fr-s03-results-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(255,255,255,0.2);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 10px;\n}\n\n.fr-s03-results-title {\n  font-size: 16px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 4px;\n}\n\n.fr-s03-results-conf {\n  font-size: 32px;\n  font-weight: 900;\n  color: #fff;\n  margin: 0;\n}\n\n.fr-s03-results-conflabel {\n  font-size: 10px;\n  color: rgba(255,255,255,0.7);\n  margin: 4px 0 0;\n}\n\n.fr-s03-results-body {\n  padding: 20px 20px 120px;\n  flex: 1;\n}\n\n.fr-s03-result-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 14px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n\n.fr-s03-result-label {\n  font-size: 12px;\n  color: rgba(255,255,255,0.5);\n}\n\n.fr-s03-result-val {\n  font-size: 12px;\n  font-weight: 700;\n  color: #fff;\n}\n\n.fr-s03-result-val.high { color: #34C759; }\n.fr-s03-result-val.warn { color: #ffb000; }\n\n\/* Bottom Nav (all states) *\/\n.fr-s03-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 120px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 40;\n  display: none;\n}\n\n.fr-s03-nav.show { display: block; }\n\n.fr-s03-nav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s03-nav-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s03-nav-icon.n-home { left: 30px; }\n.fr-s03-nav-icon.n-reports { left: 88px; }\n.fr-s03-nav-icon.n-articles { right: 88px; }\n.fr-s03-nav-icon.n-profile { right: 30px; }\n\n.fr-s03-nav-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  z-index: 46;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s03-nav-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* RESET *\/\n.fr-s03-reset {\n  position: absolute;\n  top: 16px;\n  right: -44px;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.3);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 50;\n}\n\n.fr-s03-reset:hover {\n  background: rgba(255, 59, 59, 0.25);\n}\n\n.fr-s03-reset i {\n  color: #ff3b3b;\n  font-size: 14px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step03 { padding: 50px 20px; }\n  .fr-step03-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step03-info h2 { font-size: 1.7rem; }\n  .fr-step03-features li { justify-content: center; }\n  .fr-s03-phone { width: 300px; height: 600px; }\n  .fr-s03-reset { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }\n}\n<\/style>\n\n<div class=\"fr-step03\">\n  <div class=\"fr-step03-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step03-info\">\n      <div class=\"fr-step03-tag\">\n        <i class=\"fas fa-camera\"><\/i> Step 03\n      <\/div>\n      <h2>Snap a photo &#038;<br>let AI identify<\/h2>\n      <p>Point your camera at a suspected fire ant or nest. One tap and our AI model \u2014 trained on 20,000+ verified images \u2014 delivers a confidence score in seconds.<\/p>\n      <ul class=\"fr-step03-features\">\n        <li><i class=\"fas fa-crosshairs\"><\/i> Guided viewfinder with targeting brackets<\/li>\n        <li><i class=\"fas fa-brain\"><\/i> On-device AI classification<\/li>\n        <li><i class=\"fas fa-check-circle\"><\/i> 92%+ confidence scoring<\/li>\n        <li><i class=\"fas fa-clock\"><\/i> Results in under 5 seconds<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE -->\n    <div class=\"fr-step03-phone-col\">\n      <div class=\"fr-s03-phone\" id=\"frS03Phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s03-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s03-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s03-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- STATE 1: CAMERA -->\n        <div class=\"fr-s03-state active\" id=\"frS03Camera\">\n          <!-- Video Background -->\n          <div class=\"fr-s03-cam-video\">\n            <video autoplay muted loop playsinline>\n              <source src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Fire-ant-hero-video.mp4\" type=\"video\/mp4\">\n            <\/video>\n          <\/div>\n\n          <!-- Top Controls -->\n          <div class=\"fr-s03-cam-top\">\n            <div class=\"fr-s03-cam-top-btn\">\n              <i class=\"fas fa-times\" aria-hidden=\"true\"><\/i>\n            <\/div>\n            <div class=\"fr-s03-cam-top-btn\">\n              <i class=\"fas fa-bolt\" aria-hidden=\"true\"><\/i>\n            <\/div>\n          <\/div>\n\n          <!-- Scan Hint -->\n          <p class=\"fr-s03-cam-hint\"><i class=\"fas fa-crosshairs\" aria-hidden=\"true\"><\/i>&nbsp;&nbsp;Position suspected nest in frame<\/p>\n\n          <!-- Viewfinder -->\n          <div class=\"fr-s03-cam-viewfinder\">\n            <div class=\"fr-s03-cam-corner-bl\"><\/div>\n            <div class=\"fr-s03-cam-corner-br\"><\/div>\n          <\/div>\n\n          <!-- AI Badge -->\n          <div class=\"fr-s03-cam-ai-badge\">\n            <i class=\"fas fa-brain\" aria-hidden=\"true\"><\/i>\n            <span>AI Detection Active<\/span>\n          <\/div>\n\n          <!-- Bottom Controls -->\n          <div class=\"fr-s03-cam-bottom\">\n            <div class=\"fr-s03-cam-gallery\">\n              <i class=\"fas fa-images\" aria-hidden=\"true\"><\/i>\n            <\/div>\n            <div class=\"fr-s03-cam-shutter\" id=\"frS03Shutter\">\n              <div class=\"fr-s03-cam-shutter-inner\"><\/div>\n            <\/div>\n            <div class=\"fr-s03-cam-flip\">\n              <i class=\"fas fa-sync-alt\" aria-hidden=\"true\"><\/i>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- STATE 2: ANALYZING -->\n        <div class=\"fr-s03-state fr-s03-analyzing\" id=\"frS03Analyzing\">\n          <div class=\"fr-s03-analyze-circle\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Fire-Ant-circle-.png\" alt=\"Analyzing\">\n          <\/div>\n          <span class=\"fr-s03-analyze-text\">Analyzing image&#8230;<\/span>\n          <span class=\"fr-s03-analyze-sub\">AI model processing<\/span>\n          <ul class=\"fr-s03-analyze-steps\" id=\"frS03Steps\">\n            <li><i class=\"fas fa-spinner fa-spin\"><\/i> Detecting specimen<\/li>\n            <li><i class=\"fas fa-spinner fa-spin\"><\/i> Classifying species<\/li>\n            <li><i class=\"fas fa-spinner fa-spin\"><\/i> Generating confidence<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- STATE 3: AI RESULTS -->\n        <div class=\"fr-s03-state fr-s03-results\" id=\"frS03Results\">\n          <div class=\"fr-s03-results-header\">\n            <div class=\"fr-s03-results-badge\"><i class=\"fas fa-check\"><\/i> Identified<\/div>\n            <p class=\"fr-s03-results-title\">Solenopsis invicta<\/p>\n            <p class=\"fr-s03-results-conf\">92%<\/p>\n            <p class=\"fr-s03-results-conflabel\">Confidence Score<\/p>\n          <\/div>\n          <div class=\"fr-s03-results-body\">\n            <div class=\"fr-s03-result-row\">\n              <span class=\"fr-s03-result-label\">Species<\/span>\n              <span class=\"fr-s03-result-val\">Red Imported Fire Ant<\/span>\n            <\/div>\n            <div class=\"fr-s03-result-row\">\n              <span class=\"fr-s03-result-label\">Confidence<\/span>\n              <span class=\"fr-s03-result-val high\">92% \u2014 High<\/span>\n            <\/div>\n            <div class=\"fr-s03-result-row\">\n              <span class=\"fr-s03-result-label\">Risk Level<\/span>\n              <span class=\"fr-s03-result-val warn\">Elevated<\/span>\n            <\/div>\n            <div class=\"fr-s03-result-row\">\n              <span class=\"fr-s03-result-label\">Action<\/span>\n              <span class=\"fr-s03-result-val\">Submit Report<\/span>\n            <\/div>\n            <div class=\"fr-s03-result-row\">\n              <span class=\"fr-s03-result-label\">Location<\/span>\n              <span class=\"fr-s03-result-val\">Example District<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Bottom Nav (shows on analyzing + results) -->\n        <div class=\"fr-s03-nav\" id=\"frS03Nav\">\n          <div class=\"fr-s03-nav-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s03-nav-icon n-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s03-nav-icon n-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s03-nav-icon n-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s03-nav-icon n-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Reset -->\n        <div class=\"fr-s03-reset\" id=\"frS03Reset\" title=\"Reset\">\n          <i class=\"fas fa-redo-alt\"><\/i>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var camera = document.getElementById('frS03Camera');\n  var analyzing = document.getElementById('frS03Analyzing');\n  var results = document.getElementById('frS03Results');\n  var shutter = document.getElementById('frS03Shutter');\n  var resetBtn = document.getElementById('frS03Reset');\n  var nav = document.getElementById('frS03Nav');\n  var steps = document.querySelectorAll('#frS03Steps li');\n\n  function hideAll() {\n    camera.classList.remove('active');\n    analyzing.classList.remove('active');\n    results.classList.remove('active');\n    nav.classList.remove('show');\n    steps.forEach(function(s) {\n      s.classList.remove('done');\n      s.querySelector('i').className = 'fas fa-spinner fa-spin';\n    });\n  }\n\n  function showState(el, showNav) {\n    hideAll();\n    el.classList.add('active');\n    if (showNav) nav.classList.add('show');\n  }\n\n  \/\/ Click shutter \u2192 analyzing \u2192 results\n  shutter.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(analyzing, true);\n\n    setTimeout(function() {\n      steps[0].classList.add('done');\n      steps[0].querySelector('i').className = 'fas fa-check-circle';\n    }, 800);\n\n    setTimeout(function() {\n      steps[1].classList.add('done');\n      steps[1].querySelector('i').className = 'fas fa-check-circle';\n    }, 1600);\n\n    setTimeout(function() {\n      steps[2].classList.add('done');\n      steps[2].querySelector('i').className = 'fas fa-check-circle';\n    }, 2400);\n\n    setTimeout(function() {\n      showState(results, true);\n    }, 3200);\n  });\n\n  \/\/ Reset\n  resetBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(camera, false);\n  });\n})();\n<\/script>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 04\n     Submit Report \u2192 Report Submitted + Points\n     2-Column: Info left, iPhone right\n     UPDATED: All images \u2192 fire ant image\n============================================ -->\n\n\n\n<style>\n.fr-step04 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  border-top: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-step04-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step04-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step04-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step04-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step04-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step04-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step04-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 iPHONE *\/\n.fr-step04-phone-col {\n  display: flex;\n  justify-content: center;\n  position: relative;\n}\n\n.fr-s04-phone {\n  position: relative;\n  width: 320px;\n  height: 640px;\n  background: #000;\n  border-radius: 44px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 25px 70px rgba(0,0,0,.75);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar *\/\n.fr-s04-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 30;\n}\n\n.fr-s04-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s04-island {\n  width: 140px;\n  height: 34px;\n  background: #000;\n  border-radius: 999px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n}\n\n.fr-s04-island img {\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n}\n\n\/* ALL STATES *\/\n.fr-s04-state {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n}\n\n.fr-s04-state.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* ==========================================\n   STATE 1: CREATE REPORT FORM\n   ========================================== *\/\n.fr-s04-form {\n  background: #0d0d0d;\n  padding: 60px 20px 130px;\n  overflow-y: auto;\n}\n\n.fr-s04-form::-webkit-scrollbar { display: none; }\n\n.fr-s04-form-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 24px;\n}\n\n.fr-s04-form-back {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 12px;\n}\n\n.fr-s04-form-title {\n  font-size: 18px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0;\n}\n\n\/* Form Fields *\/\n.fr-s04-field {\n  margin-bottom: 16px;\n}\n\n.fr-s04-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: rgba(255,255,255,0.4);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n  display: block;\n}\n\n.fr-s04-input {\n  width: 100%;\n  background: rgba(255,255,255,0.04);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 12px;\n  padding: 13px 14px;\n  font-size: 13px;\n  color: rgba(255,255,255,0.8);\n  font-family: inherit;\n  box-sizing: border-box;\n}\n\n.fr-s04-input-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n\/* Image Preview *\/\n.fr-s04-images {\n  display: flex;\n  gap: 8px;\n  margin-top: 6px;\n}\n\n.fr-s04-img-thumb {\n  width: 56px;\n  height: 56px;\n  border-radius: 10px;\n  overflow: hidden;\n  border: 1px solid rgba(255,255,255,0.08);\n}\n\n.fr-s04-img-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fr-s04-img-add {\n  width: 56px;\n  height: 56px;\n  border-radius: 10px;\n  border: 1.5px dashed rgba(255,255,255,0.15);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(255,255,255,0.3);\n  font-size: 18px;\n}\n\n\/* Submit Button *\/\n.fr-s04-submit-btn {\n  width: 100%;\n  background: #ff3b3b;\n  color: #fff;\n  border: none;\n  border-radius: 980px;\n  padding: 14px;\n  font-size: 14px;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 0.2s, box-shadow 0.2s;\n  font-family: inherit;\n  margin-top: 20px;\n}\n\n.fr-s04-submit-btn:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 20px rgba(255, 59, 59, 0.4);\n}\n\n\/* ==========================================\n   STATE 2: REPORT SUBMITTED + POINTS\n   ========================================== *\/\n.fr-s04-submitted {\n  background: #0d0d0d;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 40px 24px;\n}\n\n.fr-s04-success-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: rgba(52, 199, 89, 0.1);\n  border: 3px solid #34C759;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  animation: fr04pop 0.5s ease;\n}\n\n@keyframes fr04pop {\n  0% { transform: scale(0); opacity: 0; }\n  60% { transform: scale(1.15); }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n.fr-s04-success-icon i {\n  color: #34C759;\n  font-size: 32px;\n}\n\n.fr-s04-submitted-title {\n  font-size: 20px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 6px;\n}\n\n.fr-s04-submitted-sub {\n  font-size: 12px;\n  color: rgba(255,255,255,0.5);\n  margin: 0 0 28px;\n}\n\n\/* Points Earned Card *\/\n.fr-s04-points-card {\n  background: rgba(255, 59, 59, 0.06);\n  border: 1px solid rgba(255, 59, 59, 0.2);\n  border-radius: 16px;\n  padding: 20px;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.fr-s04-points-earned {\n  font-size: 36px;\n  font-weight: 900;\n  color: #ff3b3b;\n  margin: 0 0 4px;\n}\n\n.fr-s04-points-label {\n  font-size: 11px;\n  color: rgba(255,255,255,0.5);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin: 0 0 16px;\n}\n\n.fr-s04-points-divider {\n  height: 1px;\n  background: rgba(255,255,255,0.06);\n  margin: 0 0 16px;\n}\n\n.fr-s04-points-total-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.fr-s04-points-total-label {\n  font-size: 12px;\n  color: rgba(255,255,255,0.5);\n}\n\n.fr-s04-points-total {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #1b0706;\n  color: #ff3b3b;\n  padding: 8px 14px;\n  border-radius: 999px;\n  font-size: 14px;\n  font-weight: 800;\n}\n\n\/* Level Progress *\/\n.fr-s04-level {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 12px;\n  padding: 14px;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.fr-s04-level-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.fr-s04-level-name {\n  font-size: 12px;\n  font-weight: 700;\n  color: #fff;\n}\n\n.fr-s04-level-next {\n  font-size: 10px;\n  color: rgba(255,255,255,0.4);\n}\n\n.fr-s04-level-bar {\n  width: 100%;\n  height: 6px;\n  background: rgba(255,255,255,0.06);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.fr-s04-level-fill {\n  height: 100%;\n  width: 0%;\n  background: linear-gradient(90deg, #ff3b3b, #ff6b6b);\n  border-radius: 3px;\n  transition: width 1.2s ease;\n}\n\n.fr-s04-level-fill.go {\n  width: 73%;\n}\n\n\/* Home Button *\/\n.fr-s04-home-btn {\n  width: 100%;\n  background: rgba(255,255,255,0.05);\n  border: 1px solid rgba(255,255,255,0.1);\n  color: #fff;\n  border-radius: 980px;\n  padding: 12px;\n  font-size: 13px;\n  font-weight: 700;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n}\n\n.fr-s04-home-btn:hover {\n  background: rgba(255,255,255,0.1);\n}\n\n\/* Bottom Nav *\/\n.fr-s04-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 120px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 40;\n}\n\n.fr-s04-nav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s04-nav-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s04-nav-icon.n-home { left: 30px; }\n.fr-s04-nav-icon.n-reports { left: 88px; }\n.fr-s04-nav-icon.n-articles { right: 88px; }\n.fr-s04-nav-icon.n-profile { right: 30px; }\n\n.fr-s04-nav-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  z-index: 46;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s04-nav-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* RESET *\/\n.fr-s04-reset {\n  position: absolute;\n  top: 16px;\n  right: -44px;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.3);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 50;\n}\n\n.fr-s04-reset:hover {\n  background: rgba(255, 59, 59, 0.25);\n}\n\n.fr-s04-reset i {\n  color: #ff3b3b;\n  font-size: 14px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step04 { padding: 50px 20px; }\n  .fr-step04-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step04-info h2 { font-size: 1.7rem; }\n  .fr-step04-features li { justify-content: center; }\n  .fr-s04-phone { width: 300px; height: 600px; }\n  .fr-s04-reset { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }\n}\n<\/style>\n\n<div class=\"fr-step04\">\n  <div class=\"fr-step04-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step04-info\">\n      <div class=\"fr-step04-tag\">\n        <i class=\"fas fa-paper-plane\"><\/i> Step 04\n      <\/div>\n      <h2>Submit your report<br>&#038; earn points<\/h2>\n      <p>Fill in the details \u2014 title, location, images \u2014 and hit submit. Your report goes straight to the biosecurity network and you earn community points instantly.<\/p>\n      <ul class=\"fr-step04-features\">\n        <li><i class=\"fas fa-map-marker-alt\"><\/i> GPS auto-fills your location<\/li>\n        <li><i class=\"fas fa-image\"><\/i> Attach multiple photos as evidence<\/li>\n        <li><i class=\"fas fa-star\"><\/i> Earn 110 points per verified report<\/li>\n        <li><i class=\"fas fa-trophy\"><\/i> Level up on the community leaderboard<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE -->\n    <div class=\"fr-step04-phone-col\">\n      <div class=\"fr-s04-phone\" id=\"frS04Phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s04-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s04-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s04-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- STATE 1: CREATE REPORT FORM -->\n        <div class=\"fr-s04-state fr-s04-form active\" id=\"frS04Form\">\n          <div class=\"fr-s04-form-header\">\n            <div class=\"fr-s04-form-back\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n            <p class=\"fr-s04-form-title\">Create Report<\/p>\n          <\/div>\n\n          <div class=\"fr-s04-field\">\n            <span class=\"fr-s04-label\">Title<\/span>\n            <div class=\"fr-s04-input\">Demo report 06<\/div>\n          <\/div>\n\n          <div class=\"fr-s04-field\">\n            <span class=\"fr-s04-label\">Date &#038; Time<\/span>\n            <div class=\"fr-s04-input-row\">\n              <div class=\"fr-s04-input\">16\/01\/2026<\/div>\n              <div class=\"fr-s04-input\">10:00 AM<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"fr-s04-field\">\n            <span class=\"fr-s04-label\">Location<\/span>\n            <div class=\"fr-s04-input\"><i class=\"fas fa-map-marker-alt\" style=\"color:#ff3b3b;margin-right:8px;\"><\/i>Example District (fictional)<\/div>\n          <\/div>\n\n          <div class=\"fr-s04-field\">\n            <span class=\"fr-s04-label\">Description<\/span>\n            <div class=\"fr-s04-input\" style=\"min-height:60px;\">Illustrative sample report only.<\/div>\n          <\/div>\n\n          <div class=\"fr-s04-field\">\n            <span class=\"fr-s04-label\">Images<\/span>\n            <div class=\"fr-s04-images\">\n              <div class=\"fr-s04-img-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Evidence\">\n              <\/div>\n              <div class=\"fr-s04-img-thumb\">\n                <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Evidence 2\">\n              <\/div>\n              <div class=\"fr-s04-img-add\"><i class=\"fas fa-plus\"><\/i><\/div>\n            <\/div>\n          <\/div>\n\n          <button class=\"fr-s04-submit-btn\" id=\"frS04SubmitBtn\">Submit Report<\/button>\n        <\/div>\n\n        <!-- STATE 2: REPORT SUBMITTED + POINTS -->\n        <div class=\"fr-s04-state fr-s04-submitted\" id=\"frS04Submitted\">\n          <div class=\"fr-s04-success-icon\">\n            <i class=\"fas fa-check\"><\/i>\n          <\/div>\n          <p class=\"fr-s04-submitted-title\">Report Submitted!<\/p>\n          <p class=\"fr-s04-submitted-sub\">Your sighting has been logged to the network<\/p>\n\n          <!-- Points Card -->\n          <div class=\"fr-s04-points-card\">\n            <p class=\"fr-s04-points-earned\">+110<\/p>\n            <p class=\"fr-s04-points-label\">Points Earned<\/p>\n            <div class=\"fr-s04-points-divider\"><\/div>\n            <div class=\"fr-s04-points-total-row\">\n              <span class=\"fr-s04-points-total-label\">Total Balance<\/span>\n              <span class=\"fr-s04-points-total\"><i class=\"fas fa-star\"><\/i> 770<\/span>\n            <\/div>\n          <\/div>\n\n          <!-- Level Progress -->\n          <div class=\"fr-s04-level\">\n            <div class=\"fr-s04-level-row\">\n              <span class=\"fr-s04-level-name\"><i class=\"fas fa-shield-alt\" style=\"color:#ff3b3b;margin-right:6px;\"><\/i>Scout Rank<\/span>\n              <span class=\"fr-s04-level-next\">230 pts to Ranger<\/span>\n            <\/div>\n            <div class=\"fr-s04-level-bar\">\n              <div class=\"fr-s04-level-fill\" id=\"frS04LevelBar\"><\/div>\n            <\/div>\n          <\/div>\n\n          <button class=\"fr-s04-home-btn\" id=\"frS04HomeBtn\"><i class=\"fas fa-home\" style=\"margin-right:6px;\"><\/i>Back to Dashboard<\/button>\n        <\/div>\n\n        <!-- Bottom Nav -->\n        <div class=\"fr-s04-nav\">\n          <div class=\"fr-s04-nav-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s04-nav-icon n-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s04-nav-icon n-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s04-nav-icon n-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s04-nav-icon n-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Reset -->\n        <div class=\"fr-s04-reset\" id=\"frS04Reset\" title=\"Reset\">\n          <i class=\"fas fa-redo-alt\"><\/i>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var form = document.getElementById('frS04Form');\n  var submitted = document.getElementById('frS04Submitted');\n  var submitBtn = document.getElementById('frS04SubmitBtn');\n  var resetBtn = document.getElementById('frS04Reset');\n  var homeBtn = document.getElementById('frS04HomeBtn');\n  var levelBar = document.getElementById('frS04LevelBar');\n\n  function hideAll() {\n    form.classList.remove('active');\n    submitted.classList.remove('active');\n    levelBar.classList.remove('go');\n  }\n\n  function showState(el) {\n    hideAll();\n    el.classList.add('active');\n  }\n\n  \/\/ Submit \u2192 Submitted + animate level bar\n  submitBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(submitted);\n    setTimeout(function() {\n      levelBar.classList.add('go');\n    }, 300);\n  });\n\n  \/\/ Home button \u2192 back to form\n  homeBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(form);\n  });\n\n  \/\/ Reset\n  resetBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(form);\n  });\n})();\n<\/script>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 05\n     Track Your Impact \/ Community Leaderboard\n     SCROLLABLE FIX \u2014 content scrolls in phone\n============================================ -->\n\n\n\n<style>\n.fr-step05 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  border-top: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-step05-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step05-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step05-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step05-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step05-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step05-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step05-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 iPHONE *\/\n.fr-step05-phone-col {\n  display: flex;\n  justify-content: center;\n  position: relative;\n}\n\n.fr-s05-phone {\n  position: relative;\n  width: 320px;\n  height: 640px;\n  background: #000;\n  border-radius: 44px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 25px 70px rgba(0,0,0,.75);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar *\/\n.fr-s05-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 30;\n  background: #0d0d0d;\n}\n\n.fr-s05-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s05-island {\n  width: 140px;\n  height: 34px;\n  background: #000;\n  border-radius: 999px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n}\n\n.fr-s05-island img {\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n}\n\n\/* ALL STATES \u2014 SCROLLABLE FIX *\/\n.fr-s05-state {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.fr-s05-state::-webkit-scrollbar {\n  display: none;\n}\n\n.fr-s05-state.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* ==========================================\n   STATE 1: PROFILE + LEADERBOARD\n   ========================================== *\/\n.fr-s05-profile {\n  padding: 62px 18px 130px;\n}\n\n\/* Profile Header *\/\n.fr-s05-profile-top {\n  text-align: center;\n  margin-bottom: 22px;\n}\n\n.fr-s05-avatar {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ff3b3b, #cc0000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 10px;\n  font-size: 20px;\n  font-weight: 900;\n  color: #fff;\n}\n\n.fr-s05-username {\n  font-size: 16px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 3px;\n}\n\n.fr-s05-rank {\n  font-size: 11px;\n  color: #ff3b3b;\n  font-weight: 700;\n}\n\n\/* Stats Row *\/\n.fr-s05-stats-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 8px;\n  margin-bottom: 20px;\n}\n\n.fr-s05-stat-card {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 12px;\n  padding: 12px 8px;\n  text-align: center;\n}\n\n.fr-s05-stat-num {\n  font-size: 18px;\n  font-weight: 900;\n  color: #fff;\n  margin: 0 0 2px;\n}\n\n.fr-s05-stat-label {\n  font-size: 9px;\n  color: rgba(255,255,255,0.4);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin: 0;\n}\n\n\/* Tabs *\/\n.fr-s05-tabs {\n  display: flex;\n  gap: 6px;\n  margin-bottom: 18px;\n}\n\n.fr-s05-tab {\n  flex: 1;\n  padding: 10px;\n  text-align: center;\n  font-size: 11px;\n  font-weight: 700;\n  color: rgba(255,255,255,0.4);\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.fr-s05-tab.active {\n  color: #fff;\n  background: rgba(255, 59, 59, 0.1);\n  border-color: rgba(255, 59, 59, 0.3);\n}\n\n\/* Leaderboard *\/\n.fr-s05-lb-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.fr-s05-lb-title {\n  font-size: 14px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0;\n}\n\n.fr-s05-lb-tab {\n  font-size: 10px;\n  color: rgba(255,255,255,0.4);\n  background: rgba(255,255,255,0.04);\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-weight: 600;\n}\n\n.fr-s05-lb-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-s05-lb-item {\n  display: grid;\n  grid-template-columns: 24px 32px 1fr auto;\n  gap: 10px;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 12px;\n  margin-bottom: 6px;\n  background: rgba(255,255,255,0.02);\n  border: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-s05-lb-item.me {\n  background: rgba(255, 59, 59, 0.06);\n  border-color: rgba(255, 59, 59, 0.15);\n}\n\n.fr-s05-lb-pos {\n  font-size: 12px;\n  font-weight: 800;\n  color: rgba(255,255,255,0.4);\n  text-align: center;\n}\n\n.fr-s05-lb-item.me .fr-s05-lb-pos {\n  color: #ff3b3b;\n}\n\n.fr-s05-lb-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.08);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 800;\n  color: rgba(255,255,255,0.6);\n}\n\n.fr-s05-lb-item.me .fr-s05-lb-avatar {\n  background: linear-gradient(135deg, #ff3b3b, #cc0000);\n  color: #fff;\n}\n\n.fr-s05-lb-name {\n  font-size: 12px;\n  font-weight: 700;\n  color: rgba(255,255,255,0.8);\n  margin: 0;\n}\n\n.fr-s05-lb-region {\n  font-size: 9px;\n  color: rgba(255,255,255,0.35);\n  margin: 2px 0 0;\n}\n\n.fr-s05-lb-pts {\n  font-size: 12px;\n  font-weight: 800;\n  color: #ff3b3b;\n}\n\n\/* ==========================================\n   STATE 2: COMMUNITY IMPACT MAP\n   ========================================== *\/\n.fr-s05-impact {\n  padding: 62px 18px 130px;\n}\n\n.fr-s05-impact-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 18px;\n}\n\n.fr-s05-impact-back {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 11px;\n  cursor: pointer;\n}\n\n.fr-s05-impact-title {\n  font-size: 16px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0;\n}\n\n\/* Map Area *\/\n.fr-s05-map-area {\n  width: 100%;\n  height: 120px;\n  border-radius: 16px;\n  background: linear-gradient(135deg, #1a1a1a, #0f0f0f);\n  border: 1px solid rgba(255,255,255,0.06);\n  position: relative;\n  overflow: hidden;\n  margin-bottom: 18px;\n}\n\n.fr-s05-map-dots {\n  position: absolute;\n  inset: 0;\n}\n\n.fr-s05-dot {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ff3b3b;\n  animation: fr05pulse 2s infinite;\n}\n\n@keyframes fr05pulse {\n  0%, 100% { opacity: 0.4; transform: scale(1); }\n  50% { opacity: 1; transform: scale(1.5); }\n}\n\n.fr-s05-dot:nth-child(1) { top: 30%; left: 25%; animation-delay: 0s; }\n.fr-s05-dot:nth-child(2) { top: 50%; left: 45%; animation-delay: 0.4s; }\n.fr-s05-dot:nth-child(3) { top: 35%; left: 60%; animation-delay: 0.8s; }\n.fr-s05-dot:nth-child(4) { top: 65%; left: 35%; animation-delay: 1.2s; }\n.fr-s05-dot:nth-child(5) { top: 55%; left: 72%; animation-delay: 1.6s; }\n.fr-s05-dot:nth-child(6) { top: 75%; left: 55%; animation-delay: 0.3s; }\n\n.fr-s05-map-label {\n  position: absolute;\n  bottom: 10px;\n  left: 14px;\n  font-size: 10px;\n  color: rgba(255,255,255,0.4);\n  font-weight: 600;\n}\n\n.fr-s05-map-count {\n  position: absolute;\n  bottom: 10px;\n  right: 14px;\n  font-size: 10px;\n  color: #ff3b3b;\n  font-weight: 800;\n}\n\n\/* Impact Stats *\/\n.fr-s05-impact-stats {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  margin-bottom: 18px;\n}\n\n.fr-s05-impact-card {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 14px;\n  padding: 12px;\n  text-align: center;\n}\n\n.fr-s05-impact-num {\n  font-size: 18px;\n  font-weight: 900;\n  color: #fff;\n  margin: 0 0 2px;\n}\n\n.fr-s05-impact-num span {\n  color: #ff3b3b;\n}\n\n.fr-s05-impact-desc {\n  font-size: 10px;\n  color: rgba(255,255,255,0.4);\n  margin: 0;\n}\n\n\/* Recent Activity *\/\n.fr-s05-activity-title {\n  font-size: 13px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 10px;\n}\n\n.fr-s05-activity-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-s05-activity-icon {\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n  background: rgba(255, 59, 59, 0.08);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.fr-s05-activity-icon i {\n  color: #ff3b3b;\n  font-size: 12px;\n}\n\n.fr-s05-activity-text {\n  font-size: 11px;\n  color: rgba(255,255,255,0.7);\n  margin: 0;\n  line-height: 1.4;\n}\n\n.fr-s05-activity-text strong {\n  color: #fff;\n}\n\n.fr-s05-activity-time {\n  font-size: 9px;\n  color: rgba(255,255,255,0.3);\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n\/* Bottom Nav *\/\n.fr-s05-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 120px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 40;\n}\n\n.fr-s05-nav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s05-nav-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s05-nav-icon.n-home { left: 30px; }\n.fr-s05-nav-icon.n-reports { left: 88px; }\n.fr-s05-nav-icon.n-articles { right: 88px; }\n.fr-s05-nav-icon.n-profile { right: 30px; }\n\n.fr-s05-nav-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  z-index: 46;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s05-nav-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* RESET *\/\n.fr-s05-reset {\n  position: absolute;\n  top: 16px;\n  right: -44px;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.3);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 50;\n}\n\n.fr-s05-reset:hover {\n  background: rgba(255, 59, 59, 0.25);\n}\n\n.fr-s05-reset i {\n  color: #ff3b3b;\n  font-size: 14px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step05 { padding: 50px 20px; }\n  .fr-step05-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step05-info h2 { font-size: 1.7rem; }\n  .fr-step05-features li { justify-content: center; }\n  .fr-s05-phone { width: 300px; height: 600px; }\n  .fr-s05-reset { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }\n}\n<\/style>\n\n<div class=\"fr-step05\">\n  <div class=\"fr-step05-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step05-info\">\n      <div class=\"fr-step05-tag\">\n        <i class=\"fas fa-chart-line\"><\/i> Step 05\n      <\/div>\n      <h2>Track your impact<br>&#038; climb the ranks<\/h2>\n      <p>Every report strengthens the biosecurity network. Watch your contributions add up, compete on the community leaderboard, and see how your local area is tracking in real time.<\/p>\n      <ul class=\"fr-step05-features\">\n        <li><i class=\"fas fa-trophy\"><\/i> Community leaderboard by region<\/li>\n        <li><i class=\"fas fa-map-marked-alt\"><\/i> Live heatmap of reported sightings<\/li>\n        <li><i class=\"fas fa-fire\"><\/i> Your total contribution to eradication<\/li>\n        <li><i class=\"fas fa-users\"><\/i> Network effect \u2014 more users, faster response<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE -->\n    <div class=\"fr-step05-phone-col\">\n      <div class=\"fr-s05-phone\" id=\"frS05Phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s05-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s05-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s05-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- STATE 1: PROFILE + LEADERBOARD -->\n        <div class=\"fr-s05-state fr-s05-profile active\" id=\"frS05Profile\">\n\n          <!-- Profile Header -->\n          <div class=\"fr-s05-profile-top\">\n            <div class=\"fr-s05-avatar\">JD<\/div>\n            <p class=\"fr-s05-username\">john.doe@example.com<\/p>\n            <span class=\"fr-s05-rank\"><i class=\"fas fa-shield-alt\"><\/i> Scout Rank<\/span>\n          <\/div>\n\n          <!-- Stats Row -->\n          <div class=\"fr-s05-stats-row\">\n            <div class=\"fr-s05-stat-card\">\n              <p class=\"fr-s05-stat-num\">7<\/p>\n              <p class=\"fr-s05-stat-label\">Reports<\/p>\n            <\/div>\n            <div class=\"fr-s05-stat-card\">\n              <p class=\"fr-s05-stat-num\">770<\/p>\n              <p class=\"fr-s05-stat-label\">Points<\/p>\n            <\/div>\n            <div class=\"fr-s05-stat-card\">\n              <p class=\"fr-s05-stat-num\">#12<\/p>\n              <p class=\"fr-s05-stat-label\">Rank<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Tabs -->\n          <div class=\"fr-s05-tabs\">\n            <div class=\"fr-s05-tab active\" id=\"frS05TabLb\">Leaderboard<\/div>\n            <div class=\"fr-s05-tab\" id=\"frS05TabImpact\">My Impact<\/div>\n          <\/div>\n\n          <!-- Leaderboard -->\n          <div class=\"fr-s05-lb-header\">\n            <p class=\"fr-s05-lb-title\">Example region<\/p>\n            <span class=\"fr-s05-lb-tab\">This Month<\/span>\n          <\/div>\n\n          <ul class=\"fr-s05-lb-list\">\n            <li class=\"fr-s05-lb-item\">\n              <span class=\"fr-s05-lb-pos\">1<\/span>\n              <div class=\"fr-s05-lb-avatar\">SD<\/div>\n              <div>\n                <p class=\"fr-s05-lb-name\">Sam Doe<\/p>\n                <p class=\"fr-s05-lb-region\">Demo District A<\/p>\n              <\/div>\n              <span class=\"fr-s05-lb-pts\">2,340<\/span>\n            <\/li>\n            <li class=\"fr-s05-lb-item\">\n              <span class=\"fr-s05-lb-pos\">2<\/span>\n              <div class=\"fr-s05-lb-avatar\">RD<\/div>\n              <div>\n                <p class=\"fr-s05-lb-name\">Robin Doe<\/p>\n                <p class=\"fr-s05-lb-region\">Demo District B<\/p>\n              <\/div>\n              <span class=\"fr-s05-lb-pts\">1,890<\/span>\n            <\/li>\n            <li class=\"fr-s05-lb-item\">\n              <span class=\"fr-s05-lb-pos\">3<\/span>\n              <div class=\"fr-s05-lb-avatar\">CD<\/div>\n              <div>\n                <p class=\"fr-s05-lb-name\">Casey Doe<\/p>\n                <p class=\"fr-s05-lb-region\">Demo District C<\/p>\n              <\/div>\n              <span class=\"fr-s05-lb-pts\">1,550<\/span>\n            <\/li>\n            <li class=\"fr-s05-lb-item me\">\n              <span class=\"fr-s05-lb-pos\">12<\/span>\n              <div class=\"fr-s05-lb-avatar\">JD<\/div>\n              <div>\n                <p class=\"fr-s05-lb-name\">You<\/p>\n                <p class=\"fr-s05-lb-region\">Example District<\/p>\n              <\/div>\n              <span class=\"fr-s05-lb-pts\">770<\/span>\n            <\/li>\n          <\/ul>\n\n        <\/div>\n\n        <!-- STATE 2: COMMUNITY IMPACT MAP -->\n        <div class=\"fr-s05-state fr-s05-impact\" id=\"frS05Impact\">\n\n          <div class=\"fr-s05-impact-header\">\n            <div class=\"fr-s05-impact-back\" id=\"frS05BackBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n            <p class=\"fr-s05-impact-title\">Community Impact<\/p>\n          <\/div>\n\n          <!-- Map Area -->\n          <div class=\"fr-s05-map-area\">\n            <div class=\"fr-s05-map-dots\">\n              <div class=\"fr-s05-dot\"><\/div>\n              <div class=\"fr-s05-dot\"><\/div>\n              <div class=\"fr-s05-dot\"><\/div>\n              <div class=\"fr-s05-dot\"><\/div>\n              <div class=\"fr-s05-dot\"><\/div>\n              <div class=\"fr-s05-dot\"><\/div>\n            <\/div>\n            <span class=\"fr-s05-map-label\">Example region<\/span>\n            <span class=\"fr-s05-map-count\">847 reports<\/span>\n          <\/div>\n\n          <!-- Impact Stats -->\n          <div class=\"fr-s05-impact-stats\">\n            <div class=\"fr-s05-impact-card\">\n              <p class=\"fr-s05-impact-num\"><span>847<\/span><\/p>\n              <p class=\"fr-s05-impact-desc\">Total Reports<\/p>\n            <\/div>\n            <div class=\"fr-s05-impact-card\">\n              <p class=\"fr-s05-impact-num\"><span>234<\/span><\/p>\n              <p class=\"fr-s05-impact-desc\">Active Users<\/p>\n            <\/div>\n            <div class=\"fr-s05-impact-card\">\n              <p class=\"fr-s05-impact-num\"><span>92%<\/span><\/p>\n              <p class=\"fr-s05-impact-desc\">Accuracy Rate<\/p>\n            <\/div>\n            <div class=\"fr-s05-impact-card\">\n              <p class=\"fr-s05-impact-num\"><span>48hr<\/span><\/p>\n              <p class=\"fr-s05-impact-desc\">Avg Response<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Recent Activity -->\n          <p class=\"fr-s05-activity-title\">Sample Network Activity<\/p>\n\n          <div class=\"fr-s05-activity-item\">\n            <div class=\"fr-s05-activity-icon\"><i class=\"fas fa-flag\"><\/i><\/div>\n            <p class=\"fr-s05-activity-text\"><strong>Demo report added<\/strong> \u2014 Demo District A<\/p>\n            <span class=\"fr-s05-activity-time\">2h ago<\/span>\n          <\/div>\n\n          <div class=\"fr-s05-activity-item\">\n            <div class=\"fr-s05-activity-icon\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n            <p class=\"fr-s05-activity-text\"><strong>Demo follow-up shown<\/strong> \u2014 Example District<\/p>\n            <span class=\"fr-s05-activity-time\">5h ago<\/span>\n          <\/div>\n\n          <div class=\"fr-s05-activity-item\">\n            <div class=\"fr-s05-activity-icon\"><i class=\"fas fa-user-plus\"><\/i><\/div>\n            <p class=\"fr-s05-activity-text\"><strong>12 demo users<\/strong> in this sample<\/p>\n            <span class=\"fr-s05-activity-time\">1d ago<\/span>\n          <\/div>\n\n          <div class=\"fr-s05-activity-item\">\n            <div class=\"fr-s05-activity-icon\"><i class=\"fas fa-bug\"><\/i><\/div>\n            <p class=\"fr-s05-activity-text\"><strong>Demo reports grouped<\/strong> \u2014 Demo District B<\/p>\n            <span class=\"fr-s05-activity-time\">2d ago<\/span>\n          <\/div>\n\n        <\/div>\n\n        <!-- Bottom Nav -->\n        <div class=\"fr-s05-nav\">\n          <div class=\"fr-s05-nav-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s05-nav-icon n-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s05-nav-icon n-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s05-nav-icon n-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s05-nav-icon n-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Reset -->\n        <div class=\"fr-s05-reset\" id=\"frS05Reset\" title=\"Reset\">\n          <i class=\"fas fa-redo-alt\"><\/i>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var profile = document.getElementById('frS05Profile');\n  var impact = document.getElementById('frS05Impact');\n  var tabLb = document.getElementById('frS05TabLb');\n  var tabImpact = document.getElementById('frS05TabImpact');\n  var backBtn = document.getElementById('frS05BackBtn');\n  var resetBtn = document.getElementById('frS05Reset');\n\n  function hideAll() {\n    profile.classList.remove('active');\n    impact.classList.remove('active');\n  }\n\n  function showState(el) {\n    hideAll();\n    el.classList.add('active');\n  }\n\n  tabImpact.addEventListener('click', function(e) {\n    e.stopPropagation();\n    tabLb.classList.remove('active');\n    tabImpact.classList.add('active');\n    showState(impact);\n  });\n\n  tabLb.addEventListener('click', function(e) {\n    e.stopPropagation();\n    tabImpact.classList.remove('active');\n    tabLb.classList.add('active');\n    showState(profile);\n  });\n\n  backBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    tabImpact.classList.remove('active');\n    tabLb.classList.add('active');\n    showState(profile);\n  });\n\n  resetBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    tabImpact.classList.remove('active');\n    tabLb.classList.add('active');\n    showState(profile);\n  });\n})();\n<\/script>\n\n\n\n<!-- ============================================\n     FIRE RANT \u2014 APP PAGE STEP 06\n     Knowledge Hub \u2014 Learn & Stay Informed\n     2-Column: Info left, iPhone right\n     IMAGE: ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\n============================================ -->\n\n\n\n<style>\n.fr-step06 {\n  background: #0a0a0a;\n  padding: 80px 40px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  border-top: 1px solid rgba(255,255,255,0.04);\n}\n\n.fr-step06-grid {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n}\n\n\/* LEFT COLUMN \u2014 INFO *\/\n.fr-step06-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.25);\n  border-radius: 980px;\n  padding: 6px 14px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 24px;\n}\n\n.fr-step06-info h2 {\n  font-size: 2.2rem;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n  letter-spacing: -0.5px;\n  line-height: 1.15;\n}\n\n.fr-step06-info > p {\n  font-size: 1.05rem;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.7;\n  margin: 0 0 28px;\n}\n\n.fr-step06-features {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.fr-step06-features li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  font-size: 0.95rem;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.fr-step06-features li i {\n  color: #ff3b3b;\n  font-size: 14px;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 59, 59, 0.1);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\/* RIGHT COLUMN \u2014 iPHONE *\/\n.fr-step06-phone-col {\n  display: flex;\n  justify-content: center;\n  position: relative;\n}\n\n.fr-s06-phone {\n  position: relative;\n  width: 320px;\n  height: 640px;\n  background: #000;\n  border-radius: 44px;\n  border: 4px solid #2a2a2a;\n  box-shadow: 0 25px 70px rgba(0,0,0,.75);\n  overflow: hidden;\n  font-family: Inter, -apple-system, Arial, sans-serif;\n}\n\n\/* Status Bar *\/\n.fr-s06-status {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: grid;\n  grid-template-columns: 48px 1fr 68px;\n  align-items: center;\n  padding: 14px 24px 0;\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n  z-index: 30;\n  background: #0d0d0d;\n}\n\n.fr-s06-status-right {\n  text-align: right;\n  font-weight: 600;\n}\n\n.fr-s06-island {\n  width: 140px;\n  height: 34px;\n  background: #000;\n  border-radius: 999px;\n  margin: 0 auto;\n  border: 1.5px solid #ff3b3b;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n}\n\n.fr-s06-island img {\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n}\n\n\/* ALL STATES *\/\n.fr-s06-state {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.fr-s06-state::-webkit-scrollbar {\n  display: none;\n}\n\n.fr-s06-state.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\/* ==========================================\n   STATE 1: KNOWLEDGE HUB \u2014 ARTICLE LIST\n   ========================================== *\/\n.fr-s06-hub {\n  padding: 62px 18px 130px;\n}\n\n.fr-s06-hub-header {\n  margin-bottom: 18px;\n}\n\n.fr-s06-hub-title {\n  font-size: 18px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 4px;\n}\n\n.fr-s06-hub-sub {\n  font-size: 11px;\n  color: rgba(255,255,255,0.4);\n  margin: 0;\n}\n\n\/* Category Chips *\/\n.fr-s06-chips {\n  display: flex;\n  gap: 6px;\n  margin-bottom: 18px;\n  overflow-x: auto;\n}\n\n.fr-s06-chips::-webkit-scrollbar { display: none; }\n\n.fr-s06-chip {\n  padding: 6px 12px;\n  border-radius: 980px;\n  font-size: 10px;\n  font-weight: 700;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: all 0.2s;\n  border: 1px solid rgba(255,255,255,0.08);\n  color: rgba(255,255,255,0.5);\n  background: rgba(255,255,255,0.03);\n}\n\n.fr-s06-chip.active {\n  background: rgba(255, 59, 59, 0.12);\n  border-color: rgba(255, 59, 59, 0.3);\n  color: #ff3b3b;\n}\n\n\/* Article Cards *\/\n.fr-s06-article {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 16px;\n  overflow: hidden;\n  margin-bottom: 12px;\n  cursor: pointer;\n  transition: transform 0.2s, border-color 0.2s;\n}\n\n.fr-s06-article:hover {\n  transform: scale(1.01);\n  border-color: rgba(255, 59, 59, 0.2);\n}\n\n.fr-s06-article-img {\n  width: 100%;\n  height: 100px;\n  object-fit: cover;\n  display: block;\n}\n\n.fr-s06-article-body {\n  padding: 12px 14px;\n}\n\n.fr-s06-article-cat {\n  font-size: 9px;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  margin: 0 0 4px;\n}\n\n.fr-s06-article-title {\n  font-size: 13px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 4px;\n  line-height: 1.3;\n}\n\n.fr-s06-article-meta {\n  font-size: 9px;\n  color: rgba(255,255,255,0.35);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fr-s06-article-meta i {\n  font-size: 8px;\n}\n\n\/* ==========================================\n   STATE 2: ARTICLE DETAIL VIEW\n   ========================================== *\/\n.fr-s06-detail {\n  padding: 62px 18px 130px;\n}\n\n.fr-s06-detail-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.fr-s06-detail-back {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 11px;\n  cursor: pointer;\n}\n\n.fr-s06-detail-label {\n  font-size: 12px;\n  font-weight: 700;\n  color: rgba(255,255,255,0.5);\n  margin: 0;\n}\n\n.fr-s06-detail-hero {\n  width: 100%;\n  height: 130px;\n  border-radius: 14px;\n  object-fit: cover;\n  display: block;\n  margin-bottom: 16px;\n}\n\n.fr-s06-detail-cat {\n  font-size: 9px;\n  font-weight: 700;\n  color: #ff3b3b;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  margin: 0 0 6px;\n}\n\n.fr-s06-detail-title {\n  font-size: 17px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 6px;\n  line-height: 1.25;\n}\n\n.fr-s06-detail-date {\n  font-size: 10px;\n  color: rgba(255,255,255,0.35);\n  margin: 0 0 16px;\n}\n\n.fr-s06-detail-text {\n  font-size: 12px;\n  color: rgba(255,255,255,0.65);\n  line-height: 1.7;\n  margin: 0 0 16px;\n}\n\n.fr-s06-detail-text strong {\n  color: #fff;\n}\n\n\/* Tips List *\/\n.fr-s06-tips {\n  list-style: none;\n  padding: 0;\n  margin: 0 0 16px;\n}\n\n.fr-s06-tips li {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 8px 0;\n  font-size: 11px;\n  color: rgba(255,255,255,0.6);\n  line-height: 1.5;\n}\n\n.fr-s06-tips li i {\n  color: #ff3b3b;\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n\n\/* Related Articles *\/\n.fr-s06-related-title {\n  font-size: 12px;\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 10px;\n}\n\n.fr-s06-related-row {\n  display: flex;\n  gap: 8px;\n}\n\n.fr-s06-related-card {\n  flex: 1;\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.fr-s06-related-img {\n  width: 100%;\n  height: 50px;\n  object-fit: cover;\n  display: block;\n}\n\n.fr-s06-related-name {\n  font-size: 9px;\n  font-weight: 700;\n  color: rgba(255,255,255,0.7);\n  padding: 6px 8px;\n  margin: 0;\n}\n\n\/* Bottom Nav *\/\n.fr-s06-nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 120px;\n  background-image: url('https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Full-scaled.webp');\n  background-repeat: no-repeat;\n  background-position: bottom center;\n  background-size: 100% auto;\n  z-index: 40;\n}\n\n.fr-s06-nav-icon {\n  position: absolute;\n  bottom: 24px;\n  width: 26px;\n  height: 26px;\n  color: rgba(255,255,255,0.72);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s06-nav-icon svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.fr-s06-nav-icon.n-home { left: 30px; }\n.fr-s06-nav-icon.n-reports { left: 88px; }\n.fr-s06-nav-icon.n-articles { right: 88px; color: #ff3b3b; }\n.fr-s06-nav-icon.n-profile { right: 30px; }\n\n.fr-s06-nav-camera {\n  position: absolute;\n  left: 50%;\n  top: 58%;\n  transform: translate(-50%, -50%);\n  margin-top: -16px;\n  width: 26px;\n  height: 26px;\n  color: #fff;\n  z-index: 46;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fr-s06-nav-camera svg {\n  width: 20px;\n  height: 20px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* RESET *\/\n.fr-s06-reset {\n  position: absolute;\n  top: 16px;\n  right: -44px;\n  width: 36px;\n  height: 36px;\n  background: rgba(255, 59, 59, 0.1);\n  border: 1px solid rgba(255, 59, 59, 0.3);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 50;\n}\n\n.fr-s06-reset:hover {\n  background: rgba(255, 59, 59, 0.25);\n}\n\n.fr-s06-reset i {\n  color: #ff3b3b;\n  font-size: 14px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-step06 { padding: 50px 20px; }\n  .fr-step06-grid {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    text-align: center;\n  }\n  .fr-step06-info h2 { font-size: 1.7rem; }\n  .fr-step06-features li { justify-content: center; }\n  .fr-s06-phone { width: 300px; height: 600px; }\n  .fr-s06-reset { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }\n}\n<\/style>\n\n<div class=\"fr-step06\">\n  <div class=\"fr-step06-grid\">\n\n    <!-- LEFT \u2014 INFO -->\n    <div class=\"fr-step06-info\">\n      <div class=\"fr-step06-tag\">\n        <i class=\"fas fa-book-open\"><\/i> Step 06\n      <\/div>\n      <h2>Learn from the<br>Knowledge Hub<\/h2>\n      <p>Access peer-reviewed identification guides, treatment protocols, and biosecurity updates \u2014 all curated by entomologists and field researchers working on the eradication frontline.<\/p>\n      <ul class=\"fr-step06-features\">\n        <li><i class=\"fas fa-microscope\"><\/i> Science-backed identification guides<\/li>\n        <li><i class=\"fas fa-shield-alt\"><\/i> APVMA-registered treatment protocols<\/li>\n        <li><i class=\"fas fa-bell\"><\/i> Real-time biosecurity alerts<\/li>\n        <li><i class=\"fas fa-graduation-cap\"><\/i> Earn points for completing articles<\/li>\n      <\/ul>\n    <\/div>\n\n    <!-- RIGHT \u2014 iPHONE -->\n    <div class=\"fr-step06-phone-col\">\n      <div class=\"fr-s06-phone\" id=\"frS06Phone\">\n\n        <!-- Status Bar -->\n        <div class=\"fr-s06-status\">\n          <span>2:34<\/span>\n          <div class=\"fr-s06-island\">\n            <img decoding=\"async\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/antScroll-scaled.png\" alt=\"Ant\">\n          <\/div>\n          <span class=\"fr-s06-status-right\">5G&nbsp;&nbsp;77%<\/span>\n        <\/div>\n\n        <!-- STATE 1: KNOWLEDGE HUB LIST -->\n        <div class=\"fr-s06-state fr-s06-hub active\" id=\"frS06Hub\">\n\n          <div class=\"fr-s06-hub-header\">\n            <p class=\"fr-s06-hub-title\">Knowledge Hub<\/p>\n            <p class=\"fr-s06-hub-sub\">Learn to identify, report &#038; protect<\/p>\n          <\/div>\n\n          <!-- Category Chips -->\n          <div class=\"fr-s06-chips\">\n            <div class=\"fr-s06-chip active\">All<\/div>\n            <div class=\"fr-s06-chip\">Identification<\/div>\n            <div class=\"fr-s06-chip\">Prevention<\/div>\n            <div class=\"fr-s06-chip\">Treatment<\/div>\n            <div class=\"fr-s06-chip\">News<\/div>\n          <\/div>\n\n          <!-- Article 1 -->\n          <div class=\"fr-s06-article\" id=\"frS06Art1\">\n            <img decoding=\"async\" class=\"fr-s06-article-img\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire Ant ID\">\n            <div class=\"fr-s06-article-body\">\n              <p class=\"fr-s06-article-cat\">Identification<\/p>\n              <p class=\"fr-s06-article-title\">How to Identify Red Imported Fire Ants<\/p>\n              <p class=\"fr-s06-article-meta\"><i class=\"fas fa-clock\"><\/i> 4 min read &nbsp;&nbsp;<i class=\"fas fa-star\"><\/i> +20 pts<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Article 2 -->\n          <div class=\"fr-s06-article\" id=\"frS06Art2\">\n            <img decoding=\"async\" class=\"fr-s06-article-img\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Treatment\">\n            <div class=\"fr-s06-article-body\">\n              <p class=\"fr-s06-article-cat\">Treatment<\/p>\n              <p class=\"fr-s06-article-title\">IGR Bait Application Guide<\/p>\n              <p class=\"fr-s06-article-meta\"><i class=\"fas fa-clock\"><\/i> 6 min read &nbsp;&nbsp;<i class=\"fas fa-star\"><\/i> +30 pts<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Article 3 -->\n          <div class=\"fr-s06-article\">\n            <img decoding=\"async\" class=\"fr-s06-article-img\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Prevention\">\n            <div class=\"fr-s06-article-body\">\n              <p class=\"fr-s06-article-cat\">Prevention<\/p>\n              <p class=\"fr-s06-article-title\">Protecting Your Property from Fire Ants<\/p>\n              <p class=\"fr-s06-article-meta\"><i class=\"fas fa-clock\"><\/i> 5 min read &nbsp;&nbsp;<i class=\"fas fa-star\"><\/i> +25 pts<\/p>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- STATE 2: ARTICLE DETAIL -->\n        <div class=\"fr-s06-state fr-s06-detail\" id=\"frS06Detail\">\n\n          <div class=\"fr-s06-detail-header\">\n            <div class=\"fr-s06-detail-back\" id=\"frS06BackBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n            <p class=\"fr-s06-detail-label\">Knowledge Hub<\/p>\n          <\/div>\n\n          <img decoding=\"async\" class=\"fr-s06-detail-hero\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Fire Ant\">\n\n          <p class=\"fr-s06-detail-cat\">Identification<\/p>\n          <p class=\"fr-s06-detail-title\">How to Identify Red Imported Fire Ants<\/p>\n          <p class=\"fr-s06-detail-date\"><i class=\"fas fa-calendar-alt\" style=\"margin-right:4px;\"><\/i> Jun 28, 2026 &nbsp;\u00b7&nbsp; 4 min read<\/p>\n\n          <p class=\"fr-s06-detail-text\">\n            <strong>Solenopsis invicta<\/strong> (Red Imported Fire Ants) can be distinguished from native species by several key features. RIFA workers range from 2\u20136mm in length and vary in size within the same colony \u2014 a hallmark of polymorphic species.\n          <\/p>\n\n          <p class=\"fr-s06-detail-text\" style=\"margin-bottom:12px;\">\n            <strong>Key identification markers:<\/strong>\n          <\/p>\n\n          <ul class=\"fr-s06-tips\">\n            <li><i class=\"fas fa-check-circle\"><\/i> Copper-brown head and darker abdomen<\/li>\n            <li><i class=\"fas fa-check-circle\"><\/i> Multiple worker sizes (2\u20136mm) in one nest<\/li>\n            <li><i class=\"fas fa-check-circle\"><\/i> Dome-shaped mound with no visible entry hole<\/li>\n            <li><i class=\"fas fa-check-circle\"><\/i> Aggressive swarming when nest is disturbed<\/li>\n            <li><i class=\"fas fa-check-circle\"><\/i> Painful sting producing white pustule after 24hrs<\/li>\n          <\/ul>\n\n          <p class=\"fr-s06-detail-text\">\n            If you suspect RIFA, do not disturb the nest. Use the Fire Rant camera to scan and report immediately.\n          <\/p>\n\n          <!-- Related -->\n          <p class=\"fr-s06-related-title\">Related Articles<\/p>\n          <div class=\"fr-s06-related-row\">\n            <div class=\"fr-s06-related-card\">\n              <img decoding=\"async\" class=\"fr-s06-related-img\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Related\">\n              <p class=\"fr-s06-related-name\">IGR Bait Guide<\/p>\n            <\/div>\n            <div class=\"fr-s06-related-card\">\n              <img decoding=\"async\" class=\"fr-s06-related-img\" src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-24-2026-10_16_08-PM.webp\" alt=\"Related\">\n              <p class=\"fr-s06-related-name\">Property Protection<\/p>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- Bottom Nav -->\n        <div class=\"fr-s06-nav\">\n          <div class=\"fr-s06-nav-camera\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 7h2l1.5-2h3L15 7h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z\"><\/path>\n              <circle cx=\"12\" cy=\"13.5\" r=\"3.2\"><\/circle>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s06-nav-icon n-home\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M3 11.5L12 4l9 7.5\"><\/path>\n              <path d=\"M5.5 10.5V20h5v-5h3v5h5v-9.5\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s06-nav-icon n-reports\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M8 4h8\"><\/path>\n              <path d=\"M9 4a3 3 0 0 0 6 0\"><\/path>\n              <rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n              <path d=\"M8 11h8\"><\/path>\n              <path d=\"M8 15h8\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s06-nav-icon n-articles\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4 5.5c2.5 0 5 .4 8 2.2v12c-3-1.8-5.5-2.2-8-2.2z\"><\/path>\n              <path d=\"M20 5.5c-2.5 0-5 .4-8 2.2v12c3-1.8 5.5-2.2 8-2.2z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"fr-s06-nav-icon n-profile\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"8\" r=\"3.5\"><\/circle>\n              <path d=\"M5 20c1.2-4 4-6 7-6s5.8 2 7 6\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <!-- Reset -->\n        <div class=\"fr-s06-reset\" id=\"frS06Reset\" title=\"Reset\">\n          <i class=\"fas fa-redo-alt\"><\/i>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var hub = document.getElementById('frS06Hub');\n  var detail = document.getElementById('frS06Detail');\n  var art1 = document.getElementById('frS06Art1');\n  var art2 = document.getElementById('frS06Art2');\n  var backBtn = document.getElementById('frS06BackBtn');\n  var resetBtn = document.getElementById('frS06Reset');\n\n  function hideAll() {\n    hub.classList.remove('active');\n    detail.classList.remove('active');\n  }\n\n  function showState(el) {\n    hideAll();\n    el.classList.add('active');\n  }\n\n  art1.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(detail);\n  });\n\n  art2.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(detail);\n  });\n\n  backBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(hub);\n  });\n\n  resetBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    showState(hub);\n  });\n})();\n<\/script>\n\n\n\n<style>\n\/* Force out of any Elementor container *\/\n.elementor-widget-container .fr-web-nav,\nbody > .fr-web-nav,\n.fr-web-nav {\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  position: fixed !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n  z-index: 999999 !important;\n  pointer-events: none;\n  transform: none !important;\n  will-change: auto !important;\n}\n\n.fr-web-nav-container {\n  position: relative;\n  width: 100%;\n  max-width: 1920px;\n  margin: 0 auto;\n  pointer-events: none;\n}\n\n\/* Red fill underneath the nav image (for mobile transparency) *\/\n.fr-web-nav-redfill {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  background: #ff3b3b;\n  z-index: 1;\n  pointer-events: all;\n}\n\n\/* Nav images *\/\n.fr-web-nav-img {\n  width: 100%;\n  height: auto;\n  display: block;\n  pointer-events: all;\n  position: relative;\n  z-index: 5;\n}\n\n.fr-web-nav-img-desktop {\n  display: block;\n}\n\n.fr-web-nav-img-mobile {\n  display: none;\n}\n\n\/* Centre red dot with white home icon \u2014 DESKTOP *\/\n.fr-web-nav-home {\n  position: absolute;\n  left: 50%;\n  bottom: 38px;\n  transform: translateX(-50%);\n  width: 58px;\n  height: 58px;\n  background: #ff3b3b;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 20px rgba(255,59,59,0.35);\n  z-index: 20;\n  text-decoration: none;\n  color: #fff;\n  font-size: 22px;\n  transition: transform 0.2s, box-shadow 0.2s;\n  pointer-events: all;\n}\n\n.fr-web-nav-home:hover {\n  transform: translateX(-50%) scale(1.08);\n  box-shadow: 0 6px 28px rgba(255,59,59,0.5);\n}\n\n\/* Nav links overlaid *\/\n.fr-web-nav-links {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  z-index: 15;\n  pointer-events: all;\n}\n\n.fr-web-nav-link {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 3px;\n  text-decoration: none;\n  color: #fff;\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  opacity: 0.9;\n  transition: opacity 0.2s, transform 0.2s;\n  width: 70px;\n}\n\n.fr-web-nav-link:hover {\n  opacity: 1;\n  transform: translateY(-2px);\n}\n\n.fr-web-nav-link i {\n  font-size: 18px;\n}\n\n\/* Spacer for centre button *\/\n.fr-web-nav-link-spacer {\n  width: 100px;\n}\n\n\/* Page spacer *\/\n.fr-web-nav-page-spacer {\n  height: 80px;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n  .fr-web-nav-img-desktop {\n    display: none;\n  }\n\n  .fr-web-nav-img-mobile {\n    display: block;\n  }\n\n  .fr-web-nav-redfill {\n    height: 40px;\n  }\n\n  .fr-web-nav-home {\n    width: 50px;\n    height: 50px;\n    font-size: 18px;\n    bottom: 70px;\n  }\n\n  .fr-web-nav-links {\n    bottom: 8px;\n  }\n\n  .fr-web-nav-link {\n    width: 55px;\n    font-size: 8px;\n  }\n\n  .fr-web-nav-link i {\n    font-size: 15px;\n  }\n\n  .fr-web-nav-link-spacer {\n    width: 65px;\n  }\n\n  .fr-web-nav-page-spacer {\n    height: 70px;\n  }\n}\n<\/style>\n\n<!-- Page spacer so content isn't hidden -->\n<div class=\"fr-web-nav-page-spacer\"><\/div>\n\n<!-- Fixed Bottom Nav -->\n<div class=\"fr-web-nav\" id=\"frWebNavBar\">\n  <div class=\"fr-web-nav-container\">\n\n    <!-- Red fill underneath transparent areas (mobile only) -->\n    <div class=\"fr-web-nav-redfill\"><\/div>\n\n    <!-- Desktop nav image -->\n    <img decoding=\"async\" \n      src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/FA-bottom-nav-Desktop-version-1-scaled.png\" \n      alt=\"Navigation\" \n      class=\"fr-web-nav-img fr-web-nav-img-desktop\"\n    >\n\n    <!-- Mobile nav image -->\n    <img decoding=\"async\" \n      src=\"https:\/\/firerant.com.au\/wp-content\/uploads\/2026\/06\/Nav-Menu-Bar-scaled.webp\" \n      alt=\"Navigation\" \n      class=\"fr-web-nav-img fr-web-nav-img-mobile\"\n    >\n\n    <!-- Centre red dot with white home icon -->\n    <a aria-label=\"Home\" href=\"https:\/\/firerant.com.au\/\" class=\"fr-web-nav-home\">\n      <i class=\"fas fa-home\"><\/i>\n    <\/a>\n\n    <!-- Clickable nav links -->\n    <div class=\"fr-web-nav-links\">\n      <a href=\"https:\/\/firerant.com.au\/?page_id=573\" class=\"fr-web-nav-link\">\n        <i class=\"fas fa-map-marker-alt\"><\/i>\n        <span>Map<\/span>\n      <\/a>\n      <a href=\"https:\/\/firerant.com.au\/?page_id=571\" class=\"fr-web-nav-link\">\n        <i class=\"fas fa-mobile-alt\"><\/i>\n        <span>App<\/span>\n      <\/a>\n\n      <!-- Spacer for centre button -->\n      <span class=\"fr-web-nav-link-spacer\"><\/span>\n\n      <a href=\"https:\/\/firerant.com.au\/?page_id=1452\" class=\"fr-web-nav-link\">\n        <i class=\"fas fa-language\"><\/i>\n        <span>\u4e2d\u6587<\/span>\n      <\/a>\n      <a href=\"https:\/\/firerant.com.au\/?page_id=392\" class=\"fr-web-nav-link\">\n        <i class=\"fas fa-info-circle\"><\/i>\n        <span>About<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n\n<script>\n(function() {\n  function moveNav() {\n    var nav = document.getElementById('frWebNavBar');\n    if (nav && nav.parentElement !== document.body) {\n      document.body.appendChild(nav);\n    }\n    \/\/ Also kill any transform\/filter on parent chain that breaks position:fixed\n    var el = nav;\n    while (el && el !== document.body) {\n      el = el.parentElement;\n      if (el && el !== document.body) {\n        var style = window.getComputedStyle(el);\n        if (style.transform !== 'none' || style.filter !== 'none' || style.willChange === 'transform') {\n          el.style.transform = 'none';\n          el.style.filter = 'none';\n          el.style.willChange = 'auto';\n        }\n      }\n    }\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', moveNav);\n  } else {\n    moveNav();\n  }\n  \/\/ Backup: also try after a short delay (for Elementor lazy loading)\n  setTimeout(moveNav, 500);\n  setTimeout(moveNav, 1500);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Map App About \u4e2d\u6587 Get the App The App PHOTOGRAPH. IDENTIFY. REPORT. CITIZEN BIOSECURITY IN YOUR POCKET. AI-POWERED. GEO-TAGGED. GAMIFIED. Fire Rant turns every smartphone into a surveillance tool \u2014 real-time nest identification, evidence-grade reporting, and community-driven engagement in a single platform. Ask about iOS access Explore Features 85%+ AI confidence score Computer vision model [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/firerant.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=571"}],"version-history":[{"count":7,"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":1468,"href":"https:\/\/firerant.com.au\/index.php?rest_route=\/wp\/v2\/pages\/571\/revisions\/1468"}],"wp:attachment":[{"href":"https:\/\/firerant.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}