:root{--navy:#0b3263;--text:#45617d;--yellow:#f7b400;--red:#f42c35;--line:#ece8df;/* --serif:"DM Serif Display",Georgia,serif; --serif-weight:400; */ /* --serif:"Montserrat",sans-serif; --serif-weight:700; */ --serif:"Plus Jakarta Sans",sans-serif;--serif-weight:700;--sans:"Manrope",system-ui,sans-serif;--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fdfcfc;color:var(--navy);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}body,main,section,header,footer{background:#fdfcfc}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}.skip{position:fixed;transform:translateY(-200%)}.marquee{overflow:hidden;background:var(--yellow)}.marquee-track{width:max-content;min-height:37px;display:flex;align-items:center;gap:0;padding:0;font-size:.81rem;font-weight:800;animation:marquee 75s linear infinite}.marquee-track>*{margin-right:36px}.mq-sep{color:var(--navy);font-size:.7rem;opacity:.7;flex-shrink:0}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent}.header.scrolled{box-shadow:0 10px 30px rgba(11,50,99,.05);border-color:#eee}.navrow{min-height:86px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}.logo img{width:200px;margin-top:8px}.nav{display:flex;justify-content:center;gap:29px;color:#36546f;font-size:.9rem;font-weight:700}.btn{min-height:51px;padding:0 24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:.91rem}.primary{background:var(--yellow);box-shadow:0 13px 28px rgba(247,180,0,.2)}.outline{border:1px solid #e1c151}.access{background:transparent;border:2px solid var(--navy);color:var(--navy);letter-spacing:.04em;font-size:.78rem;transition:background .2s,color .2s}.access:hover{background:var(--navy);color:#fff}.menu,.mobile{display:none}.section{padding:82px 0}.eyebrow{margin:0 0 14px;color:#2e6384;font-size:.69rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.heading{text-align:center}.heading h2{margin:0;font:var(--serif-weight) clamp(2rem,3.4vw,3.25rem)/1.05 var(--serif)}.reveal{will-change:opacity,transform}
.hero{position:relative;min-height:720px;padding:54px 0 56px;overflow:hidden}
.hero-grid{
  display:grid;
  grid-template-columns:460px minmax(0,1fr);
  gap:92px;
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:5;
  width:460px;
  max-width:460px;
}
.hero-title{
  margin:0;
  font-family: var(--serif);
  font-weight: var(--serif-weight);
  font-size: clamp(3.2rem, 4.7vw, 3.55rem);
  line-height: 1.15;
  letter-spacing:-.018em;
}
.hero-title>span{
  display:block;
  white-space:nowrap;
}
.accent{color:var(--yellow)}
.lead{
  max-width:455px;
  margin:25px 0 0;
  color:var(--text);
  font-size:.96rem;
  font-weight:600;
  line-height:1.68;
}
.actions{display:flex;gap:13px;margin-top:28px;flex-wrap:wrap}
.support{display:flex;align-items:center;gap:9px;color:var(--text);font-size:.88rem;font-weight:650;margin-top:22px}
.support b{width:21px;height:21px;display:grid;place-items:center;border:2px solid var(--yellow);border-radius:50%;color:var(--yellow)}
.hero-art{position:relative;min-height:700px;z-index:2;min-width:0;transform:translateX(56px)}
.hero-picture{position:absolute;right:-160%;top:-20%;bottom:auto;width:380%;max-width:none;z-index:1}
.hero-picture img{width:100%;mix-blend-mode:multiply}
video.hero-picture{height:auto;object-fit:contain;mix-blend-mode:multiply}
.metrics{position:absolute;z-index:4;left:15px;top:6%;width:248px;display:grid;gap:12px}
.metrics article{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;min-height:90px;padding:16px 18px;border:2.5px solid #f1dba8;border-radius:17px;background:#fff;box-shadow:0 16px 36px rgba(11,50,99,.08)}
.metrics small{display:block;color:#455d72;font-size:.82rem;font-weight:700;line-height:1.28}
.metrics strong{display:block;margin-top:4px;color:var(--navy);font-size:1.12rem;font-weight:800;line-height:1.2}
.metrics i{font-style:normal;font-size:2rem;font-weight:800;text-align:center}
.yellow{color:var(--yellow)}
.red{color:var(--red)}
.curve{position:absolute;pointer-events:none}
.curve path{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hero-curve{inset:25px 0 0 24%;width:76%;height:100%;opacity:.55}
.hero-curve path{stroke-width:1.2}
.metric-curve{inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.s-flow{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:.35;stroke-width:2}
.fade-line{stroke:url(#fadeLine)!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;stroke-width:2.5}
.process{padding-top:44px}.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px}.step-curve{left:0;top:30px;width:100%;height:90px;pointer-events:none}.step-curve path{stroke-dasharray:6 9;stroke-width:2;stroke-dashoffset:0}.steps article{position:relative;padding:0 24px;display:flex;flex-direction:column;align-items:center;text-align:center}.step-head{position:relative;display:inline-block;margin-bottom:18px}.steps h3{margin:0 0 8px}.steps p{margin:0;color:var(--text);font-size:.96rem;font-weight:600;line-height:1.68;width:265px}.steps em,.evo em{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);font-style:normal;font-size:.67rem;font-weight:900}.steps em{position:absolute;right:-14px;top:-10px}.icon{width:120px;height:120px;position:relative}.icon img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brands{padding-top:64px}.brandrow{max-width:1020px;margin:37px auto 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:25px;align-items:center}.brandrow>b{width:1px;height:51px;background:#ddd}.brand-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}.brand-soon .victron img,.brand-soon .huawei img,.brand-soon .must img,.brand-soon .deye img{filter:grayscale(1);opacity:.35}.brand-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.badge-soon{background:#eee;color:#888}.badge-progress{background:#e8f0fe;color:#1758ca}.brand-tooltip{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;line-height:1.5;padding:10px 16px;border-radius:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;z-index:20;text-align:center}.brand-tooltip span{display:block;font-weight:400;opacity:1;color:#fff;margin-top:3px;font-size:.67rem}.brand-done:hover .brand-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}.brand-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy)}.victron,.huawei,.must,.deye{display:flex;align-items:center;justify-content:center}.victron img{height:44px;width:auto;display:block}.huawei img{height:36px;width:auto;display:block}.must img{height:34px;width:auto;display:block}.deye img{height:34px;width:auto;display:block}
.platform{padding-top:58px}.platform-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:54px;align-items:center}.platform-art img,.platform-art video{width:108%;max-width:none;margin-left:-7%;mix-blend-mode:multiply}.platform-title{margin:0;font:var(--serif-weight) clamp(2.6rem,4.3vw,4.35rem)/1.02 var(--serif)}.platform-title span{color:var(--yellow)}.platform-lead{max-width:555px;color:var(--text)}.features{display:grid;grid-template-columns:1fr 1fr;gap:14px 21px;color:var(--text);font-size:.82rem;font-weight:650}
.evolution{padding-top:54px}.evo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:42px;align-items:start}.evo{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:start}.evo-copy{align-self:start;padding-top:8px}.evo h3{margin:14px 0 0;font-size:1.08rem;line-height:1.25}.evo p{color:var(--text);font-size:.76rem}.evo picture,.evo video{align-self:start;display:block}.evo img,.evo video{width:100%;object-fit:contain;mix-blend-mode:multiply;display:block}.tagline{text-align:center;color:var(--text);font-weight:700;margin-top:34px}
.contactbox{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;padding:46px 50px;border:1px solid var(--line);border-radius:28px}.contactbox h2{font:var(--serif-weight) clamp(2rem,3.25vw,3.2rem)/1.05 var(--serif);margin:0}.contactbox p{color:var(--text)}.footer{margin-top:90px;padding:46px 0;border-top:1px solid var(--line)}.footerrow{display:grid;grid-template-columns:1fr auto;align-items:center}.footer img{width:165px}.footer p{color:var(--text);white-space:nowrap;margin:8px 0 0}.footer nav{display:flex;flex-direction:row;gap:28px;color:var(--text);font-weight:700;white-space:nowrap}
.video-container{position:relative;display:inline-block;width:108%;margin-left:-7%}
.video-container video{width:100%;max-width:none;mix-blend-mode:multiply;display:block}
.play-demo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--yellow);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 20px rgba(247,180,0,.3);transition:all .2s ease;z-index:10}
.play-demo:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 15px 30px rgba(247,180,0,.4)}
.modal-overlay{position:fixed;inset:0;background:rgba(11,50,99,.9);z-index:9999;display:grid;place-items:center;padding:24px;backdrop-filter:blur(8px)}
.modal-overlay[hidden]{display:none}
.modal-content{position:relative;width:100%;max-width:960px;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.modal-content video{width:100%;display:block}
.modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;transition:background .2s ease;z-index:10}
.modal-close:hover{background:rgba(255,255,255,.3)}
@media(max-width:1180px){
  .hero-grid{grid-template-columns:420px minmax(0,1fr);gap:72px}
  .hero-copy{width:420px;max-width:420px}
  .hero-title{font-size:clamp(3.2rem,4vw,3.85rem)}
  .lead{max-width:415px}
  .hero-picture{right:-30%;width:116%}
  .metrics{left:30px;width:218px}
}.hero-picture{right:-40%;width:132%;top:10%}
@media(max-width:1080px){.desktop{display:none}.menu{display:flex;justify-self:end}.navrow{grid-template-columns:auto 1fr auto}.mobile{padding:14px 24px 24px}.mobile a{display:block;padding:10px}.hero-grid,.platform-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-title{font-size:clamp(3.5rem,8vw,5.5rem)}.lead{margin-inline:auto}.actions,.support{justify-content:center}.hero-picture{position:relative;right:auto;width:78%;margin:auto}.hero-art{min-height:620px;transform:none}.metrics{left:4%}.platform-art img{width:100%;margin:0}.evo-grid{grid-template-columns:1fr}.evo{grid-template-columns:180px 1fr;min-height:330px}.contactbox{grid-template-columns:1fr}}
@media(max-width:760px){.wrap{width:min(calc(100% - 30px),var(--max))}.hero-title{font-size:clamp(2.9rem,12vw,4.5rem)}.hero-title>span{white-space:normal}.hero-art{min-height:auto}.hero-picture{width:100%}.metrics{position:relative;left:auto;top:auto;width:100%;grid-template-columns:1fr 1fr}.metric-curve{display:none}.steps{grid-template-columns:1fr}.step-curve{display:none}.brandrow{grid-template-columns:1fr 1fr}.brandrow>b{display:none}.features{grid-template-columns:1fr}.evo{grid-template-columns:1fr;min-height:auto}.footerrow{grid-template-columns:1fr}}
@media(max-width:480px){.metrics,.brandrow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
@media(max-width:760px){.metrics article{min-height:84px;padding:15px 16px}.metrics small{font-size:.68rem}.metrics strong{font-size:.92rem}}

/* ==========================================================================
   Mobile Optimizations (AccroachCode Fixes)
   ========================================================================== */

/* 1. Base Menu Button Styling */
.menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 100;
}
.menu span {
  position: absolute;
  left: 7px;
  width: 24px;
  height: 2px;
  background-color: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s ease, bottom 0.3s ease, opacity 0.2s ease;
}
.menu span:nth-child(1) {
  top: 13px;
}
.menu span:nth-child(2) {
  bottom: 13px;
}

/* Menu Toggle Transform (Forming an X) */
.menu[aria-expanded="true"] span:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}
.menu[aria-expanded="true"] span:nth-child(2) {
  bottom: 18px;
  transform: rotate(-45deg);
}

/* 2. Platform Section Mobile Fixes */
@media(max-width: 1080px) {
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .menu {
    display: flex; /* Render the menu button on mobile */
  }
  .mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 15px 30px rgba(11, 50, 99, 0.08);
    padding: 24px;
    z-index: 99;
    flex-direction: column;
    gap: 12px;
  }
  .mobile:not([hidden]) {
    display: flex;
  }
  .mobile a {
    display: block;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--navy);
    border-bottom: 1px solid #f7f7f7;
    font-size: 0.95rem;
    transition: color 0.2s;
  }
  .mobile a:hover {
    color: var(--yellow);
  }
  .mobile .btn.primary {
    margin-top: 8px;
    justify-content: center;
    background: var(--yellow);
    box-shadow: 0 13px 28px rgba(247,180,0,.2);
  }
  
  /* Platform Video Resets */
  .platform-art img, 
  .platform-art video,
  .video-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    mix-blend-mode: multiply;
  }

  /* Platform Section Centering */
  .platform-copy {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .platform-lead {
    margin-inline: auto !important;
    max-width: 450px !important;
  }
  .features {
    grid-template-columns: 1fr 1fr !important;
    text-align: left !important;
    margin: 24px auto 0 !important;
    max-width: 360px !important;
  }
}

/* 3. Footer and General Content Mobile Adjustments */
@media(max-width: 760px) {
  /* Footer reset */
  .footer {
    padding: 40px 0;
    text-align: center;
  }
  .footerrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .footer img {
    margin: 0 auto;
  }
  .footer p {
    white-space: normal !important; /* Allow wrapping! */
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 320px;
    margin-inline: auto;
  }
  .footer nav {
    flex-direction: column !important; /* Stack links vertically */
    align-items: center;
    gap: 16px;
    white-space: normal !important;
  }
  
  /* Process Paragraphs Width Reset */
  .steps p {
    width: 100% !important;
    max-width: 280px !important;
    margin-inline: auto;
  }
  
  /* Contact Box centering */
  .contactbox {
    padding: 32px 24px;
    text-align: center;
    gap: 24px;
  }
  .contactbox h2 {
    margin-bottom: 8px;
  }
  .contactbox .btn.primary {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: inline-flex;
  }

  /* Evolution Section Mobile Centering */
  .evo-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 0 !important;
  }
  .evo-copy h3 {
    margin: 12px 0 8px !important;
  }
  .evo-copy p {
    margin-bottom: 16px !important;
    max-width: 280px !important;
    margin-inline: auto !important;
  }
  .evo video, 
  .evo img {
    margin: 0 auto !important;
    max-width: 320px !important;
  }

  /* Hero Art and Metrics resets for mobile */
  .hero-art {
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .metrics {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 24px auto 0 !important;
    grid-template-columns: 1fr !important; /* Stack cards on mobile */
    gap: 12px !important;
  }
  .metrics article {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Platform Features centering on mobile */
  .features {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
    margin: 20px auto 0 !important;
    text-align: left !important;
  }
}


/* Disable Selection & Copying */
body, html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}