
.ico-fx   { background:linear-gradient(145deg,var(--accent),var(--accent-strong)); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.40); }
.ico-labs2{ background:linear-gradient(145deg,var(--accent-soft),var(--accent-strong)); box-shadow:0 6px 18px -8px var(--accent-soft); }

.eco-hero{ position:relative; padding:104px 0 0; overflow:hidden; }
.eco-hero::before{
  content:""; position:absolute; right:-120px; top:-150px; width:840px; height:700px;
  background:radial-gradient(circle, rgba(255,45,28,.26), transparent 62%);
  pointer-events:none;
}
.ehero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.68fr 1fr; gap:26px; align-items:center;
  padding-bottom:26px;
}
.ehero-copy h1{
  font-size:clamp(30px,3.2vw,43px); font-weight:700;
  letter-spacing:-.02em; margin:14px 0 16px;
}
.ehero-copy .lead{ max-width:370px; font-size:13.5px; }

.ehero-stats{ display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
.ebox{
  min-width:78px; padding:12px 16px; border-radius:12px; text-align:center;
  background:var(--glass-bg); border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease;
}
.ebox:hover{ border-color:rgba(255,255,255,.21); transform:translateY(-3px); }
.ebox strong{
  display:block; font-family:var(--f-display); font-size:19px;
  font-weight:600; line-height:1.25; color:var(--text-main);
}
.ebox span{ font-size:10.5px; color:var(--muted-2); }

.earth{ position:relative; z-index:1; margin-top:-40px; line-height:0; }
.earth svg{ width:100%; height:190px; display:block; }

.orbit{ position:relative; height:430px; }
.orbit-rings{ position:absolute; inset:0; width:100%; height:100%; }

.orbit-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:180px; text-align:center;
  display:grid; justify-items:center; gap:2px;
}
.orbit-core::before{
  content:""; position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,28,.36), transparent 66%);
}
.hex{
  position:relative; width:96px; height:104px; margin-bottom:9px;
  background:linear-gradient(150deg,var(--accent) 0%,var(--accent-strong) 55%,transparent 100%), var(--glass-bg-strong);
  color:#fff; display:grid; place-items:center;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.40);
}
.hex svg{ width:50px; height:50px; }
.orbit-core strong{ position:relative; font-family:var(--f-display); font-size:16px; font-weight:600; }
.core-sub{ position:relative; font-size:11px; color:var(--text-body); }

.onode{
  position:absolute; display:flex; align-items:center; gap:9px;
  padding:7px 12px 7px 8px; border-radius:12px; white-space:nowrap;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(26px) saturate(130%); -webkit-backdrop-filter:blur(26px) saturate(130%);
  backdrop-filter:blur(6px);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.onode:hover{ border-color:rgba(255,255,255,.21); background:rgba(255,255,255,.055); }
.onode .ico{ width:32px; height:32px; border-radius:10px; }
.onode .ico svg{ width:18px; height:18px; }
.otext b{ display:block; font-family:var(--f-display); font-size:12.5px; font-weight:600; line-height:1.3; }
.otext i{ display:block; font-style:normal; font-size:10px; color:var(--muted-2); line-height:1.3; }

.nd1{ top:0;     left:50%; transform:translateX(-50%); }
.nd1:hover{ transform:translateX(-50%) translateY(-3px); }
.nd2{ top:14%;   right:0; }
.nd3{ top:38%;   right:0; }
.nd4{ top:62%;   right:2%; }
.nd5{ bottom:2%; right:20%; }
.nd6{ bottom:2%; left:20%; }
.nd7{ top:62%;   left:2%; }
.nd8{ top:38%;   left:0; }
.nd9{ top:14%;   left:0; }
.onode:hover{ transform:translateY(-3px); }
.nd1:hover{ transform:translateX(-50%) translateY(-3px); }

.how-head{ text-align:center; margin-bottom:30px; }
.how-head .eyebrow{ margin-bottom:9px; }
.how-head h2{ font-size:clamp(22px,2.3vw,29px); font-weight:600; margin-bottom:10px; }
.how-head p{ color:var(--muted); font-size:12.5px; line-height:1.75; }

.flow{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.fstep{ flex:1; min-width:0; text-align:center; }
.f-ico{
  width:56px; height:56px; margin:0 auto 13px; border-radius:15px;
  background:rgba(255,45,28,.13); border:1px solid var(--glass-border);
  display:grid; place-items:center; color:var(--purple-light);
  transition:transform .25s ease, background .25s ease;
}
.f-ico svg{ width:26px; height:26px; }
.fstep:hover .f-ico{ transform:translateY(-4px); background:rgba(255,255,255,.055); }
.fstep h4{ font-size:13px; font-weight:600; margin-bottom:6px; }
.fstep p{ color:var(--muted-2); font-size:11px; line-height:1.6; padding:0 6px; }
.chev{
  flex:none; margin-top:18px; padding:0 2px;
  font-size:19px; color:rgba(255,107,95,.4); letter-spacing:-2px;
}

.center-eyebrow{ text-align:center; margin-bottom:22px; }
.pgrid .pcard{ position:relative; }
.pcard .corner{ position:absolute; right:15px; top:15px; }
.pcard header{ margin-bottom:12px; }
.pcard h3{ font-size:17px; font-weight:600; margin-bottom:3px; }
.psub{ font-size:11.5px; color:var(--muted-2); margin-bottom:12px; }

.together{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  min-height:250px; padding:32px 34px;
  border-radius:var(--radius-lg);
  background:linear-gradient(105deg,rgba(255,45,28,.16) 0%,transparent 55%), var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.40);
}
.tog-copy{ position:relative; z-index:3; }
.tog-eyebrow{
  display:block; font-family:var(--f-display); font-size:12.5px;
  font-weight:500; color:var(--text-body); margin-bottom:11px;
}
.tog-copy h2{ font-size:clamp(21px,2.2vw,28px); font-weight:600; line-height:1.34; margin-bottom:11px; }
.tog-copy p{ font-size:12.5px; color:var(--text-body); line-height:1.7; margin-bottom:18px; }

.tog-art{ position:absolute; right:0; top:0; bottom:0; width:56%; }
.tog-globe{ position:absolute; right:-20px; bottom:-30px; width:104%; }

.fnode{
  position:absolute; width:40px; height:40px; border-radius:13px;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.7);
}
.fnode svg{ width:21px; height:21px; }
.f1{ left:16%; top:52%; }
.f2{ left:38%; top:22%; }
.f3{ left:58%; top:14%; }
.f4{ left:72%; top:42%; }
.f5{ left:88%; top:58%; }
.f6{ left:6%;  top:78%; }

@media (max-width:1080px){
  .ehero-grid{ grid-template-columns:1fr; gap:30px; }
  .orbit{ height:400px; }
  .flow{ flex-wrap:wrap; justify-content:center; gap:22px; }
  .fstep{ flex:0 0 30%; }
  .chev{ display:none; }
  .together{ grid-template-columns:1fr; min-height:0; }
  .tog-art{ position:relative; width:100%; height:180px; margin-top:18px; }
  .tog-globe{ right:0; bottom:-20px; width:100%; }
}

@media (max-width:820px){
  .eco-hero{ padding-top:92px; }
  .earth svg{ height:130px; }
  .orbit{ height:auto; display:grid; gap:9px; }
  .orbit-rings{ display:none; }
  .orbit-core{
    position:static; transform:none; width:100%;
    padding:20px; border-radius:16px; justify-items:center;
    background:var(--glass-bg); border:1px solid var(--line);
  }
  .orbit-core::before{ display:none; }
  .onode{ position:static; transform:none; }
  .nd1{ left:auto; transform:none; }
  .nd1:hover,.onode:hover{ transform:translateY(-3px); }
}

@media (max-width:640px){
  .fstep{ flex:0 0 46%; }
  .ehero-stats{ gap:9px; }
  .ebox{ flex:1; min-width:0; padding:11px 8px; }
  .together{ padding:24px 20px; }
  .tog-art{ height:150px; }
  .fnode{ width:34px; height:34px; border-radius:11px; }
  .fnode svg{ width:18px; height:18px; }
}
