:root {
  --ink:#10251f;
  --muted:#687b74;
  --green:#55dfaa;
  --green-dark:#07986b;
  --pale:#e0f7ec;
  --line:#dce7e1;
  --cream:#f7faf8;
  --navy:#172838;
  --dark:#081713;
  --blue:#7da5df;
  --max:1420px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
body {
  margin:0;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#fff;
  line-height:1.55;
}
button,input,select,textarea {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  cursor:pointer;
}
.site-header {
  height:84px;
  padding:0 clamp(22px,4.2vw,76px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f7faf8;
  border-bottom:1px solid #e4ebe7;
  position:sticky;
  top:0;
  z-index:50;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:26px;
  line-height:1.02;
  letter-spacing:-1px;
}
.brand-mark {
  width:47px;
  height:47px;
  border-radius:14px;
  background:#12332a;
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:500;
}
.brand-name small {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#708079;
  font-weight:600;
  margin-top:5px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.3vw,38px);
  font-size:14px;
  font-weight:650;
  color:#4c6159;
}
.nav-links a:hover,.footer-main a:hover {
  color:#07986b;
}
.btn {
  border:0;
  border-radius:5px;
  padding:15px 21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:14px;
  font-weight:750;
  transition:transform .2s,background .2s;
  white-space:nowrap;
}
.btn:hover {
  transform:translateY(-2px);
}
.btn-primary {
  background:var(--green);
  color:#0c2a21;
}
.btn-primary:hover {
  background:#75e9bd;
}
.btn-secondary {
  border:1px solid #43534e;
  color:#f4faf7;
  background:rgba(255,255,255,.025);
}
.btn-light {
  background:#f3faf6;
  color:#10251f;
}
.menu-toggle {
  display:none;
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:8px 11px;
}
.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 83% 40%,#103027 0,transparent 44%),var(--dark);
  color:#f3f8f5;
  padding:76px clamp(22px,4.2vw,76px) 0;
}
.hero-grid {
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
  gap:34px;
  align-items:center;
  min-height:590px;
}
.hero-copy {
  padding:18px 0 32px;
  position:relative;
  z-index:2;
}
.eyebrow {
  font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:1.5px;
  color:#71857c;
  display:flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
}
.eyebrow i {
  display:inline-block;
  width:25px;
  height:2px;
  background:#22c995;
}
.hero h1 {
  font-size:clamp(44px,4.4vw,68px);
  line-height:1.015;
  letter-spacing:-.065em;
  font-weight:650;
  margin:34px 0 23px;
}
.hero h1 em,.section h2 em,.platform-section h2 em,.ai-section h2 em,.deployment-section h2 em,.closing-cta h2 em {
  font-style:normal;
  color:var(--green);
}
.hero-copy>p {
  max-width:560px;
  color:#b3c1bb;
  font-size:18px;
  line-height:1.8;
  margin:0;
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}
.hero-trust {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid #20332c;
  color:#a6b8b0;
  font-size:12px;
}
.hero-trust span:first-letter {
  color:var(--green);
}
.hero-product {
  min-width:0;
  position:relative;
  align-self:center;
  padding:12px 0 28px;
}
.orbit {
  position:absolute;
  width:90%;
  aspect-ratio:1;
  border:1px solid rgba(45,207,151,.12);
  border-radius:50%;
  right:-13%;
  top:0;
  pointer-events:none;
}
.earp-device-stage {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-width:0;
  overflow:visible;
}
.earp-laptop {
  width:100%;
  max-width:700px;
  min-width:0;
  margin:auto;
  position:relative;
  z-index:1;
}
.laptop-screen {
  aspect-ratio:1.8/1;
  background:var(--navy);
  padding:9px 9px 0;
  border:1px solid #34495a;
  border-radius:18px 18px 5px 5px;
  box-shadow:0 30px 70px #0004;
  overflow:hidden;
}
.laptop-toolbar {
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px 7px;
  color:#b4c9c1;
}
.dots {
  display:flex;
  gap:6px;
}
.dots i {
  width:7px;
  height:7px;
  background:#78918a;
  border-radius:50%;
}
.urlbar {
  border:1px solid #415565;
  border-radius:5px;
  padding:5px 15px;
  font:10px ui-monospace,monospace;
  color:#d6e5df;
}
.toolbar-icons {
  font-size:14px;
}
.toolbar-icons span {
  font-size:9px;
  background:#d6f7e8;
  color:#0a7051;
  padding:7px;
  border-radius:50%;
  display:inline-block;
}
.laptop-app {
  height:calc(100% - 28px);
  min-height:0;
  background:#fff;
  color:#1b342b;
  display:grid;
  grid-template-columns:18% 82%;
  overflow:hidden;
  border-radius:3px 3px 0 0;
}
.laptop-sidebar {
  background:#eff5f1;
  border-right:1px solid #dce7e1;
  display:flex;
  flex-direction:column;
  padding:12px 8px 7px;
  min-width:0;
}
.app-brand {
  display:flex;
  align-items:center;
  gap:5px;
  margin:0 0 18px;
  white-space:nowrap;
}
.app-brand>span {
  background:#d6f7e8;
  color:#07986b;
  border-radius:6px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  font-size:19px;
}
.app-brand b {
  font-size:12px;
}
.app-brand small {
  font-size:6px;
  color:#70857b;
}
.laptop-sidebar label {
  font:8px ui-monospace,monospace;
  color:#82958d;
  letter-spacing:.7px;
  margin:3px 0 9px;
}
.app-nav {
  display:grid;
  gap:4px;
}
.app-nav button {
  border:0;
  background:transparent;
  border-radius:6px;
  text-align:left;
  padding:9px 7px;
  color:#5b7167;
  font-size:12px;
  white-space:nowrap;
}
.app-nav button span {
  margin-left:4px;
}
.app-nav button.active {
  background:#d8f7e9;
  color:#087d59;
  font-weight:750;
}
.sidebar-foot {
  margin-top:auto;
  font-size:7px;
  color:#84978f;
  white-space:nowrap;
}
.laptop-main {
  min-width:0;
  padding:14px 14px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.page-head small {
  font:8px ui-monospace,monospace;
  color:#82968d;
}
.page-head h2 {
  font-size:clamp(13px,1.25vw,19px);
  letter-spacing:-.04em;
  margin:8px 0 1px;
  line-height:1.2;
}
.page-head p {
  font-size:9px;
  color:#81928b;
  margin:0;
}
.preview-tag {
  font-size:8px;
  color:#688278;
  border:1px solid #dce8e1;
  border-radius:6px;
  padding:6px 8px;
  white-space:nowrap;
}
.sector-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sector-row>small {
  font:8px ui-monospace,monospace;
  color:#82968d;
}
.sector-tabs {
  display:flex;
  gap:3px;
  background:#f1f6f3;
  padding:3px;
  border:1px solid #e0e9e4;
  border-radius:7px;
}
.sector-tabs button {
  border:0;
  background:transparent;
  color:#6b7e75;
  border-radius:5px;
  padding:6px 7px;
  font-size:9px;
  white-space:nowrap;
}
.sector-tabs button.active {
  background:#d8f7e9;
  color:#087e59;
  font-weight:750;
}
.metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.metric {
  border:1px solid #dce7e1;
  border-radius:8px;
  padding:10px;
  min-width:0;
}
.metric small {
  font:7px ui-monospace,monospace;
  color:#7c9187;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.metric b {
  font-size:clamp(15px,1.55vw,25px);
  display:block;
  letter-spacing:-.05em;
  margin:5px 0 0;
  line-height:1.15;
}
.metric span {
  display:block;
  font-size:8px;
  color:#0b9b6b;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-lower {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(130px,.85fr);
  gap:8px;
  min-height:0;
  flex:1;
}
.chart-card,.queue-card {
  border:1px solid #dce7e1;
  border-radius:8px;
  padding:10px;
  min-width:0;
  overflow:hidden;
}
.card-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.card-heading b {
  display:block;
  font-size:10px;
}
.card-heading small {
  display:block;
  font-size:7px;
  color:#8b9c94;
  margin-top:3px;
}
.card-heading>span {
  font-size:7px;
  color:#84968e;
  white-space:nowrap;
}
.chart-legend {
  display:flex;
  gap:10px;
  font-size:7px;
  color:#81948b;
  margin-top:12px;
}
.chart-legend i {
  display:inline-block;
  width:12px;
  height:2px;
  vertical-align:middle;
  margin-right:4px;
}
.green-line {
  background:#17ad78;
}
.blue-line {
  background:#7da5df;
}
.chart {
  width:100%;
  height:clamp(50px,7.2vw,100px);
  display:block;
  margin-top:3px;
}
.chart-grid path {
  stroke:#e7eee9;
  stroke-dasharray:3 5;
  fill:none;
}
.chart polyline {
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart #chart-line-1 {
  stroke:#17ad78;
}
.chart #chart-line-2 {
  stroke:#7da5df;
  stroke-width:2.5;
}
.days {
  display:flex;
  justify-content:space-between;
  color:#8b9b94;
  font-size:6px;
  margin-top:2px;
}
.queue-count {
  background:#e0f7ec;
  color:#318a6a;
  border-radius:4px;
  padding:5px;
}
.queue-item {
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 0;
  border-bottom:1px solid #edf1ee;
  min-width:0;
}
.queue-item:last-child {
  border-bottom:0;
}
.queue-icon {
  flex:0 0 25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#def8eb;
  color:#0c9b6c;
}
.queue-icon.blue {
  background:#e7efff;
  color:#6d98df;
}
.queue-icon.amber {
  background:#fff0df;
  color:#d78c32;
}
.queue-item>div {
  min-width:0;
  flex:1;
}
.queue-item b {
  display:block;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-item small {
  font-size:7px;
  color:#8b9a93;
}
.queue-item>span:last-child {
  color:#9baaa3;
}
.app-foot {
  display:flex;
  justify-content:space-between;
  color:#81948b;
  font-size:7px;
}
.laptop-base {
  height:8px;
  width:106%;
  margin-left:-3%;
  background:linear-gradient(#dbe2e5,#7f8d95 55%,#d3dade);
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
  border-radius:0 0 12px 12px;
  position:relative;
}
.laptop-base span {
  display:block;
  width:20%;
  height:3px;
  background:#8a979c;
  margin:auto;
  border-radius:0 0 5px 5px;
}
.hero-bottom {
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding:25px 0 23px;
  color:#72877d;
  font:9px ui-monospace,monospace;
  letter-spacing:1px;
  border-top:1px solid #1e332a;
}
.hero-bottom i {
  width:4px;
  height:4px;
  background:#2bcf98;
  border-radius:50%;
}
.intro-strip {
  background:#f4f8f5;
  padding:25px clamp(22px,4.2vw,76px);
}
.intro-wrap {
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:24px;
}
.intro-wrap .eyebrow {
  font-size:9px;
}
.intro-wrap p {
  margin:0;
  font-size:16px;
  color:#53665e;
}
.intro-wrap a {
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  color:#087d59;
}
.section {
  padding:60px clamp(22px,4.2vw,76px);
  max-width:1600px;
  margin:auto;
}
.section-top {
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:50px;
  align-items:end;
  margin-bottom:36px;
}
.section h2,.platform-section h2,.ai-section h2,.deployment-section h2,.closing-cta h2 {
  font-size:clamp(36px,4vw,56px);
  line-height:1.08;
  letter-spacing:-.06em;
  margin:20px 0 0;
  font-weight:650;
}
.section-top>p {
  color:#718179;
  max-width:480px;
  margin:0 0 4px;
  font-size:15px;
}
.vertical-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.vertical-card {
  position:relative;
  overflow:hidden;
  border:1px solid #e0e9e4;
  border-radius:12px;
  padding:22px;
  min-height:365px;
  background:linear-gradient(145deg,#fbfdfc,#f2f8f4);
}
.vertical-card:after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border:1px solid #dcebe3;
  border-radius:50%;
  right:-90px;
  bottom:-90px;
}
.vertical-card.gas {
  background:linear-gradient(145deg,#fbfcff,#f1f5fb);
}
.vertical-card.power {
  background:linear-gradient(145deg,#fbfdfc,#eef8f2);
}
.vertical-card.renew {
  background:linear-gradient(145deg,#fcfdf9,#f5f8e9);
}
.card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:12px ui-monospace,monospace;
  color:#82958b;
}
.card-meta span {
  font-size:23px;
  color:#12966d;
}
.vertical-card > small {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.5;
  color: #087d59;
  margin-top: 27px;
  margin-bottom: 8px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.vertical-card h3 {
  font-size:22px;
  line-height:1.17;
  letter-spacing:-.04em;
  margin:12px 0;
}
.vertical-card p {
  font-size:12px;
  color:#6d7e75;
  line-height:1.7;
}
.vertical-card ul,.deployment-cards ul {
  padding:0;
  list-style:none;
  margin:18px 0;
}
.vertical-card li,.deployment-cards li {
  font-size:11px;
  color:#52675e;
  margin:9px 0;
}
.vertical-card li::first-letter,.deployment-cards li::first-letter {
  color:#07986b;
}
.vertical-card>a {
  display:inline-block;
  margin-top:10px;
  color:#07865e;
  font-size:11px;
  font-weight:750;
  position:relative;
  z-index:1;
}
.platform-section {
  max-width:none;
  background:#0c1c17;
  color:#f1f7f3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding-top:100px;
  padding-bottom:100px;
}
.platform-copy {
  max-width:550px;
  justify-self:end;
}
.platform-section h2 em,.ai-section h2 em,.closing-cta h2 em {
  color:var(--green);
}
.platform-copy>p,.ai-wrap>div:first-child>p {
  color:#afc0b7;
  line-height:1.8;
  font-size:15px;
}
.benefit {
  padding:15px 0;
  border-bottom:1px solid #263b32;
}
.benefit b,.benefit small {
  display:block;
}
.benefit b {
  font-size:13px;
}
.benefit small {
  color:#91a79c;
  font-size:11px;
  margin:5px 0 0;
}
.platform-copy .btn {
  margin-top:25px;
}
.platform-visual {
  max-width:560px;
  width:100%;
  justify-self:start;
  border:1px solid #30483d;
  border-radius:12px;
  padding:20px;
  background:#10241d;
}
.visual-label {
  display:flex;
  justify-content:space-between;
  font:9px ui-monospace,monospace;
  color:#89a398;
  letter-spacing:.8px;
}
.core-diagram {
  height:360px;
  position:relative;
  display:grid;
  place-items:center;
}
.core-ring {
  position:absolute;
  width:250px;
  height:250px;
  border:1px solid #2b6851;
  border-radius:50%;
  box-shadow:0 0 0 35px #19372b,0 0 0 36px #254637;
}
.core-center {
  width:110px;
  height:110px;
  border-radius:50%;
  background:#d8f8e9;
  color:#0b6046;
  display:grid;
  place-content:center;
  text-align:center;
  z-index:2;
}
.core-center b {
  font-size:19px;
  line-height:1.2;
}
.core-center small {
  font:8px ui-monospace,monospace;
  margin-top:5px;
}
.node {
  position:absolute;
  width:70px;
  height:70px;
  border-radius:12px;
  background:#1a3b2d;
  border:1px solid #37634e;
  color:#64e4b1;
  display:grid;
  place-content:center;
  text-align:center;
  font-size:23px;
}
.node small {
  font-size:8px;
  color:#d4e7dd;
}
.n1 {
  top:40px;
  left:calc(50% - 35px);
}
.n2 {
  right:calc(50% - 160px);
  top:135px;
}
.n3 {
  bottom:40px;
  left:calc(50% - 35px);
}
.n4 {
  left:calc(50% - 160px);
  top:135px;
}
.visual-legend {
  font-size:9px;
  color:#9ab0a5;
}
.workflow-layout,.architecture-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:18px;
}
.workflow-tabs,.architecture-list {
  display:grid;
  gap:8px;
  align-content:start;
}
.workflow-tabs button,.architecture-list button {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:17px;
  border:1px solid #e0e9e4;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
}
.workflow-tabs button.selected,.architecture-list button.active {
  border-color:#94e5c2;
  background:#f1fbf6;
}
.workflow-tabs button>span,.architecture-list button>span:first-child {
  font:11px ui-monospace,monospace;
  color:#07986b;
}
.workflow-tabs button div,.architecture-list button div {
  flex:1;
}
.workflow-tabs small,.workflow-tabs b,.architecture-list b,.architecture-list small {
  display:block;
}
.workflow-tabs small,.architecture-list small {
  font:8px ui-monospace,monospace;
  color:#82958b;
  margin-bottom:5px;
}
.workflow-tabs b,.architecture-list b {
  font-size:13px;
}
.workflow-tabs button>svg {
  margin-left:auto;
}
.workflow-detail,.architecture-explainer {
  border-radius:12px;
  background:#f4f8f5;
  border:1px solid #e1eae4;
  padding:30px;
}
.workflow-detail h3,.architecture-explainer h3 {
  font-size:28px;
  letter-spacing:-.04em;
  margin:18px 0 8px;
}
.workflow-detail>p,.architecture-explainer>p {
  font-size:14px;
  color:#6c7e75;
  line-height:1.8;
}
.workflow-steps {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:28px 0;
}
.workflow-steps span {
  padding:13px;
  border:1px solid #dce8e1;
  background:white;
  border-radius:7px;
  font-size:11px;
}
.workflow-steps b {
  color:#0a9a6a;
}
.note {
  display:block;
  border-top:1px solid #dce8e1;
  padding-top:18px;
  color:#74877d;
  font-size:10px;
}
.ai-section {
  background:#0c1c17;
  color:white;
  padding:95px clamp(22px,4.2vw,76px);
}
.ai-wrap {
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:center;
}
.ai-wrap>div:first-child>small {
  display:block;
  font-size:10px;
  color:#80978b;
  margin-top:20px;
  max-width:440px;
}
.ai-list article {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:15px;
  padding:23px 0;
  border-bottom:1px solid #294036;
}
.ai-list article>span {
  font:11px ui-monospace,monospace;
  color:var(--green);
}
.ai-list h3 {
  font-size:17px;
  margin:0 0 5px;
}
.ai-list p {
  font-size:12px;
  color:#a2b6aa;
  margin:0;
}
.architecture-list button {
  padding:14px;
}
.architecture-list button>div {
  flex:1;
}
.architecture-explainer {
  background:#f7faf8;
  min-height:330px;
}
.layer-symbol {
  margin-top:35px;
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#d7f8e8;
  color:#0b9165;
  font-size:30px;
}
.architecture-explainer h3 {
  margin:16px 0 0;
}
.pills {
  display:flex;
  gap:8px;
  margin-top:22px;
  flex-wrap:wrap;
}
.pills span {
  font-size:10px;
  color:#087e59;
  background:#e2f7ec;
  border-radius:20px;
  padding:7px 10px;
}
.deployment-section {
  padding:90px clamp(22px,4.2vw,76px);
  background:#f4f8f5;
}
.deployment-wrap {
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.deployment-wrap>div:first-child>p {
  font-size:14px;
  line-height:1.8;
  color:#6d7e75;
}
.deployment-toggle {
  display:inline-flex;
  padding:4px;
  background:#e5ede8;
  border-radius:7px;
  margin:15px 0;
}
.deployment-toggle button {
  border:0;
  border-radius:5px;
  padding:9px 14px;
  background:transparent;
  color:#5f7469;
  font-size:12px;
}
.deployment-toggle button.active {
  background:#fff;
  color:#087d59;
  box-shadow:0 1px 5px #1c3b2c15;
}
.deployment-selected {
  padding:17px;
  background:white;
  border:1px solid #dce7e1;
  border-radius:8px;
  margin:0 0 20px;
}
.deployment-selected b {
  font-size:13px;
}
.deployment-selected p {
  font-size:11px;
  color:#6c7e75;
  margin-bottom:0;
}
.deployment-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}
.deployment-cards article {
  padding:22px;
  border:1px solid #dce7e1;
  border-radius:10px;
  background:white;
}
.deployment-cards article>span {
  font:9px ui-monospace,monospace;
  color:#81958b;
}
.deployment-cards h3 {
  font-size:24px;
  margin:13px 0 5px;
}
.deployment-cards p {
  font-size:11px;
  color:#6d7e75;
  line-height:1.7;
}
.closing-cta {
  background:#0b1b16;
  color:white;
  padding:70px clamp(22px,4.2vw,76px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.closing-cta>div {
  max-width:700px;
}
.closing-cta h2 {
  font-size:clamp(36px,4vw,52px);
}
.closing-cta p {
  color:#adbbb5;
  max-width:570px;
}
.closing-cta>div:last-child small {
  display:block;
  color:#8ea399;
  font-size:10px;
  margin-top:12px;
}
.site-footer {
  background:#07130f;
  color:#dce8e1;
  padding:55px clamp(22px,4.2vw,76px) 18px;
}
.footer-main {
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:1.5fr .7fr .9fr 1fr;
  gap:45px;
  padding-bottom:40px;
}
.brand-footer {
  color:#f5faf7;
}
.footer-main p {
  font-size:12px;
  line-height:1.8;
  color:#91a59a;
  max-width:290px;
}
.footer-main>div>small {
  font-size:10px;
  color:#91a59a;
}
.footer-main>div:not(:first-child) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  font-size:12px;
}
.footer-main>div>b {
  margin-bottom:7px;
}
.footer-main a:not(.brand) {
  color:#a4b6ac;
}
.text-button {
  padding:0;
  border:0;
  background:none;
  color:var(--green);
  font-size:12px;
}
.footer-bottom {
  max-width:var(--max);
  margin:auto;
  border-top:1px solid #26382f;
  padding-top:18px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  color:#7f9488;
  font-size:10px;
}
.footer-bottom a {
  color:#b9c9c0;
}
.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  background:#07130fbd;
  display:grid;
  place-items:center;
  padding:20px;
  overflow:auto;
}
.modal-backdrop[hidden] {
  display:none;
}
.demo-modal {
  width:min(690px,100%);
  background:#fff;
  border-radius:14px;
  padding:32px;
  position:relative;
  color:var(--ink);
  margin:auto;
}

/* Smooth demo form opening */
@keyframes demoModalOpen {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#demo-modal:not([hidden]) .demo-modal {
  animation: demoModalOpen 0.65s ease-out;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #demo-modal:not([hidden]) .demo-modal {
    animation: none;
  }
}

.modal-close {
  position:absolute;
  right:18px;
  top:15px;
  border:0;
  background:#eef5f0;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:24px;
  color:#4e665a;
}
.demo-modal h2 {
  font-size:34px;
  letter-spacing:-.05em;
  margin:13px 0 5px;
}
.demo-modal>div>p {
  font-size:13px;
  color:#6d7e75;
}
.demo-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin-top:22px;
}
.demo-form label {
  display:grid;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:#4c6158;
}
.demo-form input,.demo-form select,.demo-form textarea {
  width:100%;
  border:1px solid #d7e3dc;
  border-radius:6px;
  padding:11px;
  font-size:12px;
  background:#fbfdfc;
  color:#183229;
}
.full-field {
  grid-column:1/-1;
}
.form-disclaimer {
  font-size:10px;
  color:#819187;
}
.success-icon {
  width:50px;
  height:50px;
  background:#d8f8e9;
  color:#07845d;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:27px;
}

@media(min-width:1201px) {
  .hero-grid {
    grid-template-columns:.86fr 1.14fr;
    gap:30px;
  }
  .hero h1 {
    font-size:clamp(42px,3.8vw,62px);
  }
  .hero-product {
    align-self:center;
    margin:0;
    padding:0;
  }
  .earp-laptop {
    width:100%;
    max-width:680px;
    transform:scale(.86);
    transform-origin:center center;
  }
  .earp-device-stage {
    min-height:0;
    align-items:center;
    justify-content:center;
  }
  .laptop-screen {
    aspect-ratio:1.8/1;
  }
  .hero-copy {
    padding:0;
  }
  .hero-grid {
    min-height:570px;
  }
}
@media(max-width:1200px) {
  .hero-grid {
    grid-template-columns:.9fr 1.1fr;
    gap:20px;
    min-height:550px;
  }
  .hero h1 {
    font-size:clamp(40px,4.7vw,58px);
  }
  .vertical-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .platform-section {
    gap:35px;
  }
  .intro-wrap {
    grid-template-columns:1fr 2fr;
  }
  .intro-wrap>a {
    grid-column:2;
  }
  .footer-main {
    grid-template-columns:1.3fr 1fr 1fr;
  }
  .footer-contact {
    grid-column:1/-1;
  }
}
@media(max-width:800px) {
  .site-header {
    height:72px;
  }
  .brand {
    font-size:23px;
  }
  .brand-mark {
    width:40px;
    height:40px;
  }
  .menu-toggle {
    display:block;
  }
  .nav-links {
    display:none;
    position:absolute;
    top:71px;
    left:0;
    right:0;
    background:#f7faf8;
    padding:18px 22px 24px;
    box-shadow:0 15px 20px #07130f12;
    align-items:stretch;
    flex-direction:column;
    gap:16px;
  }
  .nav-links.open {
    display:flex;
  }
  .nav-links .btn {
    width:100%;
  }
  .hero {
    padding-top:35px;
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    min-height:0;
  }
  .hero-copy {
    padding:12px 0 0;
  }
  .hero h1 {
    font-size:clamp(42px,9vw,62px);
    margin:24px 0 17px;
  }
  .hero-copy>p {
    font-size:15px;
    line-height:1.7;
  }
  .hero-trust {
    gap:10px;
    margin-top:25px;
    padding-top:18px;
  }
  .hero-trust span {
    font-size:10px;
  }
  .hero-product {
    padding:0 0 10px;
  }
  .earp-laptop {
    width:100%;
    transform:none;
    max-width:none;
  }
  .laptop-screen {
    border-radius:10px 10px 3px 3px;
    padding:5px 5px 0;
  }
  .laptop-toolbar {
    height:19px;
    padding-bottom:4px;
  }
  .dots {
    gap:3px;
  }
  .dots i {
    width:4px;
    height:4px;
  }
  .urlbar {
    font-size:6px;
    padding:3px 5px;
  }
  .toolbar-icons {
    font-size:8px;
  }
  .toolbar-icons span {
    font-size:6px;
    padding:4px;
  }
  .laptop-app {
    height:calc(100% - 19px);
    grid-template-columns:17% 83%;
  }
  .laptop-sidebar {
    padding:5px 3px;
  }
  .app-brand {
    gap:2px;
    margin-bottom:8px;
  }
  .app-brand>span {
    width:15px;
    height:15px;
    font-size:11px;
  }
  .app-brand b {
    font-size:6px;
  }
  .app-brand small,.laptop-sidebar label,.sidebar-foot {
    font-size:4px;
  }
  .app-nav {
    gap:2px;
  }
  .app-nav button {
    font-size:6px;
    padding:5px 2px;
  }
  .app-nav button span {
    margin-left:1px;
  }
  .laptop-main {
    padding:6px 5px 4px;
    gap:5px;
  }
  .page-head small {
    font-size:5px;
  }
  .page-head h2 {
    font-size:clamp(8px,2.5vw,13px);
    margin:4px 0 1px;
  }
  .page-head p {
    font-size:5px;
  }
  .preview-tag {
    font-size:5px;
    padding:3px;
  }
  .sector-row>small {
    font-size:5px;
  }
  .sector-tabs {
    gap:1px;
    padding:2px;
  }
  .sector-tabs button {
    font-size:5px;
    padding:4px 3px;
  }
  .metrics {
    gap:3px;
  }
  .metric {
    padding:5px;
    border-radius:4px;
  }
  .metric small {
    font-size:4px;
  }
  .metric b {
    font-size:clamp(8px,2.5vw,15px);
    margin-top:3px;
  }
  .metric span {
    font-size:4px;
    margin-top:2px;
  }
  .dashboard-lower {
    grid-template-columns:1.2fr .8fr;
    gap:3px;
  }
  .chart-card,.queue-card {
    padding:5px;
    border-radius:4px;
  }
  .card-heading b {
    font-size:6px;
  }
  .card-heading small,.card-heading>span {
    font-size:4px;
  }
  .chart-legend {
    font-size:4px;
    gap:4px;
    margin-top:6px;
  }
  .chart-legend i {
    width:6px;
  }
  .chart {
    height:clamp(28px,8vw,55px);
  }
  .days {
    font-size:3px;
  }
  .queue-count {
    padding:2px;
  }
  .queue-item {
    gap:3px;
    padding:4px 0;
  }
  .queue-icon {
    flex-basis:13px;
    height:13px;
    font-size:7px;
  }
  .queue-item b {
    font-size:4px;
  }
  .queue-item small {
    font-size:3px;
  }
  .app-foot {
    font-size:4px;
  }
  .laptop-base {
    height:5px;
  }
  .hero-bottom {
    flex-wrap:wrap;
    gap:8px;
    font-size:7px;
  }
  .intro-wrap {
    display:block;
  }
  .intro-wrap p {
    font-size:14px;
    margin:12px 0;
  }
  .intro-wrap a {
    font-size:11px;
  }
  .section {
    padding-top:65px;
    padding-bottom:65px;
  }
  .section-top {
    display:block;
    margin-bottom:25px;
  }
  .section-top>p {
    margin-top:20px;
    font-size:13px;
  }
  .section h2,.platform-section h2,.ai-section h2,.deployment-section h2 {
    font-size:clamp(34px,8vw,48px);
  }
  .vertical-grid {
    grid-template-columns:1fr;
  }
  .vertical-card {
    min-height:0;
    padding:22px;
  }
  .platform-section {
    display:block;
  }
  .platform-copy {
    margin-bottom:45px;
  }
  .platform-visual {
    padding:15px;
  }
  .core-diagram {
    height:280px;
  }
  .core-ring {
    width:180px;
    height:180px;
    box-shadow:0 0 0 22px #19372b,0 0 0 23px #254637;
  }
  .core-center {
    width:85px;
    height:85px;
  }
  .node {
    width:54px;
    height:54px;
    font-size:18px;
  }
  .n1 {
    top:30px;
    left:calc(50% - 27px);
  }
  .n2 {
    right:calc(50% - 115px);
    top:110px;
  }
  .n3 {
    bottom:30px;
    left:calc(50% - 27px);
  }
  .n4 {
    left:calc(50% - 115px);
    top:110px;
  }
  .visual-legend {
    font-size:7px;
  }
  .workflow-layout,.architecture-layout {
    grid-template-columns:1fr;
  }
  .workflow-tabs button {
    padding:13px;
  }
  .workflow-detail,.architecture-explainer {
    padding:22px;
  }
  .workflow-steps {
    gap:6px;
  }
  .workflow-steps span {
    font-size:9px;
    padding:8px;
  }
  .ai-section {
    padding-top:65px;
    padding-bottom:65px;
  }
  .ai-wrap {
    display:block;
  }
  .ai-list {
    margin-top:35px;
  }
  .ai-list article {
    padding:17px 0;
  }
  .deployment-wrap {
    display:block;
  }
  .deployment-cards {
    margin-top:35px;
    grid-template-columns:1fr;
  }
  .closing-cta {
    display:block;
    padding-top:60px;
    padding-bottom:60px;
  }
  .closing-cta>div:last-child {
    margin-top:25px;
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .footer-brand,.footer-contact {
    grid-column:1/-1;
  }
  .footer-bottom {
    flex-wrap:wrap;
  }
  .demo-modal {
    padding:25px 19px;
  }
  .demo-modal h2 {
    font-size:28px;
  }
  .demo-form {
    grid-template-columns:1fr;
  }
  .full-field {
    grid-column:auto;
  }
}
@media(max-width:390px) {
  .hero-actions {
    align-items:stretch;
    flex-direction:column;
  }
  .hero-actions .btn {
    width:100%;
  }
  .hero-trust {
    display:grid;
  }
  .sector-tabs button {
    padding:3px 2px;
  }
  .sector-tabs button {
    font-size:4px;
  }
  .app-nav button {
    font-size:5px;
  }
  .vertical-card h3 {
    font-size:21px;
  }
}


/* =========================================================
   EARP HERO REFINEMENTS
   Laptop size, dashboard visibility, and full-width label row
   ========================================================= */

/* Desktop and larger laptops */
@media (min-width: 1201px) {
  .hero-grid {
    grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
    gap: 34px;
    min-height: 620px;
    align-items: center;
  }

  .hero-copy {
    padding: 0;
  }

  .hero-product {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-self: center;
  }

  .earp-device-stage {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  /* Keep the laptop narrower without shrinking its dashboard content. */
  .earp-laptop {
    width: 88%;
    max-width: 780px;
    min-width: 0;
    margin: 0 auto;
    transform: none;
  }

  /* A slightly taller screen keeps the lower dashboard panels visible. */
  .laptop-screen {
    width: 100%;
    aspect-ratio: 1.68 / 1;
    overflow: hidden;
    padding: 7px 7px 0;
    border-radius: 15px 15px 4px 4px;
  }

  .laptop-toolbar {
    height: 25px;
    padding-bottom: 5px;
  }

  .laptop-app {
    height: calc(100% - 25px);
    min-height: 0;
    overflow: hidden;
  }

  .laptop-main {
    min-height: 0;
    padding: 10px 11px 6px;
    gap: 7px;
    overflow: hidden;
  }

  .page-head h2 {
    margin-top: 5px;
  }

  .metric {
    padding: 8px;
  }

  .metric b {
    margin-top: 3px;
  }

  .dashboard-lower {
    min-height: 0;
    flex: 1;
    gap: 7px;
  }

  .chart-card,
  .queue-card {
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }

  .chart {
    height: clamp(54px, 5.2vw, 82px);
    margin-top: 2px;
  }

  .chart-legend {
    margin-top: 7px;
  }

  .queue-item {
    padding: 5px 0;
  }

  .queue-icon {
    flex-basis: 22px;
    height: 22px;
  }

  /* Centre the four platform labels across the full hero width. */
  .hero-bottom {
    width: calc(100% + clamp(44px, 8.4vw, 152px));
    max-width: none;
    margin-left: calc(0px - clamp(22px, 4.2vw, 76px));
    padding: 25px clamp(22px, 4.2vw, 76px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    text-align: center;
  }

  .hero-bottom span {
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.4;
  }

  .hero-bottom i {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin: 0;
  }
}

/* Medium screens: preserve readable dashboard proportions. */
@media (min-width: 801px) and (max-width: 1200px) {
  .earp-laptop {
    width: 100%;
    max-width: 680px;
    transform: none;
  }

  .laptop-screen {
    aspect-ratio: 1.68 / 1;
  }

  .hero-bottom {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* Mobile: allow the labels to wrap instead of squeezing together. */
@media (max-width: 800px) {
  .hero-bottom {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 20px 0;
  }

  .hero-bottom span {
    white-space: normal;
    font-size: 9px;
  }
}

/* FINAL FIX: full-viewport divider with the platform labels centred beneath the hero */
.hero > .hero-bottom {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 42px 0 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  padding: 25px 24px 28px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 34px) !important;
  border-top: 1px solid rgba(255,255,255,.13) !important;
  text-align: center !important;
}
.hero > .hero-bottom span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}
.hero > .hero-bottom i {
  display: inline-block !important;
  flex: 0 0 5px !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
}
@media (max-width: 800px) {
  .hero > .hero-bottom {
    width: 100vw !important;
    margin-top: 26px !important;
    padding: 20px 18px 24px !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }
  .hero > .hero-bottom span {
    white-space: normal !important;
    font-size: 9px !important;
  }
}



/* EARP HERO: FULL-WIDTH CENTRED PLATFORM STRIP */

.hero-bottom {
  position: relative !important;
  width: 150vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 28px 24px !important;
  border-top: 1px solid rgba(180, 220, 205, 0.16) !important;
  background: transparent !important;
}

.hero-bottom > * {
  max-width: 100% !important;
}

.hero-bottom {
  text-align: center !important;
}

@media (max-width: 768px) {
  .hero-bottom {
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
    padding: 24px 16px !important;
  }
}


/* EARP HERO: PLATFORM STRIP */

.hero-bottom {
  position: relative !important;
  width: 150vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* Tablet and mobile */
@media (max-width: 1200px) {
  .hero-bottom {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
    padding: 24px 16px !important;
  }
}

/* Small mobile screens */
@media (max-width: 600px) {
  .hero-bottom {
    width: 100% !important;
    padding: 20px 12px !important;
    overflow-wrap: anywhere;
  }

  .hero-bottom > * {
    max-width: 100% !important;
  }
}


/* EARP energy cards: industry imagery */
.vertical-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vertical-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65%;
  height: 58%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* Oil */
.vertical-card:nth-child(1)::after {
  background-image: url("../img/earp-oil.png");
}

/* Gas */
.vertical-card:nth-child(2)::after {
  background-image: url("../img/earp-gas.png");
}

/* Power */
.vertical-card:nth-child(3)::after {
  background-image: url("../img/earp-power.png");
}

/* Renewables */
.vertical-card:nth-child(4)::after {
  background-image: url("../img/earp-renewables.png");
}
/* Keep card text readable */
.vertical-card > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .vertical-card::after {
    width: 58%;
    height: 42%;
    opacity: 0.17;
  }
}


/* Subtle lift when hovering over an energy card */
.vertical-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (min-width: 769px) {
  .vertical-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(13, 45, 35, 0.10);
  }
}



/* EARP connected capability hub */
.earp-hub .hub-layout {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 460px;
  margin: 12px auto 20px;
}

.hub-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hub-orbit {
  fill: none;
  stroke: #245440;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.hub-orbit-outer {
  stroke: #1b4030;
  stroke-dasharray: none;
  opacity: .8;
}

.hub-lines {
  fill: none;
  stroke: #3ac99a;
  stroke-width: 1.5;
  opacity: .8;
}

.hub-dots {
  fill: #69e8bb;
}

.hub-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126px;
  height: 126px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d8f8eb;
  color: #075b45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hub-symbol {
  font-size: 25px;
  line-height: 1.1;
}

.hub-center strong {
  font-size: 25px;
  line-height: 1.2;
}

.hub-center small {
  font: 8px ui-monospace, monospace;
  margin-top: 6px;
}

.hub-card {
  position: absolute;
  z-index: 3;
  width: 112px;
  min-height: 88px;
  padding: 12px 8px;
  box-sizing: border-box;
  border: 1px solid #315e49;
  border-radius: 15px;
  background: #153729;
  color: #e1f3e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease,
              background .2s ease;
}

.hub-card:hover {
  transform: translateY(-4px);
  border-color: #59ddb0;
  background: #1b4533;
}

.hub-card strong {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.hub-icon {
  color: #55e5b2;
  font-size: 24px;
  line-height: 1;
}

/* Eight panel positions */
.hub-finance {
  top: 0;
  left: calc(50% - 56px);
}

.hub-procurement {
  top: 48px;
  right: 2%;
}

.hub-hr {
  top: calc(50% - 44px);
  right: 0;
}

.hub-projects {
  bottom: 48px;
  right: 2%;
}

.hub-contracts {
  bottom: 0;
  left: calc(50% - 56px);
}

.hub-assets {
  bottom: 48px;
  left: 2%;
}

.hub-customers {
  top: calc(50% - 44px);
  left: 0;
}

.hub-hse {
  top: 48px;
  left: 2%;
}

.earp-hub .visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .earp-hub .hub-layout {
    height: 430px;
    margin-top: 18px;
  }

  .hub-card {
    width: 94px;
    min-height: 82px;
    padding: 9px 5px;
  }

  .hub-card strong {
    font-size: 10px;
  }

  .hub-finance,
  .hub-contracts {
    left: calc(50% - 47px);
  }

  .hub-procurement,
  .hub-projects {
    right: 0;
  }

  .hub-assets,
  .hub-hse {
    left: 0;
  }

  .hub-center {
    width: 108px;
    height: 108px;
  }

  .hub-center strong {
    font-size: 22px;
  }

  .hub-orbit-outer {
    opacity: .45;
  }
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  width: 140px;
  height: auto;
  max-height: 55px;
  object-fit: contain;
}




/* =====================================================
   EARP ENERGY: HERO ANIMATIONS
   Page-load entrance + gentle vertical laptop floating
   ===================================================== */

/* 1. Hero text enters smoothly when the page loads */
.hero-copy {
  animation: earpTextEntrance 0.9s ease-out both;
}

/* 2. Laptop/dashboard enters slightly after the text */
.earp-device-stage {
  animation: earpLaptopEntrance 1.1s ease-out 0.15s both;
}

/* 3. Laptop gently floats up and down */
.earp-laptop {
  transform-origin: 50% 50%;
  animation: earpLaptopFloat 5s ease-in-out 1.2s infinite;
  will-change: transform;
}

/* 4. Text entrance */
@keyframes earpTextEntrance {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Laptop entrance */
@keyframes earpLaptopEntrance {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 6. Smooth vertical floating only: no sideways movement */
@keyframes earpLaptopFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* 7. Accessibility: respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .earp-device-stage,
  .earp-laptop {
    animation: none !important;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}


```css
/* =====================================================
   EARP HERO: FLOATING STATUS CARDS
   ===================================================== */

.hero-product {
  position: relative;
  isolation: isolate;
}

/* Shared card styling */
.hero-float-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.97);
  color: #203c33;
  border: 1px solid #d9e8e0;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  font-family: inherit;
}

/* Upper-left: asset status */
.hero-float-status {
  top: 10%;
  left: -7%;
  width: 280px;
  min-height: 76px;
  animation: earpStatusFloat 5s ease-in-out 1.5s infinite;
}

/* Green status dot */
.float-status-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  background: #20b982;
  border-radius: 50%;
}

/* Card text */
.float-card-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.float-card-label {
  color: #7c9388;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.float-card-text strong {
  color: #203c33;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Green check badge */
.float-status-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  margin-left: auto;
  flex: 0 0 31px;
  color: #0ba875;
  background: #e1f7ed;
  border-radius: 50%;
  font-size: 19px;
}

/* Lower-right: intelligence card */
.hero-float-insight {
  right: -7%;
  bottom: 17%;
  width: 280px;
  min-height: 90px;
  animation: earpInsightFloat 5.5s ease-in-out 1.8s infinite;
}

/* Insight icon */
.float-insight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: #059b78;
  background: #e1f7ed;
  border-radius: 14px;
  font-size: 23px;
}

/* Animated green indicators */
.float-insight-dots {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}

.float-insight-dots i {
  display: block;
  width: 7px;
  height: 7px;
  background: #7bd9b5;
  border-radius: 50%;
}

.float-insight-dots i:nth-child(2) {
  background: #36c998;
}

.float-insight-dots i:nth-child(3) {
  background: #a5e8cf;
}

.float-insight-dots i:nth-child(4) {
  background: #36c998;
}

/* Gentle up-and-down movement */
@keyframes earpStatusFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes earpInsightFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}



/
/* =====================================================
   EARP ENERGY: RESPONSIVE FLOATING STATUS CARDS
   Compact sizing + vertical floating animation
   ===================================================== */

/* Parent container */
.hero-product {
  position: relative;
  min-width: 0;
}

/* Shared card styling */
.hero-float-card {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  max-width: calc(100% - 12px);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d9e8e0;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

/* Desktop: Asset Status card */
.hero-float-status {
  top: 12%;
  left: 0%;
  width: 180px;
  min-height: 50px;
  animation: earpStatusFloat 5s ease-in-out 1.5s infinite;
}

/* Desktop: Intelligence card */
.hero-float-insight {
  right: 0%;
  bottom: 12%;
  width: 180px;
  min-height: 60px;
  animation: earpInsightFloat 5.5s ease-in-out 1.8s infinite;
}

/* Status indicator */
.float-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #20b982;
  border-radius: 50%;
}

.float-status-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  margin-left: auto;
  color: #0ba875;
  background: #e1f7ed;
  border-radius: 50%;
  font-size: 14px;
}

/* Card text */
.float-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.float-card-label {
  color: #7c9388;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.float-card-text strong {
  color: #203c33;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

/* Intelligence icon */
.float-insight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: #059b78;
  background: #e1f7ed;
  border-radius: 9px;
  font-size: 17px;
}

/* Intelligence indicator: animated green bars */
.float-insight-dots {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 15px;
  margin-top: 3px;
}

.float-insight-dots i {
  display: block;
  width: 5px;
  height: 6px;
  flex: 0 0 5px;
  background: #7bd9b5;
  border-radius: 3px;
  transform-origin: center;
  animation: insightBarPulse 0.9s ease-in-out infinite alternate;
}

.float-insight-dots i:nth-child(1) {
  height: 4px;
  animation-delay: 0s;
}

.float-insight-dots i:nth-child(2) {
  height: 8px;
  background: #36c998;
  animation-delay: 0.12s;
}

.float-insight-dots i:nth-child(3) {
  height: 6px;
  animation-delay: 0.24s;
}

.float-insight-dots i:nth-child(4) {
  height: 11px;
  background: #36c998;
  animation-delay: 0.36s;
}

.float-insight-dots i:nth-child(5) {
  height: 8px;
  animation-delay: 0.48s;
}

.float-insight-dots i:nth-child(6) {
  height: 14px;
  background: #36c998;
  animation-delay: 0.60s;
}

.float-insight-dots i:nth-child(7) {
  height: 10px;
  animation-delay: 0.72s;
}

.float-insight-dots i:nth-child(8) {
  height: 12px;
  background: #36c998;
  animation-delay: 0.84s;
}

/* Bar animation */
@keyframes insightBarPulse {
  from {
    transform: scaleY(0.65);
    opacity: 0.7;
	transform-origin: bottom center;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
	transform-origin: bottom center;
  }
}

/* Vertical floating animations */
@keyframes earpStatusFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes earpInsightFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* =====================================================
   TABLET SCREENS
   ===================================================== */

@media (max-width: 900px) {
  .hero-float-status {
    top: 8%;
    left: -20%;
    width: 150px;
    min-height: 46px;
    padding: 6px 8px;
    gap: 6px;
  }

  .hero-float-insight {
    right: -20%;
    bottom: 8%;
    width: 180px;
    min-height: 40px;
    padding: 7px 9px;
    gap: 7px;
  }

  .float-card-text strong {
    font-size: 9px;
  }

  .float-card-label {
    font-size: 7px;
  }

  .float-status-check {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .float-insight-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 15px;
  }
}

/* =====================================================
   MOBILE SCREENS
   ===================================================== */

@media (max-width: 600px) {
  .hero-float-status {
    top: 12%;
    left: -14%;
    width: 130px;
    min-height: 25px;
    padding: 6px 7px;
    gap: 5px;
  }

  .hero-float-insight {
    right: -22%;
    bottom: 5%;
    width: 150px;
    min-height: 8px;
    padding: 6px 8px;
    gap: 6px;
  }

  .float-card-text {
    gap: 2px;
  }

  .float-card-text strong {
    font-size: 8px;
  }

  .float-card-label {
    font-size: 6.5px;
    letter-spacing: 0.3px;
  }

  .float-status-dot {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }

  .float-status-check {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 12px;
  }

  .float-insight-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    font-size: 14px;
  }

  .float-insight-dots {
    gap: 3px;
    height: 13px;
    margin-top: 1px;
  }

  .float-insight-dots i {
    width: 4px;
    flex-basis: 4px;
  }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-float-status,
  .hero-float-insight,
  .float-insight-dots i {
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .hero-float-status,
  .hero-float-insight {
    display: none !important;
  }
}

/* =====================================================
   EARP VERTICALS MEGA MENU
   Homepage navigation only; uses the existing Oil/Gas/Power/Renewables pages.
   ===================================================== */
.nav-mega-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 12px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.nav-mega-trigger:hover,
.nav-mega-item.is-open > .nav-mega-trigger {
  color: #087d59;
}
.nav-chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.nav-mega-item.is-open .nav-chevron {
  transform: rotate(180deg);
}
.verticals-mega-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: -400px;
  width: min(900px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid #e0e7e3;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(15, 37, 29, .15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  color: #10251f;
}
.verticals-mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-mega-item.is-open .verticals-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.mega-menu-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #e4ebe7;
}
.mega-menu-heading > span {
  color: #2787df;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 2px;
}
.mega-menu-heading > a {
  color: #65766e;
  font-size: 12px;
  font-weight: 650;
}
.mega-menu-heading > a:hover { color: #07865e; }
.mega-vertical-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 24px 25px;
}
.mega-vertical-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #10251f;
  border-radius: 8px;
  outline-offset: 4px;
}
.mega-art {
  position: relative;
  display: block;
  height: 152px;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f7f5;
  isolation: isolate;
}
.mega-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
.mega-oil .mega-art { background-color: #eef5f1; }
.mega-gas .mega-art { background-color: #f0f4fb; }
.mega-power .mega-art { background-color: #f7f5ed; }
.mega-renewables .mega-art { background-color: #f1f7ec; }
.mega-vertical-card:hover .mega-art img { transform: scale(1.045); }
.mega-vertical-card > strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.3px;
}
.mega-description {
  min-height: 55px;
  margin-top: 7px;
  color: #7a8781;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.mega-arrow {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8eeea;
  color: #a1aca6;
  font-size: 20px;
  transition: color .2s ease, transform .2s ease;
}
.mega-vertical-card:hover > strong,
.mega-vertical-card:hover .mega-arrow {
  color: #07865e;
}
.mega-vertical-card:hover .mega-arrow { transform: translateX(4px); }
@media (max-width: 1100px) and (min-width: 801px) {
  .verticals-mega-menu { right: -250px; width: min(800px, calc(100vw - 36px)); }
  .mega-vertical-grid { gap: 12px; padding: 18px; }
  .mega-art { height: 120px; }
}
@media (max-width: 800px) {
  .nav-mega-item {
    display: block;
    width: 100%;
  }
  .nav-mega-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 2px 0;
    text-align: left;
  }
  .verticals-mega-menu {
    position: static;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
    transform: none;
    transition: max-height .25s ease, margin .25s ease, padding .25s ease;
  }
  .nav-mega-item.is-open .verticals-mega-menu {
    max-height: 900px;
    margin-top: 12px;
    border: 1px solid #e0e7e3;
    padding: 0;
  }
  .mega-menu-heading { padding: 13px 14px; }
  .mega-menu-heading > a { font-size: 11px; }
  .mega-vertical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
  }
  .mega-art { height: 92px; margin-bottom: 9px; }
  .mega-vertical-card > strong { font-size: 14px; }
  .mega-description { min-height: 0; font-size: 11px; }
  .mega-arrow { margin-top: 8px; padding-top: 7px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .verticals-mega-menu, .nav-chevron, .mega-arrow { transition: none; }
}


/* Smooth page entrance */
@keyframes earpPageEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade the page in without transforming the body */
body {
  animation: earpPageEnter 0.3s ease-out;
}

/* Smooth page exit */
body.earp-page-leaving {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  body.earp-page-leaving {
    opacity: 1;
    transition: none;
  }
}

/* Match homepage typography to the EARP vertical pages */

/* Main hero heading */
.hero h1 {
  font-size: clamp(38px, 4.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 620;
}

/* Main section headings */
.section h2,
.platform-section h2,
.ai-section h2,
.deployment-section h2,
.closing-cta h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 620;
}



/* Hide only footer tagline and Back to top on mobile */
@media (max-width: 768px) {
  .footer-bottom > span:nth-child(2),
  .footer-bottom > a {
    display: none;
  }
}

@media (max-width: 768px) {
  .footer-bottom > span:first-child {
    width: 100%;
    text-align: center;
  }
}


@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-main > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer-main > div:last-child {
    grid-column: 1 / -1;
  }
}


@media (max-width: 768px) {
  .footer-main > div:last-child {
    margin-top: 0;
    padding-top: 0;
    align-self: start;
  }

  .footer-main > div:last-child p {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .footer-main > div:last-child .text-button {
    margin-top: 0;
  }
}

/* Hide hero items on mobile */
@media (max-width: 768px) {
  .hero-actions .open-demo {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-trust {
    display: none !important;
  }
}

.hero-mobile-explore {
  display: none;
}

@media (max-width: 768px) {
  .hero-mobile-explore {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    margin: 20px 0 24px;
  }
}

@media (max-width: 768px) {
  .hero-actions .btn-secondary {
    display: none !important;
  }
}