/* =========================================================================
   Case — Electricon
   Mobile EV charging. Dark navy + electric green + warning yellow.
   Type: IBM Plex Sans + IBM Plex Mono.
   ========================================================================= */

.case--electricon {
	background: #0B1220;
	color: #E7F1FF;
	font-family: 'IBM Plex Sans', sans-serif;
}

.ec-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: .78rem; letter-spacing: .14em;
	text-transform: uppercase; color: #00E5A8;
	margin: 0 0 1em;
	display: inline-flex; align-items: center; gap: .6em;
}
.ec-eyebrow--yellow { color: #FFD23F; }

.ec-h2 {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -.015em;
	margin: 0 0 .6em;
}

.ec-btn {
	display: inline-block;
	padding: 14px 24px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: transform .25s var(--ac-ease-out), background .25s, box-shadow .25s;
}
.ec-btn--pri {
	background: #00E5A8; color: #0B1220;
	box-shadow: 0 10px 28px -10px rgba(0,229,168,.5);
}
.ec-btn--pri:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(0,229,168,.7); }
.ec-btn--ghost { background: transparent; color: #E7F1FF; border: 1px solid rgba(231,241,255,.2); }
.ec-btn--ghost:hover { border-color: #E7F1FF; transform: translateY(-2px); }

/* ---------- HERO ---------- */
.ec-hero {
	position: relative;
	padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 9vw, 100px);
	overflow: hidden;
	background:
		radial-gradient(50% 60% at 80% 20%, rgba(0,229,168,.15), transparent 60%),
		radial-gradient(40% 50% at 20% 100%, rgba(255,210,63,.08), transparent 60%);
}
.ec-hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(0,229,168,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,229,168,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(80% 60% at 50% 50%, #000, transparent 80%);
	-webkit-mask-image: radial-gradient(80% 60% at 50% 50%, #000, transparent 80%);
}
.ec-hero__pulse {
	position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(0,229,168,.25) 0%, transparent 50%);
	border-radius: 50%;
	filter: blur(40px);
	animation: ec-pulse 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes ec-pulse { 0%,100% { opacity: .4; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .8; transform: translate(-50%,-50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ec-hero__pulse { animation: none; } }

.ec-hero__inner {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: 60px; align-items: center;
}
@media (max-width: 980px) { .ec-hero__inner { grid-template-columns: 1fr; } }

.ec-title {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 7vw, 5rem);
	line-height: .95; letter-spacing: -.025em;
	margin: 0 0 .4em;
}
.ec-title__line { display: block; }
.ec-title__line--bolt {
	color: transparent;
	background: linear-gradient(95deg, #00E5A8 0%, #FFD23F 100%);
	-webkit-background-clip: text; background-clip: text;
}
.ec-tagline {
	font-size: clamp(1rem, 1.45vw, 1.18rem);
	color: #9FB1CC; max-width: 56ch; line-height: 1.55;
	margin: 0 0 32px;
}
.ec-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Vehicle illustration ---------- */
.ec-vehicle {
	position: relative;
	width: 100%; aspect-ratio: 4/3;
	min-height: 320px;
}
@media (max-width: 980px) { .ec-vehicle { min-height: 280px; } }

.ec-van, .ec-car {
	position: absolute;
	bottom: 22%;
}
.ec-van { left: 0; width: 38%; }
.ec-car { right: 0; width: 32%; }

.ec-van__body {
	width: 100%; aspect-ratio: 2.2/1;
	background: linear-gradient(180deg, #00E5A8 0%, #00B589 100%);
	border-radius: 12px 8px 4px 4px;
	position: relative;
	box-shadow: 0 10px 30px -10px rgba(0,229,168,.4);
}
.ec-van__body::after {
	content: 'ELECTRICON';
	position: absolute; top: 40%; left: 12%;
	font-family: 'IBM Plex Mono', monospace; font-weight: 500;
	font-size: clamp(.6rem, 1.1vw, .9rem);
	letter-spacing: .15em; color: #0B1220;
}
.ec-van__window {
	position: absolute; top: -28%; right: 8%;
	width: 35%; aspect-ratio: 1.3/1;
	background: linear-gradient(180deg, #14283A 0%, #1B3A55 100%);
	border-radius: 8px 8px 0 0;
}
.ec-van__cab {
	position: absolute; top: -8%; right: 6%;
	width: 40%; aspect-ratio: 1.5/1;
	background: #00C094;
	border-radius: 14px 8px 0 0;
	z-index: -1;
}
.ec-van__wheel {
	position: absolute; bottom: -14%;
	width: 18%; aspect-ratio: 1;
	background: radial-gradient(circle at 30% 30%, #444, #111);
	border-radius: 50%;
	border: 2px solid #222;
}
.ec-van__wheel--front { left: 12%; }
.ec-van__wheel--back  { right: 12%; }

.ec-van__bolt {
	position: absolute; top: -12%; left: 8%;
	width: 24px; height: 24px;
	background: #FFD23F; color: #0B1220;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: .9rem; font-weight: 700;
	animation: ec-bolt-spin 3s ease-in-out infinite;
	box-shadow: 0 0 16px rgba(255,210,63,.6);
}
@keyframes ec-bolt-spin { 0%,100%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(15deg) scale(1.1);} }
@media (prefers-reduced-motion: reduce) { .ec-van__bolt { animation: none; } }

.ec-cable {
	position: absolute;
	bottom: 36%; left: 32%; right: 30%;
	height: 4px;
	background: linear-gradient(90deg, #FFD23F 0%, #00E5A8 100%);
	border-radius: 2px;
	transform-origin: 0 50%;
	animation: ec-cable-wave 2.5s ease-in-out infinite;
}
.ec-cable::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
	animation: ec-cable-spark 1.6s linear infinite;
}
@keyframes ec-cable-wave { 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }
@keyframes ec-cable-spark { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .ec-cable, .ec-cable::after { animation: none; } }

.ec-car__body {
	width: 100%; aspect-ratio: 2.6/1;
	background: linear-gradient(180deg, #1B3A55 0%, #0E2235 100%);
	border-radius: 30px 50px 4px 4px;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.ec-car__roof {
	position: absolute; top: -45%; left: 25%; right: 15%;
	aspect-ratio: 3/1;
	background: linear-gradient(180deg, #2B4A66 0%, #1B3A55 100%);
	border-radius: 28px 14px 0 0;
	z-index: -1;
}
.ec-car__wheel {
	position: absolute; bottom: -14%;
	width: 18%; aspect-ratio: 1;
	background: radial-gradient(circle at 30% 30%, #444, #111);
	border-radius: 50%;
	border: 2px solid #222;
}
.ec-car__wheel--front { left: 15%; }
.ec-car__wheel--back  { right: 15%; }
.ec-car__port {
	position: absolute; top: 25%; left: -3%;
	width: 8%; aspect-ratio: 1;
	background: #FFD23F;
	border-radius: 50%;
	box-shadow: 0 0 12px #FFD23F;
	animation: ec-port-pulse 1.6s ease-in-out infinite;
}
@keyframes ec-port-pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
@media (prefers-reduced-motion: reduce) { .ec-car__port { animation: none; } }

.ec-battery {
	position: absolute; top: 8%; right: 0;
	display: flex; align-items: center; gap: 10px;
}
.ec-battery__shell {
	width: 90px; height: 36px;
	border: 2px solid #00E5A8;
	border-radius: 4px;
	position: relative;
	padding: 3px;
	overflow: hidden;
}
.ec-battery__shell::after {
	content: ''; position: absolute; right: -8px; top: 8px;
	width: 6px; height: 16px;
	background: #00E5A8;
	border-radius: 0 2px 2px 0;
}
.ec-battery__fill {
	height: 100%;
	background: linear-gradient(90deg, #00E5A8, #FFD23F);
	border-radius: 2px;
	width: 0;
	transition: width 3s cubic-bezier(.25,.8,.25,1);
}
.ec-battery__label {
	font-family: 'IBM Plex Mono', monospace; font-weight: 500;
	font-size: 1rem;
	color: #00E5A8;
}

/* ---------- MARQUEE ---------- */
.ec-marquee {
	overflow: hidden;
	border-top: 1px solid rgba(0,229,168,.15);
	border-bottom: 1px solid rgba(0,229,168,.15);
	background: #06090F;
	padding: 18px 0;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ec-marquee__track {
	display: flex; gap: 30px; white-space: nowrap;
	animation: ec-marquee 32s linear infinite;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1rem; letter-spacing: .14em;
	color: #5A6A82;
}
.ec-marquee__track span:nth-child(odd) { color: #00E5A8; }
@keyframes ec-marquee { from { transform: translate3d(0,0,0);} to { transform: translate3d(-50%,0,0);} }
@media (prefers-reduced-motion: reduce) { .ec-marquee__track { animation: none; } }

/* ---------- SECTIONS ---------- */
.ec-section {
	padding: clamp(70px, 10vw, 130px) 0;
	border-top: 1px solid rgba(0,229,168,.08);
}
.ec-section--dark { background: #06090F; }
.ec-split {
	display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start;
}
@media (max-width: 880px) { .ec-split { grid-template-columns: 1fr; gap: 20px; } }
.ec-split p { color: #9FB1CC; margin: 0 0 1em; max-width: 60ch; line-height: 1.6; }
.ec-split p:last-child { margin-bottom: 0; }

/* ---------- STEPS ---------- */
.ec-steps {
	list-style: none; padding: 0; margin: 40px 0 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	counter-reset: step;
}
@media (max-width: 880px) { .ec-steps { grid-template-columns: 1fr; } }
.ec-step {
	background: rgba(0,229,168,.04);
	border: 1px solid rgba(0,229,168,.18);
	border-radius: 8px;
	padding: 28px;
	position: relative;
	transition: transform .35s var(--ac-ease-out), border-color .25s, background .25s;
}
.ec-step:hover { transform: translateY(-4px); border-color: #00E5A8; background: rgba(0,229,168,.08); }
.ec-step__num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 2.4rem; line-height: 1; font-weight: 500;
	color: #00E5A8;
	display: block; margin-bottom: 18px;
}
.ec-step h3 {
	font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
	font-size: 1.15rem; margin: 0 0 8px; letter-spacing: -.005em;
}
.ec-step p { color: #9FB1CC; line-height: 1.55; font-size: .92rem; margin: 0; }

/* ---------- STATS ---------- */
.ec-stats {
	padding: clamp(50px, 7vw, 90px) 0;
	background: linear-gradient(180deg, #06090F 0%, #0B1220 100%);
	border-top: 1px solid rgba(0,229,168,.15);
}
.ec-stats__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 760px) { .ec-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.ec-stat { text-align: left; border-left: 2px solid #00E5A8; padding-left: 20px; }
.ec-stat:nth-child(2n) { border-color: #FFD23F; }
.ec-stat__num {
	font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
	color: #00E5A8;
}
.ec-stat:nth-child(2n) .ec-stat__num { color: #FFD23F; }
.ec-stat__label {
	margin-top: 10px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: .78rem; letter-spacing: .1em;
	text-transform: uppercase; color: #5A6A82;
}

/* ---------- PLANS ---------- */
.ec-plans {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	margin-top: 40px;
}
@media (max-width: 880px) { .ec-plans { grid-template-columns: 1fr; } }
.ec-plan {
	background: #06090F;
	border: 1px solid rgba(0,229,168,.15);
	border-radius: 12px;
	padding: 32px;
	transition: transform .35s var(--ac-ease-out), border-color .25s;
	position: relative;
}
.ec-plan:hover { transform: translateY(-4px); border-color: rgba(0,229,168,.4); }
.ec-plan--featured {
	background: linear-gradient(180deg, rgba(0,229,168,.08) 0%, #06090F 100%);
	border-color: #00E5A8;
	box-shadow: 0 20px 60px -20px rgba(0,229,168,.3);
}
.ec-plan__tag {
	font-family: 'IBM Plex Mono', monospace;
	font-size: .7rem; letter-spacing: .18em;
	color: #FFD23F; margin-bottom: 18px;
}
.ec-plan__price {
	font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
	font-size: 3.4rem; line-height: 1;
	color: #E7F1FF;
	margin-bottom: 24px;
}
.ec-plan__price span { font-size: 1.6rem; vertical-align: top; margin-right: 4px; color: #00E5A8; }
.ec-plan__price small { font-size: 1rem; color: #5A6A82; font-weight: 400; margin-left: 4px; }
.ec-plan ul { list-style: none; padding: 0; margin: 0; }
.ec-plan li {
	padding: 10px 0;
	border-bottom: 1px dashed rgba(0,229,168,.1);
	font-size: .94rem; color: #9FB1CC;
	position: relative; padding-left: 22px;
}
.ec-plan li::before {
	content: '✓'; position: absolute; left: 0; top: 10px;
	color: #00E5A8; font-weight: 700;
}
.ec-plan li:last-child { border-bottom: 0; }
.ec-plan__ribbon {
	position: absolute; top: -10px; right: 20px;
	background: #FFD23F; color: #0B1220;
	padding: 4px 12px; border-radius: 100px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: .68rem; letter-spacing: .14em;
	font-weight: 500;
}

/* ---------- QUOTES ---------- */
.ec-quotes {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
	margin-top: 40px;
}
@media (max-width: 880px) { .ec-quotes { grid-template-columns: 1fr; } }
.ec-quote {
	background: rgba(0,229,168,.04);
	border-left: 2px solid #00E5A8;
	padding: 28px;
	margin: 0;
	border-radius: 0 6px 6px 0;
}
.ec-quote:nth-child(2n) { border-left-color: #FFD23F; }
.ec-quote blockquote {
	margin: 0 0 18px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-style: italic; font-size: 1.05rem;
	color: #E7F1FF; line-height: 1.5;
}
.ec-quote figcaption {
	display: flex; flex-direction: column;
	font-family: 'IBM Plex Mono', monospace;
	font-size: .8rem; letter-spacing: .04em; color: #5A6A82;
}
.ec-quote figcaption strong { color: #00E5A8; font-weight: 500; margin-bottom: 2px; }

/* ---------- STACK ---------- */
.ec-stack-row {
	display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start;
}
@media (max-width: 880px) { .ec-stack-row { grid-template-columns: 1fr; gap: 24px; } }
.ec-stack {
	display: grid; grid-template-columns: max-content 1fr; gap: 16px 32px;
	margin: 0;
	background: rgba(0,229,168,.04);
	border: 1px solid rgba(0,229,168,.15);
	padding: 30px; border-radius: 8px;
}
@media (max-width: 600px) { .ec-stack { grid-template-columns: 1fr; gap: 4px 0; } }
.ec-stack dt {
	font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .12em;
	text-transform: uppercase; color: #00E5A8; padding-top: 4px;
}
.ec-stack dd { margin: 0; color: #E7F1FF; font-size: .98rem; line-height: 1.5; }
@media (max-width: 600px) {
	.ec-stack dd { padding-bottom: 14px; border-bottom: 1px dashed rgba(0,229,168,.1); margin-bottom: 8px; }
}