@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --green: #00a52b;
  --green-dark: #006b52;
  --text: #0b282c;
  --muted: #536879;
  --line: #e9eeee;
  --pale: #f2fff4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background: #fff;
}
a { text-decoration: none; color: inherit; }

.nav-height { min-height: 92px; }
.navbar-brand strong {
  display: block;
  font-size: 21px;
  letter-spacing: -.7px;
  line-height: 1;
  color: #10252b;
}
.navbar-brand small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #68767b;
}
.brand-mark {
  width: 43px; height: 43px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid #168c2a;
  color: #168c2a;
  font-size: 23px;
}
.logo {
  height: 50px;
  width: auto;
}
.brand-text {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-link {
  color: #12272b !important;
  padding: 34px 0 !important;
  font-size: 14px;
  position: relative;
}
.nav-link i { margin-right: 6px; }
.nav-link.active { color: #087e22 !important; }
.nav-link.active:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--green);
}
.top-btn {
  border: 1px solid #edf0f0;
  box-shadow: 0 2px 7px rgba(0,0,0,.04);
  padding: 12px 22px;
  font-size: 14px;
}
.btn-electro {
  background: var(--green);
  color: white;
  border: 0;
  font-weight: 600;
  padding: 13px 23px;
}
.btn-electro:hover { background: #008e25; color: #fff; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 418px;
  background: linear-gradient(108deg, #fff 0%, #f5fbf8 53%, #f1f7f5 100%);
}
.hero:after {
  content: "";
  position: absolute;
  width: 720px; height: 480px;
  right: -120px; top: -130px;
  background: radial-gradient(circle, rgba(205,246,213,.72), transparent 68%);
  pointer-events: none;
}
.hero-dots {
  position: absolute; left: 0; top: 0; width: 220px; height: 180px;
  opacity: .55;
  background-image: radial-gradient(#b9ebc4 4px, transparent 4px);
  background-size: 22px 22px;
}
.hero-row { min-height: 418px; position: relative; z-index: 1; }
.hero-copy { padding: 45px 0 38px 5.2%; }
.eyebrow {
  color: #079125; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(42px, 4vw, 62px);
  line-height: 1.03;
  letter-spacing: -2.5px;
  font-weight: 800;
  margin: 0 0 16px;
}
.hero h1 span { color: var(--green); }
.hero .lead {
  font-size: 16px; line-height: 1.6; color: #506475; margin-bottom: 20px;
}
.ai-search {
  height: 76px; max-width: 680px;
  display: flex; align-items: center; gap: 14px;
  background: white; border: 1px solid #bcefc9;
  border-radius: 42px; padding: 8px 10px 8px 16px;
  box-shadow: 0 8px 28px rgba(0, 170, 45, .13);
}
.ai-icon {
  width: 43px; height: 43px; flex: 0 0 43px;
  border-radius: 50%; background: #e2f9e7;
  display: grid; place-items: center; color: var(--green);
  font-size: 21px;
}
.search-field {
  min-width: 0;
  flex: 1;
}
.search-field input {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #263b45;
  font: 500 14px Inter, Arial, sans-serif;
}
.search-field input::placeholder {
  color: #647586;
  opacity: 1;
}
.search-field span {
  display: block;
  margin-top: 5px;
  color: #8a98a2;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.send-btn {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  border: 0; background: var(--green); color: white; font-size: 18px;
}
.ai-note { margin-top: 18px; font-size: 13px; color: #61716f; }
.ai-note i { color: var(--green); font-size: 18px; vertical-align: middle; }
.ai-note strong { color: #15742a; }

.hero-visual {
  height: 418px;
  position: relative;
  overflow: visible;
}
.hero-scene {
  position: absolute;
  inset: 0 0 0 0;
  overflow: hidden;
  border-radius: 0 0 0 28px;
}
.scene-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  right: 40px;
  top: -25px;
  border-radius: 50%;
  background: rgba(196, 244, 204, .46);
  filter: blur(4px);
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  mix-blend-mode: multiply;
  filter: saturate(.98);
}
.metric-card {
  position: absolute;
  z-index: 4;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(227,235,232,.95);
  box-shadow: 0 12px 28px rgba(13, 45, 43, .14);
  border-radius: 13px;
  backdrop-filter: blur(8px);
  color: #12292d;
}
.metric-energy {
  left: 4%;
  top: 28%;
  width: 138px;
  padding: 13px 14px;
}
.metric-label {
  color: #5f7078;
  font-size: 9px;
  margin-bottom: 8px;
}
.metric-label i { color: #08a52e; margin-right: 4px; }
.metric-energy strong {
  display: block;
  font-size: 21px;
  letter-spacing: -.7px;
}
.metric-energy strong small {
  font-size: 10px;
  font-weight: 500;
  color: #738188;
}
.metric-energy span {
  display: block;
  margin-top: 7px;
  color: #149b34;
  font-size: 8px;
}
.metric-status {
  right: 4%;
  top: 13%;
  min-width: 150px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1bc54a;
  box-shadow: 0 0 0 4px #e4f9e8;
}
.metric-status strong,
.metric-status span {
  display: block;
}
.metric-status strong { font-size: 10px; }
.metric-status span {
  margin-top: 4px;
  color: #718087;
  font-size: 8px;
}
.metric-battery {
  right: 6%;
  bottom: 7%;
  min-width: 155px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.battery-copy span,
.battery-copy strong,
.battery-copy small { display: block; }
.battery-copy span { color: #65747b; font-size: 9px; }
.battery-copy strong { margin: 4px 0; font-size: 21px; }
.battery-copy small { color: #159b37; font-size: 8px; }
.battery-icon {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #10a62f;
  background: #eaf9ec;
  font-size: 19px;
}

.quick-section { margin-top: -1px; position: relative; z-index: 4; }
.quick-card, .workflow-card {
  background: #fff; border: 1px solid #e9eeee; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16, 37, 43, .08);
}
.quick-card {
  min-height: 116px; display: flex; align-items: center; padding: 18px 20px;
}
.quick-title { width: 160px; padding-right: 22px; }
.quick-title strong { display: block; font-size: 15px; }
.quick-title span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.45; color: #61717b; }
.quick-item {
  flex: 1; min-height: 75px; padding: 10px 17px;
  border-left: 1px solid #edf0ef; display: flex; align-items: center; gap: 13px;
}
.quick-item > i:first-child {
  width: 43px; height: 43px; border-radius: 12px; flex: 0 0 43px;
  display: grid; place-items: center; background: #edfff0; color: var(--green);
  font-size: 21px;
}
.quick-item b, .quick-item small { display: block; }
.quick-item b { font-size: 11px; margin-bottom: 5px; }
.quick-item small { font-size: 10px; color: #687985; }
.quick-item .arrow { margin-left: auto; color: #7b898f; font-size: 14px; }

.workflow-section { padding: 20px 0 15px; }
.workflow-card { min-height: 112px; display: flex; align-items: center; padding: 15px 20px; }
.workflow-label { width: 220px; flex: 0 0 220px; }
.workflow-label h5 { font-size: 15px; margin: 0 0 7px; }
.workflow-label p { font-size: 11px; line-height: 1.5; color: #657680; margin: 0; }
.workflow-steps { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.step { display: flex; align-items: center; gap: 9px; min-width: 125px; }
.step > span {
  width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #d9f2de;
  border-radius: 50%; display: grid; place-items: center;
  color: var(--green); font-size: 19px;
}
.step b, .step small { display: block; }
.step b { font-size: 10px; white-space: nowrap; }
.step small { font-size: 9px; color: #73828a; margin-top: 4px; }
.step-arrow { color: #9adfaa; font-size: 18px; }

.benefits-section { padding-bottom: 45px; }
.benefit {
  height: 102px; border: 1px solid #edf0ef; border-radius: 10px;
  box-shadow: 0 3px 12px rgba(15, 38, 43, .05);
  display: flex; align-items: center; gap: 13px; padding: 16px;
  background: #fff;
}
.benefit > i {
  width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%;
  display: grid; place-items: center; background: #e8fbea;
  color: var(--green); font-size: 19px;
}
.benefit b, .benefit small { display: block; }
.benefit b { font-size: 10px; margin-bottom: 7px; }
.benefit small { font-size: 9px; color: #718089; line-height: 1.45; }

.chat-window {
  position: fixed; z-index: 20; right: 17px; bottom: 67px;
  width: 235px; background: #fff; border-radius: 13px;
  box-shadow: 0 10px 35px rgba(0,0,0,.16); overflow: hidden;
}
.chat-head {
  background: #069728; color: white; padding: 10px 11px;
  display: flex; align-items: center; gap: 8px;
}
.chat-avatar { width: 29px; height: 29px; border-radius: 50%; background: #53c76c; display: grid; place-items: center; }
.chat-head b { display: block; font-size: 10px; }
.chat-head small { display: block; font-size: 8px; margin-top: 2px; }
.chat-head small span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9cffae; }
.chat-close { margin-left: auto; background: none; border: 0; color: white; font-size: 18px; }
.chat-body { padding: 13px 10px 7px; }
.chat-body p { font-size: 9px; color: #64737b; line-height: 1.5; }
.chat-body button {
  display: block; border: 0; background: #e7f8e9; color: #267337;
  border-radius: 14px; padding: 6px 9px; margin: 5px 0;
  font-size: 8px; cursor: pointer;
}
.chat-input { margin: 4px 9px 0; border: 1px solid #edf0ef; border-radius: 15px; height: 30px; padding: 7px 10px; color: #9aa5a9; font-size: 8px; }
.chat-input i { float: right; color: #7e8a8e; }
.powered { text-align: center; font-size: 7px; color: #8c9699; padding: 8px; }
.powered b { color: #1688b7; }
.chat-fab {
  position: fixed; z-index: 21; right: 24px; bottom: 17px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #0cbb31; color: #fff; font-size: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

footer { background: #004e41; color: white; min-height: 90px; padding: 17px 0; }
.footer-points { display: flex; gap: 0; }
.footer-points > div { flex: 1; display: flex; align-items: center; gap: 11px; padding: 0 23px; border-right: 1px solid rgba(255,255,255,.22); }
.footer-points > div:first-child { padding-left: 37px; }
.footer-points i { color: #6bdf39; font-size: 20px; }
.footer-points b, .footer-points small { display: block; }
.footer-points b { font-size: 9px; margin-bottom: 5px; }
.footer-points small { font-size: 8px; color: #b9d3ce; }
.urgent { display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-size: 10px; }
.urgent .btn { padding: 10px 17px; font-size: 9px; }

@media (max-width: 1199px) {
  .navbar-nav { gap: .5rem !important; }
  .top-btn { padding: 10px 13px; }
  .quick-item { padding: 8px; }
  .workflow-label { width: 170px; flex-basis: 170px; }
  .step { min-width: 105px; }
}
@media (max-width: 991px) {
  .nav-link { padding: 12px 0 !important; }
  .nav-link.active:after { display: none; }
  .hero { min-height: auto; }
  .hero-row { min-height: auto; }
  .hero-copy { padding: 50px 6% 25px; }
  .hero-visual { height: 300px; }
  .metric-energy { left: 2%; top: 18%; transform: scale(.88); transform-origin: left top; }
  .metric-status { right: 2%; top: 7%; transform: scale(.88); transform-origin: right top; }
  .metric-battery { right: 3%; bottom: 4%; transform: scale(.88); transform-origin: right bottom; }
  .quick-card, .workflow-card { flex-wrap: wrap; }
  .quick-title { width: 100%; padding: 5px 10px 14px; }
  .quick-item { flex: 1 1 33%; }
  .workflow-label { width: 100%; flex-basis: 100%; padding-bottom: 15px; }
  .workflow-steps { flex-wrap: wrap; justify-content: center; }
  .step-arrow { display: none; }
  .benefits-section .col { flex: 0 0 50%; }
  .footer-points { flex-wrap: wrap; }
  .footer-points > div { margin-bottom: 12px; }
}
@media (max-width: 575px) {
  .hero h1 { font-size: 40px; }
  .ai-search { height: 68px; }
  .search-field span { display: none; }
  .search-field input { font-size: 13px; }
  .quick-item { flex: 1 1 100%; border-top: 1px solid #edf0ef; border-left: 0; }
  .benefits-section .col { flex: 0 0 100%; }
  .workflow-steps { display: grid; grid-template-columns: 1fr 1fr; }
  .chat-window { right: 12px; width: 280px; }
  footer { padding-bottom: 80px; }
  .footer-points { display: block; }
  .footer-points > div, .footer-points > div:first-child { border: 0; padding: 7px 10px; }
  .urgent { justify-content: flex-start; padding: 12px 10px; }
}