@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ============================
   RESET & BASE
============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.evstand-control-unit,
.evstand-products-page {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #1e3448;
  background: #fff;
  line-height: 1.85;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

/* ============================
   DESIGN TOKENS
============================ */
:root {
  --blue:     #0e7fc0;
  --blue-dk:  #0a5d8e;
  --blue-dp:  #063d5e;
  --blue-lt:  #e8f5fb;
  --blue-md:  #b8ddf0;
  --teal:     #0ea5a0;
  --navy:     #0b1f33;
  --text:     #1e3448;
  --muted:    #4a5e72;
  --light:    #f4f8fc;
  --border:   #d4e5ef;
  --white:    #ffffff;
  --max:      1140px;
  --r:        16px;
  --r-sm:     10px;
  --sh-sm:    0 2px 10px rgba(10,60,100,.08);
  --sh-md:    0 8px 30px rgba(10,60,100,.12);
  --sh-lg:    0 20px 60px rgba(10,60,100,.16);
}

/* ============================
   LAYOUT
============================ */
.wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; }

/* ============================
   TOPBAR
============================ */
.topbar {
  background: #f0f6fa;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

/* ============================
   HEADER / NAV
============================
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(10,60,100,.06);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 20px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-dk), var(--blue));
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14,127,192,.3);
}
.logo-name { font-size: clamp(20px,2.2vw,24px); font-weight: 900; color: var(--blue-dp); letter-spacing: -.03em; line-height: 1; }
.logo-sub  { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 4px; }
nav { display: flex; gap: clamp(10px,1.5vw,20px); font-size: 13px; font-weight: 500; }
nav a { color: var(--muted); transition: color .15s; position: relative; padding-bottom: 2px; }
nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transition: transform .2s;
}
nav a:hover, nav a.active { color: var(--blue); }
nav a:hover::after, nav a.active::after { transform: scaleX(1); }
.nav-cta {
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 10px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .18s, transform .18s;
  box-shadow: 0 4px 14px rgba(14,127,192,.28);
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--blue-dk); transform: translateY(-1px); }
 */
/* ============================
   HERO
============================ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #0b1f33 0%, #0a5d8e 52%, #0e9e99 100%);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 80% 40%, rgba(14,165,160,.2) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 10% 90%, rgba(14,127,192,.2) 0%, transparent 65%);
}
/* ドット背景 */
.hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(32px,5vw,64px);
  align-items: center;
  padding: clamp(64px,9vw,96px) 0;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 22px;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #5dd6d3;
  animation: blink 2.2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.eyebrow-text { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.88); letter-spacing: .07em; }

.hero h1 {
  font-size: clamp(28px,3.5vw,49px);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -.04em;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  max-width: 620px;
}
.hero h1 em { font-style: normal; color: #5dd6d3; }
.hero-lead {
  font-size: clamp(14px,1.7vw,16px);
  color: rgba(255,255,255,.75);
  line-height: 1.9; max-width: 620px; margin-bottom: 32px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-hw {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-sm); padding: 14px 26px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .2s;
  border: none; text-decoration: none;
}
.btn-hw-p {
  background: #fff; color: var(--blue-dk);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.btn-hw-p:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.26); }
.btn-hw-o {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.38) !important;
  color: #fff;
}
.btn-hw-o:hover { background: rgba(255,255,255,.2); }

.hero-badges {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-top: 28px;
}
@media (max-width: 1100px) {
  .hero-badges {
    grid-template-columns: repeat(2,1fr);
  }
}
.hero-badge-item {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm); padding: 12px 10px;
  text-align: center; font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.88);
}

/* ヒーロービジュアルカード */
.hero-visual { position: relative; }
.hero-vis-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px; padding: 28px 24px;
  backdrop-filter: blur(10px);
}
.hero-vis-head {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9);
}
.hero-device-frame {
  width: 100%; aspect-ratio: 1.5;
  border: 1.5px dashed rgba(255,255,255,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  text-align: center; padding: 20px;
  color: rgba(255,255,255,.7);
  margin-bottom: 36px;
  position: relative; overflow: hidden;
  height: 270px !important;
}
.hero-device-frame img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.hero-device-frame .placeholder-inner { pointer-events: none; }
.hero-device-frame .placeholder-inner strong { font-size: 18px; color: #fff; display: block; margin-bottom: 6px; }
.hero-device-frame .placeholder-inner small { font-size: 12px; color: rgba(255,255,255,.6); }
.hero-vis-note { font-size: 12px; color: rgba(255,255,255,.6); text-align: center; line-height: 1.7; }
.hero-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hstat {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 12px 10px; text-align: center;
}
.hstat-num { font-size: 15px; font-weight: 900; color: #5dd6d3; }
.hstat-lbl { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.6); margin-top: 3px; letter-spacing: .04em; }

/* ============================
   SECTION BASE
============================ */
section { padding: clamp(64px,8vw,88px) 0; }
.sec-white { background: var(--white); }
.sec-light { background: var(--light); }
.sec-navy  { background: var(--navy); }

.sec-head { text-align: center; max-width: 780px; margin: 0 auto 52px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-lt); color: var(--blue-dk);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  border-radius: 999px; padding: 6px 16px; margin-bottom: 14px;
  text-transform: uppercase;
}
.kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.sec-navy .kicker { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.sec-navy .kicker-dot { background: #5dd6d3; }
.sec-head h2 {
  font-size: clamp(26px,3.8vw,40px); font-weight: 700;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.28;
  margin-bottom: 16px;
}
.sec-head h2 span { color: var(--blue); }
.sec-navy .sec-head h2 { color: #fff; }
.sec-head .desc, .sec-head p {
  font-size: 15.5px; color: var(--muted); line-height: 1.9; max-width: 780px;
}
.sec-navy .sec-head p { color: rgba(255,255,255,.65); }

.notice-bar {
  background: var(--white); border-left: 4px solid var(--blue);
  border-radius: var(--r-sm); padding: 15px 20px;
  margin: 24px auto 0; max-width: 800px;
  color: var(--muted); font-size: 13.5px; text-align: left;
  box-shadow: var(--sh-sm);
}

/* ============================
   PRODUCT CARDS
============================ */
.product-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 26px; margin-top: 40px;
}
.product-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--sh-md);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.product-image {
  aspect-ratio: 16/10; min-height: 240px;
  background: var(--blue-lt);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  padding: 24px 28px 8px;
}
.product-image img {
  width: 100%; height: 100%;
  max-height: 260px; object-fit: contain; object-position: center bottom;
}
.product-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border: 1.5px dashed var(--blue-md); border-radius: 14px;
  background: linear-gradient(135deg, #f0f9ff, var(--blue-lt));
  color: var(--navy); text-align: center; padding: 20px;
}
.product-placeholder strong { font-size: 18px; display: block; margin-bottom: 6px; }
.product-placeholder small { font-size: 12px; color: var(--muted); }
.product-caption {
  position: absolute; left: 16px; bottom: 12px;
  background: rgba(255,255,255,.92);
  border-radius: 999px; padding: 6px 12px;
  color: var(--navy); font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}

.product-head {
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--blue-dp), var(--blue-dk));
  color: #fff;
}
.product-head-badge {
  display: inline-flex; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.95);
  letter-spacing: .06em; margin-bottom: 10px;
}
.product-head h3 {
  font-size: clamp(22px,2.6vw,26px); font-weight: 900;
  color: #fff; letter-spacing: -.025em; margin-bottom: 4px;
}
.product-head-sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); }

.product-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.product-body > p {
  font-size: 14px; color: var(--muted); line-height: 1.85; margin-bottom: 18px;
}
.patent-note {
  font-size: 12px; color: var(--muted);
  border-left: 3px solid var(--blue-md);
  padding-left: 10px; margin-top: 8px; margin-bottom: 18px;
  line-height: 1.7;
}

.price-box {
  background: var(--light); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 18px 20px; margin-bottom: 20px;
}
.price-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.price-num {
  font-size: clamp(22px,2.8vw,28px); font-weight: 900;
  color: var(--navy); line-height: 1.25; margin: 4px 0;
}
.price-num small { font-size: 13px; font-weight: 500; color: var(--muted); }
.price-note { font-size: 12px; color: var(--muted); }

.feature-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px; margin-bottom: 20px;
}
.feature {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--white); line-height: 1.4;
}
.feature::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  flex-shrink: 0; background: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.feature-warn::before {
  background: #ef8a00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cline x1='2' y1='6' x2='10' y2='6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag {
  background: var(--blue-lt); color: var(--blue-dk);
  font-weight: 600; border-radius: 999px; padding: 6px 13px; font-size: 12px;
}

.product-body .btns { margin-top: auto; padding-top: 4px; }
.btn-prod {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; background: var(--blue); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 14px 20px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 16px rgba(14,127,192,.28);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-prod:hover {
  background: var(--blue-dk); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14,127,192,.36);
}

/* ============================
   SYSTEM FLOW / DIAGRAM
============================ */
.diagram-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 32px;
  margin-top: 36px; box-shadow: var(--sh-sm);
}
.diagram-box h3 {
  font-size: 17px; font-weight: 700; color: var(--navy);
  margin-bottom: 22px; letter-spacing: -.01em;
}
.flow {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0; align-items: center;
}
.flow-item {
  background: var(--light); border-radius: 12px; padding: 18px 12px;
  text-align: center; font-size: 14px; font-weight: 700; color: var(--navy);
  position: relative;
}
.flow-item span {
  display: block; font-size: 11px; font-weight: 400;
  color: var(--muted); margin-top: 5px;
}
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-md); font-size: 20px; font-weight: 900;
}

/* ============================
   IMAGE SECTION
============================ */
.image-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 24px; margin-top: 36px; align-items: stretch;
}
.image-card {
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--white); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.image-card .img {
  min-height: 260px; background: var(--blue-lt);
  display: grid; place-items: center; padding: 24px;
}
.image-card .img img {
  width: 100%; max-height: 300px; object-fit: contain;
}
.img-placeholder {
  width: 100%; min-height: 220px;
  border: 1.5px dashed var(--blue-md); border-radius: 12px;
  background: linear-gradient(135deg, #f0f9ff, var(--blue-lt));
  display: grid; place-items: center; text-align: center;
  color: var(--navy); padding: 22px;
}
.img-placeholder strong { font-size: 16px; display: block; margin-bottom: 6px; }
.img-placeholder small { font-size: 12px; color: var(--muted); }
.image-card .txt { padding: 22px 24px; }
.image-card .txt h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.image-card .txt p { font-size: 14px; color: var(--muted); line-height: 1.85; }

/* ============================
   COMPARISON TABLE
============================ */
.tbl-scroll { overflow: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--sh-sm); }
.evtable { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--white); }
.evtable thead { background: var(--navy); }
.evtable th {
  padding: 17px 20px; text-align: left;
  font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.evtable th:first-child { color: rgba(255,255,255,.65); font-weight: 500; }
.evtable tbody tr { transition: background .12s; }
.evtable tbody tr:nth-child(even) { background: var(--light); }
.evtable tbody tr:hover { background: #e8f3fb; }
.evtable td {
  padding: 15px 20px; font-size: 14px;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.evtable td:first-child { font-weight: 700; color: var(--navy); }
.td-ok { color: var(--blue); font-weight: 700; }
.td-no { color: #94a3b8; }

/* ============================
   SOLUTION CARDS
============================ */
.sol-cards {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px; margin-top: 40px;
}
.sol-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r); padding: 28px 24px;
  transition: background .2s;
}
.sol-card:hover { background: rgba(255,255,255,.14); }
.sol-card h3 {
  font-size: 17px; font-weight: 700; color: #fff;
  margin-bottom: 12px; letter-spacing: -.01em; line-height: 1.4;
}
.sol-card p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.85; }
.sol-card-icon { font-size: 26px; margin-bottom: 12px; }

/* ============================
   CONTACT
============================ */
.contact-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: 40px; margin-top: 36px; align-items: start;
}
.contact-info h2 {
  font-size: clamp(24px,3vw,34px); font-weight: 700;
  color: var(--navy); letter-spacing: -.03em; line-height: 1.3; margin-bottom: 12px;
}
.contact-info > p { font-size: 15px; color: var(--muted); line-height: 1.9; margin-bottom: 24px; }
.info-cards { display: flex; flex-direction: column; gap: 14px; }
.info-card-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 16px 18px;
  box-shadow: var(--sh-sm);
}
.info-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--blue); display: grid; place-items: center; font-size: 16px;
}
.info-label { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .07em; text-transform: uppercase; }
.info-val { font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.6; }

/* FORM */
.contact-form {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 36px;
  box-shadow: var(--sh-md);
}
.form-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.form-sub   { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field-wrap { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 13px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 5px;
}
.required { color: #e53935; font-size: 11px; font-weight: 700; }
.evstand-control-unit .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.evstand-control-unit .contact-form select,
.evstand-control-unit .contact-form textarea {
  width: 100%; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); background: var(--light);
  padding: 12px 14px; font: inherit; font-size: 14px;
  color: var(--text); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.evstand-control-unit .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.evstand-control-unit .contact-form select:focus,
.evstand-control-unit .contact-form textarea:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(14,127,192,.12);
}
.evstand-control-unit .contact-form input.err,
.evstand-control-unit .contact-form select.err,
.evstand-control-unit .contact-form textarea.err {
  border-color: #e53935;
  box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}
.evstand-control-unit .contact-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px;
  width: 100% !important;
  height: auto !important;
}
.evstand-control-unit .contact-form textarea { min-height: 120px; resize: vertical; }
.field-err { display: none; font-size: 12px; font-weight: 500; color: #c62828; }
.field-err.show { display: block; }
.evstand-control-unit .contact-form .form-submit,
.evstand-control-unit .contact-form .mw_wp_form input[type="submit"],
.evstand-control-unit .contact-form .mw_wp_form button[type="submit"] {
  width: 100%; background: var(--blue); color: #fff;
  border: none; border-radius: var(--r-sm); padding: 16px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-top: 20px;
  box-shadow: 0 4px 18px rgba(14,127,192,.3);
  transition: background .18s, transform .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
  display: block;
  text-align: center;
}
.submitBack {
  padding: 0 !important;
  margin-top: 30px !important;
  width: auto !important;
  background-color: transparent !important;
  color: var(--blue) !important;
  border: none !important;
}
#message {
  max-height: 120px;
}
.evstand-control-unit .contact-form .form-submit:hover,
.evstand-control-unit .contact-form .mw_wp_form input[type="submit"]:hover,
.evstand-control-unit .contact-form .mw_wp_form button[type="submit"]:hover {
  background: var(--blue-dk); transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(14,127,192,.38);
}
.form-success {
  display: none; padding: 16px 18px; border-radius: var(--r-sm);
  background: #e8f5e9; border: 1px solid #c8e6c9;
  font-size: 14px; font-weight: 700; color: #2e7d32; margin-bottom: 16px;
}
.form-success.show { display: block; }

/* MW WP Form（ショートコード出力） */
.evstand-control-unit .contact-form .mw_wp_form {
  width: 100%;
}
.evstand-control-unit .contact-form .mw_wp_form .error {
  font-size: 12px;
  font-weight: 500;
  color: #c62828;
  margin-top: 6px;
}
.evstand-control-unit .contact-form .mw_wp_form dl,
.evstand-control-unit .contact-form .mw_wp_form table {
  width: 100%;
  margin: 0;
}
.evstand-control-unit .contact-form .mw_wp_form dl {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.evstand-control-unit .contact-form .mw_wp_form dt,
.evstand-control-unit .contact-form .mw_wp_form th {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  padding: 0 0 6px;
  border: none;
  background: transparent;
  text-align: left;
  vertical-align: top;
}
.evstand-control-unit .contact-form .mw_wp_form dd,
.evstand-control-unit .contact-form .mw_wp_form td {
  padding: 0;
  border: none;
  background: transparent;
}
.evstand-control-unit .contact-form .mw_wp_form table {
  border-collapse: separate;
  border-spacing: 0 16px;
}
.evstand-control-unit .contact-form .mw_wp_form tr {
  display: block;
  margin-bottom: 16px;
}
.evstand-control-unit .contact-form .mw_wp_form .horizontal-item {
  display: inline-block;
  width: auto !important;
  float: none !important;
  margin: 0 16px 8px 0;
}
.evstand-control-unit .contact-form .mw_wp_form .mwform-tel-field input[type="text"],
.evstand-control-unit .contact-form .mw_wp_form .mwform-zip-field input[type="text"] {
  display: inline-block;
  width: auto !important;
  min-width: 4.5em;
  max-width: 100%;
}
.evstand-control-unit .contact-form .mw_wp_form .mwform-checkbox-field label,
.evstand-control-unit .contact-form .mw_wp_form .mwform-radio-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.evstand-control-unit .contact-form .mw_wp_form input[type="file"] {
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
}
.evstand-control-unit .contact-form .mw_wp_form .el_must,
.evstand-control-unit .contact-form .mw_wp_form .require {
  color: #e53935;
  font-size: 11px;
  font-weight: 700;
}

/* ============================
   FIXED CTA
============================
.fixed-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
}
.fixed-cta a {
  display: block; background: var(--blue); color: #fff;
  border-radius: 999px; padding: 13px 22px;
  font-weight: 700; font-size: 14px; text-align: center;
  box-shadow: 0 8px 24px rgba(10,60,100,.25);
  transition: transform .2s, filter .2s;
  white-space: nowrap;
}
.fixed-cta a:hover { transform: translateY(-2px); filter: brightness(.92); }
.fixed-cta a:first-child { background: var(--navy); }
 */
/* ============================
   FOOTER
============================
footer {
  background: var(--navy); padding: 48px 0 32px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: start; margin-bottom: 28px;
}
.footer-logo { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.04em; margin-bottom: 8px; }
.footer-logo span { color: #5dd6d3; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.75; }
.footer-info { text-align: right; }
.footer-info p { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.9; }
.footer-copy {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12px; color: rgba(255,255,255,.3); text-align: center;
}
 */
/* ============================
   SCROLL ANIMATION
============================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-badges { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .image-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .sol-cards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-info { text-align: left; }
  /*nav { display: none; }*/
  .topbar .wrap { flex-direction: column; gap: 4px; }
  /*.fixed-cta { left: 14px; right: 14px; flex-direction: row; bottom: 14px; }
  .fixed-cta a { flex: 1; }*/
  body { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .wrap { width: min(100% - 32px, var(--max)); }
  .hero h1 { font-size: 30px; line-height: 1.25; overflow-wrap: anywhere; }
  .hero-btns { display: grid; grid-template-columns: 1fr; }
  .btn-hw { width: 100%; justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .sol-cards { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  header { position: static !important; box-shadow: none !important; }
  .fixed-cta { display: none !important; }
  section { padding: 40px 0 !important; }
  .hero-inner,.product-grid,.contact-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}

/* ===== Final finish adjustments ===== */
.hero h1{
  text-wrap:balance;
}
.flow{
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr;
}
.flow-arrow{
  min-width:40px;
}
@media (max-width: 960px){
  .flow{
    grid-template-columns:1fr;
    gap:10px;
  }
  .flow-arrow{
    transform:rotate(90deg);
    min-height:20px;
  }
}
@media (max-width: 600px){
  .hero h1{
    font-size:29px;
  }
  .hero-lead{
    font-size:14px;
  }
  .product-head h3{
    font-size:22px;
  }
}
@media print{
  .flow{
    grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr !important;
  }
  .flow-arrow{
    min-width:24px !important;
  }
}


/* ===== Hero image overlap fix ===== */
.hero-device-frame{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  overflow:visible !important;
}
.hero-device-frame img{
  display:block !important;
  width:100% !important;
  height:210px !important;
  object-fit:contain !important;
  object-position:center !important;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.22));
}
.hero-device-frame .placeholder-inner{
  width:100%;
  height:100%;
  border:1.5px dashed rgba(255,255,255,.35);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  place-items:center;
  text-align:center;
  padding:20px;
  color:rgba(255,255,255,.75);
}
.hero-device-frame .placeholder-inner strong,
.hero-device-frame .placeholder-inner small{
  display:block;
}
.hero-vis-card{
  min-height:auto;
}
@media (max-width: 960px){
  .hero-device-frame{
    max-width:560px;
    margin-inline:auto;
  }
}


/* ===== Final approved light hero theme ===== */
.hero{
  background:
    radial-gradient(ellipse 760px 520px at 82% 24%, rgba(14,127,192,.12) 0%, transparent 68%),
    radial-gradient(ellipse 620px 420px at 12% 76%, rgba(14,165,160,.10) 0%, transparent 68%),
    linear-gradient(135deg,#f4fbff 0%,#eef8ff 56%,#fbfdff 100%) !important;
}
.hero::before{
  background:
    radial-gradient(ellipse 700px 500px at 78% 38%, rgba(14,127,192,.10) 0%, transparent 65%),
    radial-gradient(ellipse 480px 360px at 8% 88%, rgba(14,165,160,.08) 0%, transparent 65%) !important;
}
.hero::after{
  background-image: radial-gradient(rgba(14,127,192,.08) 1px, transparent 1px) !important;
}
.hero-eyebrow{
  background:#fff !important;
  border:1px solid #d8eaf4 !important;
  box-shadow:0 10px 30px rgba(14,127,192,.10);
}
.eyebrow-text{
  color:var(--blue-dk) !important;
}
.hero h1{
  color:var(--blue-dp) !important;
}
.hero h1 em{
  color:var(--blue) !important;
}
.hero-lead{
  color:#475569 !important;
}
.btn-hw-p{
  background:var(--blue) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(14,127,192,.24) !important;
}
.btn-hw-o{
  background:#fff !important;
  color:var(--blue-dk) !important;
  border:1.5px solid var(--blue) !important;
  box-shadow:0 8px 24px rgba(14,127,192,.10) !important;
}
.hero-badge-item{
  background:#fff !important;
  border:1px solid #e2edf4 !important;
  color:#334155 !important;
  box-shadow:0 8px 24px rgba(14,127,192,.08);
}
.hero-vis-card{
  background:#fff !important;
  border:1px solid #dceaf2 !important;
  box-shadow:0 24px 60px rgba(14,127,192,.16) !important;
}
.hero-vis-head{
  background:#fff !important;
  border:1px solid #dceaf2 !important;
  color:var(--blue) !important;
  box-shadow:0 10px 26px rgba(14,127,192,.10);
}
.hero-vis-note{
  color:#5c6f80 !important;
}
.hero-stat-row{
  display:none !important;
}
.hero-device-frame{
  background:linear-gradient(135deg,#0a5d8e,#0e7fc0) !important;
  border-radius:18px !important;
  padding:22px !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
.hero-device-frame img{
  filter:none !important;
  background:#fff;
  border-radius:2px;
  padding:0;
}
/*.fixed-cta a{
  box-shadow:0 8px 24px rgba(10,60,100,.18);
}*/
@media (max-width: 960px){
  .hero-inner{
    padding:56px 0 64px !important;
  }
}
@media (max-width: 600px){
  .hero h1{
    font-size:30px !important;
  }
  .hero-device-frame{
    padding:14px !important;
  }
}


/* ===== FINAL POLISH ===== */
.hero-inner{
  align-items:center !important;
}

.hero-copy{
  padding-top:10px;
}

.hero h1{
  line-height:1.08 !important;
  letter-spacing:-0.03em;
  max-width:780px;
}

.hero-device-frame{
  margin-top:22px !important;
}

.btn-hw-p,
.btn-hw-o{
  border-radius:14px !important;
}

.hero-badge-item{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
}

@media (max-width:960px){
  .hero-device-frame{
    max-width:440px !important;
    margin:18px auto 0 !important;
  }

  .hero h1{
    line-height:1.12 !important;
  }
}

@media (max-width:600px){
  .hero-inner{
    padding-top:40px !important;
  }

  .hero h1{
    font-size:28px !important;
    line-height:1.16 !important;
  }

  .hero-device-frame{
    max-width:320px !important;
  }

  .hero-lead{
    font-size:15px !important;
    line-height:1.9 !important;
  }

  .btn-hw-p,
  .btn-hw-o{
    width:100%;
    justify-content:center;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-badge-row{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== DESIGN IMPROVEMENT v2.1 ===== */

/* Section transition */
.diagram-box{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(14,127,192,.14) !important;
  box-shadow:0 18px 50px rgba(10,60,100,.10) !important;
}
.diagram-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(14,127,192,.08), transparent 34%),
    radial-gradient(circle at 88% 70%, rgba(14,165,160,.07), transparent 34%);
  pointer-events:none;
}
.diagram-box h3,
.diagram-box .flow{
  position:relative;
  z-index:1;
}
.diagram-box h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px !important;
}
.diagram-box h3::before{
  content:"";
  width:8px;
  height:22px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--blue),var(--teal));
}

/* Flow cards */
.flow-item{
  background:#fff !important;
  border:1px solid rgba(14,127,192,.12);
  box-shadow:0 10px 28px rgba(10,60,100,.08);
  min-height:102px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.flow-item:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(10,60,100,.13);
}
.flow-item:nth-child(3){
  border-color:rgba(14,127,192,.28);
  background:linear-gradient(180deg,#ffffff,#f0f9ff) !important;
}
.flow-item:nth-child(5){
  border-color:rgba(14,127,192,.28);
  background:linear-gradient(180deg,#ffffff,#eff8ff) !important;
}
.flow-arrow{
  color:var(--blue) !important;
  opacity:.78;
}

/* Navy solution section upgrade */
.sec-navy{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 780px 520px at 14% 18%, rgba(14,127,192,.22) 0%, transparent 65%),
    radial-gradient(ellipse 640px 480px at 86% 80%, rgba(14,165,160,.18) 0%, transparent 65%),
    linear-gradient(135deg,#071b2d 0%,#08243a 54%,#063d5e 100%) !important;
}
.sec-navy::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.sec-navy .wrap{
  position:relative;
  z-index:1;
}
.sec-navy .sec-head{
  margin-bottom:46px !important;
}
.sec-navy .sec-head h2{
  font-size:clamp(28px,3.8vw,40px) !important;
}
.sec-navy .sec-head p{
  max-width:780px;
  margin-inline:auto;
  font-size:15.5px !important;
}

/* Solution cards */
.sol-cards{
  gap:24px !important;
}
.sol-card{
  position:relative;
  overflow:hidden;
  padding:34px 30px !important;
  min-height:230px;
  background:rgba(255,255,255,.105) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sol-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--blue),#5dd6d3);
  opacity:.9;
}
.sol-card-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:24px !important;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  margin-bottom:18px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.sol-card h3{
  font-size:19px !important;
  line-height:1.55 !important;
  margin-bottom:14px !important;
}
.sol-card p{
  font-size:14.8px !important;
  line-height:1.95 !important;
  color:rgba(255,255,255,.72) !important;
}

/* Smooth section spacing */
.sec-white,
.sec-light,
.sec-navy{
  scroll-margin-top:90px;
}

/* Product cards subtle premium */
.product-card{
  border-color:rgba(14,127,192,.14) !important;
}
.product-card:hover{
  transform:translateY(-6px) !important;
}
.product-head{
  position:relative;
  overflow:hidden;
}
.product-head::after{
  content:"";
  position:absolute;
  right:-50px;
  top:-80px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}

/* Comparison table better readability */
.tbl-scroll{
  box-shadow:0 18px 46px rgba(10,60,100,.10) !important;
}
.evtable th{
  font-size:15px !important;
}
.evtable td{
  font-size:14.5px !important;
  line-height:1.65;
}

/* Contact polish */
.contact-form,
.info-card-row{
  border-color:rgba(14,127,192,.14) !important;
}
.contact-form{
  box-shadow:0 20px 54px rgba(10,60,100,.12) !important;
}

/* Mobile */
@media(max-width:960px){
  .flow-item{
    min-height:84px;
  }
  .sol-card{
    min-height:auto;
  }
}
@media(max-width:600px){
  .diagram-box{
    padding:24px 20px !important;
  }
  .flow-arrow{
    transform:rotate(90deg);
    opacity:.55;
  }
  .sol-card{
    padding:28px 24px !important;
  }
}


/* ===== Premium icon/photo visual redesign ===== */
.hero{
  background:
    radial-gradient(ellipse 760px 460px at 82% 24%, rgba(14,127,192,.13) 0%, transparent 68%),
    radial-gradient(ellipse 620px 420px at 6% 86%, rgba(14,165,160,.09) 0%, transparent 70%),
    linear-gradient(135deg,#f6fbff 0%,#edf7ff 56%,#fbfdff 100%) !important;
}
.hero::before{
  background:
    linear-gradient(115deg, transparent 0%, transparent 56%, rgba(14,127,192,.09) 56%, rgba(14,127,192,.02) 78%, transparent 78%),
    repeating-radial-gradient(ellipse at 78% 48%, rgba(14,127,192,.16) 0 1px, transparent 1px 14px) !important;
  opacity:.55;
}
.hero h1{color:#08243a!important;font-size:clamp(28px,3.5vw,49px)!important;line-height:1.18!important;letter-spacing:-.055em!important;max-width:850px!important}
.hero h1 em{background:linear-gradient(90deg,#0875db,#18a2e8);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero-lead{color:#23384e!important;font-size:16px!important;line-height:2!important;max-width:720px!important}
.btn-hw{gap:10px!important;border-radius:15px!important;min-height:60px}
.btn-icon{display:inline-grid;place-items:center;width:22px;height:22px;font-size:16px}
.btn-hw-p{background:linear-gradient(135deg,#0875db,#005dce)!important;color:#fff!important;box-shadow:0 14px 34px rgba(0,93,206,.24)!important}
.btn-hw-o{background:#fff!important;color:#075fa8!important;border:1.6px solid #0875db!important;box-shadow:0 12px 30px rgba(14,127,192,.10)!important}
.hero-badges{gap:14px!important}
.hero-badge-item{background:#fff!important;border:1px solid #e1edf5!important;border-radius:14px!important;color:#0d2740!important;box-shadow:0 12px 30px rgba(10,60,100,.09)!important;min-height:58px!important;padding:12px 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;white-space:normal;font-weight:800!important}
.hero-badge-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;color:#fff;font-size:17px;font-weight:900;flex:0 0 auto}
.hero-badge-icon.bluetooth{background:linear-gradient(135deg,#0875db,#18a2e8)}
.hero-badge-icon.ocpp{background:linear-gradient(135deg,#0875db,#5dd6d3)}
.hero-badge-icon.money{background:linear-gradient(135deg,#093c6d,#0875db)}
.hero-badge-icon.calendar{background:linear-gradient(135deg,#0a5d8e,#0ea5a0)}
.hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr)!important;gap:clamp(42px,5.5vw,86px)!important}
.hero-vis-card{background:#fff!important;border:1px solid #d9e8f3!important;border-radius:22px!important;box-shadow:0 26px 70px rgba(10,60,100,.15)!important;padding:24px!important}
.hero-vis-head{background:#fff!important;color:#0875db!important;font-weight:900!important;border:1px solid #dcecf6!important;border-radius:999px!important;padding:9px 18px!important}
.hero-device-frame{margin-top:16px!important;background:linear-gradient(135deg,#0e7fc0,#004f9e)!important;border-radius:16px!important;padding:18px!important;aspect-ratio:1.78!important;overflow:hidden!important}
.hero-device-frame img{width:100%!important;height:100%!important;max-height:210px!important;object-fit:cover!important;object-position:center!important;background:#fff!important;border-radius:10px!important}
.hero-vis-note{margin:0 -24px -24px!important;padding:20px 24px!important;background:linear-gradient(135deg,#003b83,#0066bd)!important;color:#fff!important;font-size:15px!important;line-height:1.8!important;font-weight:800!important;border-radius:0 0 22px 22px!important}
.hero-stat-row{display:none!important}
.diagram-box{margin-top:26px!important;padding:32px 36px!important;border:1px solid rgba(14,127,192,.12)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 18px 55px rgba(10,60,100,.10)!important}
.diagram-box h3{color:#081d33!important;font-size:20px!important;font-weight:900!important;margin-bottom:24px!important}
.diagram-box h3::before{display:none!important}
.flow{grid-template-columns:1fr 34px 1.18fr 34px 1.18fr 34px 1fr 34px 1fr!important}
.flow-item{background:linear-gradient(180deg,#fff,#f8fbff)!important;border:1px solid #dce8f3!important;border-radius:16px!important;min-height:112px!important;box-shadow:0 12px 34px rgba(10,60,100,.08)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.flow-item strong{font-size:15px!important;font-weight:900!important;color:#0d2740!important}
.flow-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-size:24px;font-weight:900;color:#0875db}
.flow-icon.chart{color:#2cb7d6;font-size:18px;letter-spacing:-4px}
.active-flow{border-color:#0875db!important;background:linear-gradient(180deg,#fff,#edf8ff)!important;box-shadow:0 14px 38px rgba(8,117,219,.14)!important}
.active-flow span,.active-flow strong{color:#075fa8!important}
.flow-arrow{color:#0875db!important;font-size:24px!important;opacity:.85!important}
.sec-navy{background:radial-gradient(ellipse 640px 360px at 20% 0%,rgba(8,117,219,.28),transparent 70%),radial-gradient(ellipse 620px 430px at 84% 84%,rgba(14,165,160,.18),transparent 68%),linear-gradient(135deg,#061b31 0%,#06223d 52%,#041a2e 100%)!important;padding-top:70px!important}
.sec-navy .sec-head h2{font-size:clamp(32px,3.4vw,45px)!important;font-weight:900!important;color:#fff!important}
.sec-navy .sec-head h2 span{color:#36d1c9!important}
.sec-navy .sec-head p{color:rgba(255,255,255,.78)!important}
.sol-cards{grid-template-columns:repeat(3,1fr)!important;gap:22px!important}
.sol-card{min-height:240px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:16px!important;padding:28px!important;backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.18)!important}
.sol-card::after{display:none!important}
.sol-card-icon{width:70px!important;height:70px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:34px!important;color:#fff!important;margin-bottom:18px!important;box-shadow:0 18px 38px rgba(0,0,0,.22)!important}
.sol-bluetooth{background:linear-gradient(135deg,#19d5bd,#0ca2de)!important}
.sol-cloud{background:linear-gradient(135deg,#0875db,#1f6fff)!important}
.sol-chat{background:linear-gradient(135deg,#7b5cff,#35a7ff)!important}
.sol-card h3{color:#fff!important;font-size:20px!important;font-weight:900!important;line-height:1.55!important}
.sol-card p{color:rgba(255,255,255,.78)!important;font-size:14.5px!important;line-height:1.9!important}
.solution-pill{width:max-content;min-width:142px;text-align:center;margin:20px auto 0;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:900;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.ble-pill{color:#2ee6d2}.ocpp-pill{color:#2d8cff}.support-pill{color:#a68bff}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr!important}.hero-vis-card{max-width:620px;margin-inline:auto;overflow:hidden}.flow{grid-template-columns:1fr!important;gap:10px!important}.flow-arrow{transform:rotate(90deg)}.sol-cards{grid-template-columns:1fr!important}.hero-vis-note{margin:12px 0 0!important;padding:14px 16px!important;border-radius:12px!important}}
@media(max-width:600px){.hero h1{font-size:32px!important;line-height:1.24!important;word-break:auto!important;overflow-wrap:anywhere!important}.hero-badges{grid-template-columns:1fr!important}.hero-badge-item{justify-content:flex-start!important;white-space:normal!important}.hero-vis-note{font-size:13px!important;margin:12px 0 0!important;padding:12px 14px!important;border-radius:12px!important}.diagram-box{padding:24px 18px!important}}


/* ===== MOBILE RESPONSIVE FINAL FIX ===== */
@media (max-width: 960px){
  .wrap{
    width:min(100% - 32px, var(--max)) !important;
  }

  .topbar .wrap{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
  }

  .header-inner{
    padding:12px 0 !important;
  }

  .logo-name{
    font-size:22px !important;
  }

  .logo-sub{
    font-size:10px !important;
  }

  .nav-cta{
    display:none !important;
  }

  .hero-inner{
    grid-template-columns:1fr !important;
    gap:34px !important;
    padding:44px 0 54px !important;
  }

  .hero h1{
    max-width:100% !important;
    font-size:clamp(32px, 8vw, 44px) !important;
    line-height:1.22 !important;
    letter-spacing:-.04em !important;
    word-break:auto !important;
    overflow-wrap:anywhere !important;
  }

  .hero-lead{
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.95 !important;
  }

  .hero-btns{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .btn-hw{
    min-height:54px !important;
    padding:12px 14px !important;
    font-size:14px !important;
    justify-content:center !important;
  }

  .hero-badges{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .hero-badge-item{
    min-height:58px !important;
    padding:10px 12px !important;
    white-space:normal !important;
    text-align:left !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .hero-badge-icon{
    width:24px !important;
    height:24px !important;
    font-size:15px !important;
  }

  .hero-vis-card{
    max-width:620px !important;
    width:100% !important;
    margin-inline:auto !important;
    padding:18px !important;
  }

  .hero-device-frame{
    aspect-ratio:1.55 !important;
    padding:12px !important;
  }

  .hero-device-frame img{
    object-fit:contain !important;
  }

  .hero-vis-note{
    margin:12px 0 0 !important;
    padding:14px 16px !important;
    font-size:13px !important;
    border-radius:12px !important;
  }

  .product-grid{
    grid-template-columns:1fr !important;
  }

  .product-card{
    border-radius:18px !important;
  }

  .product-image{
    min-height:220px !important;
    aspect-ratio:16/11 !important;
    padding:18px 18px 8px !important;
  }

  .product-image img{
    max-height:220px !important;
    object-fit:contain !important;
  }

  .feature-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .flow{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .flow-arrow{
    transform:rotate(90deg) !important;
    min-height:20px !important;
    line-height:1 !important;
  }

  .flow-item{
    min-height:88px !important;
  }

  .image-grid,
  .contact-grid,
  .sol-cards{
    grid-template-columns:1fr !important;
  }

  .sol-card{
    min-height:auto !important;
  }

  /*.fixed-cta{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    flex-direction:row !important;
  }

  .fixed-cta a{
    flex:1 !important;
    font-size:13px !important;
    padding:12px 10px !important;
  }*/

  body{
    padding-bottom:72px !important;
  }
}

@media (max-width: 600px){
  .wrap{
    width:min(100% - 24px, var(--max)) !important;
  }

  .topbar{
    font-size:11px !important;
  }

  .logo-mark{
    width:36px !important;
    height:36px !important;
    font-size:11px !important;
  }

  .logo-name{
    font-size:20px !important;
  }

  .hero{
    overflow:hidden !important;
  }

  .hero-inner{
    padding:34px 0 44px !important;
    gap:28px !important;
  }

  .hero-eyebrow{
    padding:6px 12px !important;
    margin-bottom:16px !important;
  }

  .eyebrow-text{
    font-size:11px !important;
  }

  .hero h1{
    font-size:31px !important;
    line-height:1.25 !important;
    letter-spacing:-.035em !important;
  }

  .hero-lead{
    font-size:14px !important;
    line-height:1.9 !important;
    margin-bottom:24px !important;
  }

  .hero-btns{
    grid-template-columns:1fr !important;
  }

  .btn-hw{
    width:100% !important;
  }

  .hero-badges{
    grid-template-columns:1fr !important;
    margin-top:20px !important;
  }

  .hero-badge-item{
    min-height:54px !important;
    justify-content:flex-start !important;
    white-space:normal !important;
    font-size:12px !important;
    padding:10px 12px !important;
  }

  .hero-vis-card{
    padding:14px !important;
    border-radius:18px !important;
  }

  .hero-vis-head{
    font-size:12px !important;
    padding:7px 14px !important;
    margin-bottom:12px !important;
  }

  .hero-device-frame{
    aspect-ratio:1.35 !important;
    padding:10px !important;
    border-radius:14px !important;
    margin-bottom: 20px !important;
  }

  .hero-vis-note{
    margin:12px 0 0 !important;
    padding:12px 14px !important;
    font-size:12px !important;
    line-height:1.7 !important;
    border-radius:12px !important;
  }

  section{
    padding:54px 0 !important;
  }

  .sec-head{
    margin-bottom:32px !important;
  }

  .sec-head h2{
    font-size:27px !important;
  }

  .sec-head .desc,
  .sec-head p{
    font-size:14px !important;
  }

  .product-head{
    padding:20px 20px !important;
  }

  .product-head h3{
    font-size:22px !important;
  }

  .product-body{
    padding:22px 20px !important;
  }

  .feature-grid{
    grid-template-columns:1fr !important;
  }

  .price-num{
    font-size:25px !important;
  }

  .diagram-box{
    padding:22px 16px !important;
    border-radius:16px !important;
  }

  .diagram-box h3{
    font-size:18px !important;
  }

  .flow-item{
    min-height:82px !important;
  }

  .flow-item strong{
    font-size:14px !important;
  }

  .image-card .img{
    min-height:190px !important;
    padding:16px !important;
  }

  .image-card .txt{
    padding:20px !important;
  }

  .tbl-scroll{
    margin-inline:0 !important;
    max-width:100% !important;
    -webkit-overflow-scrolling:touch;
  }

  .evtable{
    min-width:560px !important;
  }

  .sol-card{
    padding:24px 20px !important;
  }

  .sol-card-icon{
    width:58px !important;
    height:58px !important;
    font-size:28px !important;
  }

  .contact-form{
    padding:24px 18px !important;
  }

  .form-grid{
    grid-template-columns:1fr !important;
  }

  footer{
    padding-bottom:88px !important;
  }
}

@media (max-width: 480px){
  .evstand-control-unit .wrap,
  .evstand-products-page .wrap{
    width:min(100% - 16px, var(--max)) !important;
  }

  .evstand-control-unit,
  .evstand-products-page{
    overflow-x:clip;
  }

  .hero-inner > *,
  .hero-visual,
  .hero-vis-card,
  .hero-copy,
  .product-card,
  .contact-grid > *,
  .image-card{
    min-width:0;
    max-width:100%;
  }

  .hero-eyebrow{
    max-width:100%;
    flex-wrap:wrap;
    row-gap:6px;
  }

  .eyebrow-text{
    line-height:1.45;
  }

  .hero h1{
    font-size:clamp(22px, 7vw, 28px) !important;
    line-height:1.3 !important;
    letter-spacing:-.03em !important;
  }

  .hero-lead{
    font-size:13px !important;
    line-height:1.85 !important;
  }

  .btn-hw{
    font-size:13px !important;
    padding:12px 10px !important;
    min-height:48px !important;
  }

  .btn-icon-img{
    width:18px !important;
    height:18px !important;
    margin-right:6px !important;
  }

  .hero-device-frame{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .hero-device-frame img{
    height:auto !important;
    max-height:180px !important;
  }

  .hero-vis-card{
    padding:12px !important;
  }

  .sec-head h2{
    font-size:clamp(22px, 6.5vw, 26px) !important;
  }

  .product-head{
    padding:16px 14px !important;
  }

  .product-head h3{
    font-size:19px !important;
    line-height:1.35 !important;
  }

  .product-body{
    padding:18px 14px !important;
  }

  .feature-grid{
    grid-template-columns:1fr !important;
  }

  .feature{
    font-size:12px !important;
    padding:9px 10px !important;
  }

  .price-num{
    font-size:22px !important;
  }

  .contact-info h2{
    font-size:clamp(22px, 6.5vw, 26px) !important;
  }

  .info-val,
  .info-card-row,
  .notice-bar,
  .sec-head .desc,
  .sec-head p{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .solution-pill{
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    line-height:1.45 !important;
  }

  .evstand-control-unit .contact-form,
  .evstand-control-unit .contact-form input,
  .evstand-control-unit .contact-form select,
  .evstand-control-unit .contact-form textarea,
  .evstand-control-unit .mw_wp_form,
  .evstand-control-unit .mw_wp_form *{
    max-width:100% !important;
    box-sizing:border-box;
  }
}

@media (max-width: 320px){
  .hero h1{
    font-size:21px !important;
  }

  .hero-lead{
    font-size:12.5px !important;
  }

  .btn-hw{
    font-size:12px !important;
    padding:11px 8px !important;
  }

  .hero-badge-item{
    font-size:11.5px !important;
  }

  .sec-head h2{
    font-size:21px !important;
  }

  .product-head h3{
    font-size:18px !important;
  }

  .contact-form{
    padding:20px 12px !important;
  }
}


/* ===== External icon folder setup ===== */
.badge-icon-img,
.btn-icon-img,
.flow-icon-img,
.solution-icon-img,
.fixed-icon-img{
  display:inline-block;
  object-fit:contain;
  flex-shrink:0;
}

.badge-icon-img{
  width:22px;
  height:22px;
}

.btn-icon-img{
  width:20px;
  height:20px;
  margin-right:8px;
  vertical-align:-4px;
}

.flow-icon-img{
  width:34px;
  height:34px;
  margin-bottom:4px;
}

.solution-icon-img{
  width:34px;
  height:34px;
  filter:brightness(0) invert(1);
}

.fixed-icon-img{
  width:16px;
  height:16px;
  margin-right:6px;
  vertical-align:-3px;
  filter:brightness(0) invert(1);
}

.hero-badge-item{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

.sol-card-icon{
  display:grid !important;
  place-items:center !important;
}

@media(max-width:600px){
  .badge-icon-img{
    width:20px;
    height:20px;
  }
  .flow-icon-img{
    width:30px;
    height:30px;
  }
}