@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ================================================================
   EV NEXO MART HERO WIDGET  v3.1
   FIXES:
   - z-index: auto on section so it never bleeds into site header
   - overflow-x: clip instead of hidden so vertical scroll works
   - max-width: 100% on all children prevents right-side clipping
   - padding accounts for sticky header on all breakpoints
   - isolation: isolate creates a new stacking context inside hero
================================================================ */

/* ---- CSS Tokens ---- */
.evnm-hero {
    --evnm-green:  #00A651;
    --evnm-glt:    #00d068;
    --evnm-white:  #ffffff;
    --evnm-silver: #94a3b8;
    --evnm-ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --evnm-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Scoped reset ---- */
.evnm-hero *, .evnm-hero *::before, .evnm-hero *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ================================================================
   SECTION
   KEY FIXES:
   1. isolation: isolate  -> new stacking context, never goes above
      the site header/nav which lives outside this element
   2. overflow-x: clip    -> stops horizontal bleed without blocking
      position:sticky children (unlike overflow:hidden)
   3. No z-index on the section itself -> sits in normal document flow
================================================================ */
.evnm-hero {
    position: relative;
    width: 100%;
    min-height: 96vh;
    display: flex;
    align-items: center;
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 50% at 50% -5%,  rgba(0,166,81,.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 96% 106%,  rgba(0,166,81,.09) 0%, transparent 55%),
        radial-gradient(ellipse 40% 55% at -4% 56%,   rgba(0,166,81,.05) 0%, transparent 50%),
        linear-gradient(165deg, #020c06 0%, #041208 45%, #03080f 100%);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Ensure section never goes above site header */
    z-index: 0;
}

/* ================================================================
   HEADER OVERLAP FIX
   The hero widget sits inside Elementor's page canvas which starts
   at top:0, underneath a fixed/sticky site header.
   These rules push the hero content down so it never hides behind
   the navigation bar on any device.

   How it works:
   - We do NOT move the section itself (that breaks full-bleed bg)
   - We add padding-top to .evnm-inner equal to the header height
   - The Elementor wrapper (.elementor-section, .e-con) gets a
     negative margin fix so the dark background still fills edge-to-edge

   If your theme header is taller/shorter, adjust --evnm-header-h
   in Elementor > Custom CSS on this widget.
================================================================ */

/* Default header height variable - override in Elementor Custom CSS
   if your header is a different height */
.evnm-hero {
    --evnm-header-h: 80px;
}

/* Push inner content below the header */
.evnm-inner {
    padding-top: calc(var(--evnm-header-h) + 40px) !important;
}

/* On desktop the header is usually smaller relative to content */
@media (min-width: 1025px) {
    .evnm-hero { --evnm-header-h: 80px; }
    .evnm-inner { padding-top: calc(var(--evnm-header-h) + 40px) !important; }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
    .evnm-hero { --evnm-header-h: 70px; }
    .evnm-inner { padding-top: calc(var(--evnm-header-h) + 30px) !important; }
}

/* Mobile - header is often taller due to search bar */
@media (max-width: 767px) {
    .evnm-hero { --evnm-header-h: 130px; }
    .evnm-inner { padding-top: calc(var(--evnm-header-h) + 20px) !important; }
}

/* XS phone */
@media (max-width: 479px) {
    .evnm-hero { --evnm-header-h: 130px; }
    .evnm-inner { padding-top: calc(var(--evnm-header-h) + 16px) !important; }
}

/* Also make sure no absolutely-positioned child leaks above the section */
.evnm-canvas,
.evnm-bg,
.evnm-grid-overlay,
.evnm-scanline,
.evnm-svg-circuits,
.evnm-rings,
.evnm-streaks {
    z-index: 1;
    pointer-events: none;
}

/* ================================================================
   CANVAS
================================================================ */
.evnm-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
}

/* ================================================================
   BACKGROUND IMAGES
================================================================ */
.evnm-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.evnm-bg-img {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    opacity: 0;
    animation: evnm-bgfade 2s ease forwards;
}

.evnm-bg-img-1 {
    width: 420px; height: 310px;
    top: 4%; right: 2%;
    background-image: url('https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=600&q=60');
    filter: blur(1px) brightness(0.2) saturate(1.4) hue-rotate(100deg);
    animation-delay: .3s;
}

.evnm-bg-img-2 {
    width: 350px; height: 270px;
    bottom: 12%; right: 7%;
    background-image: url('https://images.unsplash.com/photo-1620714223084-8fcacc2dbed5?w=600&q=60');
    filter: blur(1.5px) brightness(0.16) saturate(1.6) hue-rotate(110deg);
    animation-delay: .6s;
}

.evnm-bg-img-3 {
    width: 260px; height: 380px;
    top: 18%; right: 27%;
    background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=60');
    filter: blur(2px) brightness(0.12) saturate(1.8) hue-rotate(120deg);
    animation-delay: .9s;
}

@keyframes evnm-bgfade {
    from { opacity: 0; transform: scale(1.1); }
    to   { opacity: 1; transform: scale(1);   }
}

.evnm-bg-mask {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, #020c06 30%, rgba(2,12,6,.75) 55%, rgba(2,12,6,.4) 100%),
        linear-gradient(to bottom, #020c06 0%, transparent 14%, transparent 86%, #03080f 100%);
}

/* ================================================================
   DOT GRID
================================================================ */
.evnm-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        linear-gradient(rgba(0,166,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,166,81,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 25%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 25%, transparent 100%);
    animation: evnm-grid 45s linear infinite;
}

@keyframes evnm-grid {
    from { background-position: 0 0; }
    to   { background-position: 56px 56px; }
}

/* ================================================================
   SCAN LINE
================================================================ */
.evnm-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,166,81,0) 15%,
        rgba(0,166,81,.55) 42%,
        rgba(0,208,104,.95) 50%,
        rgba(0,166,81,.55) 58%,
        rgba(0,166,81,0) 85%,
        transparent 100%);
    pointer-events: none;
    z-index: 3;
    filter: blur(1px);
    animation: evnm-scan 9s ease-in-out infinite;
}

@keyframes evnm-scan {
    0%   { top: -2px; opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: .35; }
    100% { top: 100%; opacity: 0; }
}

/* ================================================================
   CORNER ACCENTS
================================================================ */
.evnm-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    animation: evnm-fadein .5s ease forwards;
}

.evnm-corner-tl { top: 20px;    left: 20px;  border-top: 1.5px solid rgba(0,166,81,.45); border-left: 1.5px solid rgba(0,166,81,.45);   animation-delay: 2.0s; }
.evnm-corner-tr { top: 20px;    right: 20px; border-top: 1.5px solid rgba(0,166,81,.45); border-right: 1.5px solid rgba(0,166,81,.45);  animation-delay: 2.2s; }
.evnm-corner-bl { bottom: 72px; left: 20px;  border-bottom: 1.5px solid rgba(0,166,81,.45); border-left: 1.5px solid rgba(0,166,81,.45);  animation-delay: 2.4s; }
.evnm-corner-br { bottom: 72px; right: 20px; border-bottom: 1.5px solid rgba(0,166,81,.45); border-right: 1.5px solid rgba(0,166,81,.45); animation-delay: 2.6s; }

/* ================================================================
   CIRCUIT SVG
================================================================ */
.evnm-svg-circuits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.evnm-cline {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: evnm-draw 4s cubic-bezier(.22,1,.36,1) forwards;
}

.evnm-cl-1 { animation-delay: .5s; }
.evnm-cl-2 { animation-delay: 1.0s; }
.evnm-cl-3 { animation-delay: 1.4s; }
.evnm-cl-4 { animation-delay: 1.8s; }

@keyframes evnm-draw { to { stroke-dashoffset: 0; } }

.evnm-cnode { opacity: 0; animation: evnm-node .4s ease forwards; }
.evnm-cn-1 { animation-delay: 1.5s; } .evnm-cn-2 { animation-delay: 1.8s; }
.evnm-cn-3 { animation-delay: 2.0s; } .evnm-cn-4 { animation-delay: 2.1s; }
.evnm-cn-5 { animation-delay: 2.3s; } .evnm-cn-6 { animation-delay: 2.5s; }
.evnm-cn-7 { animation-delay: 2.4s; } .evnm-cn-8 { animation-delay: 2.7s; }
.evnm-cn-9 { animation-delay: 3.0s; }

@keyframes evnm-node { to { opacity: 1; filter: drop-shadow(0 0 5px #00A651); } }

/* ================================================================
   ENERGY RINGS
================================================================ */
.evnm-rings {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

.evnm-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid var(--evnm-green);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: evnm-ring-pulse 7s ease-out infinite;
}

.evnm-ring-1 { width: 300px; height: 300px; animation-delay: 0s; }
.evnm-ring-2 { width: 560px; height: 560px; animation-delay: 2.3s; }
.evnm-ring-3 { width: 820px; height: 820px; animation-delay: 4.6s; }

@keyframes evnm-ring-pulse {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: .5; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ================================================================
   LIGHT STREAKS
================================================================ */
.evnm-streaks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.evnm-streak {
    position: absolute;
    border-radius: 100px;
    background: linear-gradient(to bottom, transparent, #00A651, transparent);
    opacity: 0;
    animation: evnm-streak 9s ease-in-out infinite;
}

.evnm-streak-1 { left: 10%;  width: 1.5px; height: 180px; animation-delay: 0s;   animation-duration: 7s;  }
.evnm-streak-2 { left: 38%;  width: 1px;   height: 120px; animation-delay: 3.0s; animation-duration: 10s; }
.evnm-streak-3 { right: 20%; width: 2px;   height: 200px; animation-delay: 1.5s; animation-duration: 8s;  }
.evnm-streak-4 { right: 5%;  width: 1px;   height: 140px; animation-delay: 4.5s; animation-duration: 6s;  }

@keyframes evnm-streak {
    0%   { top: -220px; opacity: 0; }
    8%   { opacity: .7; }
    88%  { opacity: .2; }
    100% { top: 110%;   opacity: 0; }
}

/* ================================================================
   INNER WRAPPER
   KEY FIX: max-width: 100% prevents the inner container from ever
   being wider than the viewport, which was causing right-clipping.
   width: 100% alone is not enough if a parent has overflow issues.
================================================================ */
.evnm-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: min(1280px, 100%);
    margin: 0 auto;
    padding-right: 40px;
    padding-bottom: 110px;
    padding-left: 40px;
    /* Prevent any child from escaping horizontally */
    overflow: hidden;
}

/* ================================================================
   LAYOUT GRID  -  two columns on desktop
================================================================ */
.evnm-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    /* Ensure grid never overflows its container */
    width: 100%;
    min-width: 0;
}

/* All direct grid children must not overflow */
.evnm-layout > * {
    min-width: 0;
    overflow: hidden;
}

/* ================================================================
   COPY
================================================================ */
.evnm-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
}

/* Eyebrow */
.evnm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--evnm-green);
    border: 1px solid rgba(0,166,81,.35);
    background: rgba(0,166,81,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    padding: 7px 18px;
    width: fit-content;
    /* Prevent eyebrow from going wider than its parent */
    max-width: 100%;
}

.evnm-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--evnm-green);
    display: inline-block;
    flex-shrink: 0;
    animation: evnm-blink 2s ease-in-out infinite;
}

.evnm-dot:last-child { animation-delay: .5s; }

@keyframes evnm-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 7px var(--evnm-green); }
    50%       { opacity: .3; box-shadow: none; }
}

/* Headline - clamp keeps it from ever overflowing */
.evnm-headline {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 3.8rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #ffffff;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.evnm-hl {
    background: linear-gradient(135deg, #00A651 0%, #00d068 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.evnm-hl::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(24px);
    opacity: .3;
    z-index: -1;
}

/* Sub-headline */
.evnm-subheadline {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--evnm-silver);
    max-width: 100%;
    overflow-wrap: break-word;
}

/* ================================================================
   BUTTONS
================================================================ */
.evnm-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    max-width: 100%;
}

.evnm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s var(--evnm-bounce), box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

/* Primary */
.evnm-btn-primary {
    background: linear-gradient(135deg, #00A651 0%, #00d068 100%);
    color: #fff;
    box-shadow: 0 4px 24px rgba(0,166,81,.38), 0 1px 3px rgba(0,0,0,.3),
                inset 0 1px 0 rgba(255,255,255,.22);
}

.evnm-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 40px rgba(0,166,81,.55), 0 2px 8px rgba(0,0,0,.4),
                inset 0 1px 0 rgba(255,255,255,.28);
}

.evnm-btn-primary:active { transform: translateY(-1px); }

.evnm-bolt {
    font-size: .95rem;
    animation: evnm-bob 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes evnm-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2px); }
}

.evnm-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255,255,255,.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
}

.evnm-btn-primary:active .evnm-ripple { animation: evnm-ripple .45s ease-out forwards; }
@keyframes evnm-ripple { to { transform: scale(2.5); opacity: 0; } }

/* Secondary */
.evnm-btn-secondary {
    background: rgba(255,255,255,.06);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.evnm-btn-secondary:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

/* Ghost */
.evnm-btn-ghost {
    background: transparent;
    color: var(--evnm-green);
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}

.evnm-btn-ghost:hover { opacity: .75; }
.evnm-arrow { transition: transform .2s; }
.evnm-btn-ghost:hover .evnm-arrow { transform: translateX(4px); }

/* ================================================================
   VISUAL COLUMN
================================================================ */
.evnm-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* Orb */
.evnm-orb {
    position: relative;
    width: 88px; height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.evnm-orb-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed rgba(0,166,81,.3);
    animation: evnm-spin 18s linear infinite;
}

.evnm-orb-ring-2 {
    inset: -26px;
    border-color: rgba(0,166,81,.15);
    animation-duration: 28s;
    animation-direction: reverse;
}

@keyframes evnm-spin { to { transform: rotate(360deg); } }

.evnm-orb-core {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 16px rgba(0,166,81,.5));
}

.evnm-orb-glow {
    position: absolute;
    inset: -36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,166,81,.18) 0%, transparent 70%);
    animation: evnm-glow 3s ease-in-out infinite;
}

@keyframes evnm-glow {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.22); }
}

/* ================================================================
   CARDS GRID
================================================================ */
.evnm-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.evnm-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(0,166,81,.22);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--evnm-bounce), box-shadow .3s ease, border-color .3s ease;
    min-width: 0;
}

.evnm-card[data-fi="0"], .evnm-card[data-fi="2"], .evnm-card[data-fi="4"] { animation: evnm-float-a 4s ease-in-out infinite; }
.evnm-card[data-fi="1"], .evnm-card[data-fi="3"], .evnm-card[data-fi="5"] { animation: evnm-float-b 4.6s ease-in-out infinite; }
.evnm-card[data-fi="1"] { animation-delay: .4s; }
.evnm-card[data-fi="2"] { animation-delay: .8s; }
.evnm-card[data-fi="3"] { animation-delay: .2s; }
.evnm-card[data-fi="4"] { animation-delay: 1.0s; }
.evnm-card[data-fi="5"] { animation-delay: .6s; }

@keyframes evnm-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes evnm-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.evnm-card:hover {
    border-color: rgba(0,166,81,.65);
    box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 18px rgba(0,166,81,.2),
                inset 0 1px 0 rgba(255,255,255,.1);
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.02);
}

.evnm-card-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s;
}

.evnm-card:hover .evnm-card-shine { opacity: 1; }

.evnm-card-icon {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #00A651;
    background: rgba(0,166,81,.12);
    border: 1px solid rgba(0,166,81,.3);
    border-radius: 6px;
    padding: 4px 6px;
    flex-shrink: 0;
    font-family: 'Inter', monospace;
    min-width: 34px;
    text-align: center;
}

.evnm-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.evnm-card-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: .79rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evnm-card-sub {
    font-size: .66rem;
    color: rgba(148,163,184,.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evnm-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #00A651;
    box-shadow: 0 0 8px #00A651;
    animation: evnm-blink 2.5s ease-in-out infinite;
}

/* ================================================================
   LINKED CARDS
================================================================ */
a.evnm-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.evnm-card-linked {
    border-color: rgba(0,166,81,.32);
    transition: transform .28s var(--evnm-bounce), box-shadow .28s ease,
                border-color .28s ease, background .28s ease;
}

.evnm-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0,166,81,.3);
    background: rgba(0,166,81,.08);
    color: #00A651;
    flex-shrink: 0;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.evnm-card-linked:hover {
    background: rgba(0,166,81,.1);
    border-color: rgba(0,166,81,.7);
    box-shadow: 0 10px 36px rgba(0,0,0,.5), 0 0 24px rgba(0,166,81,.25),
                inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(-5px) scale(1.03);
    animation-play-state: paused;
}

.evnm-card-linked:hover .evnm-card-arrow {
    background: rgba(0,166,81,.22);
    border-color: rgba(0,166,81,.7);
    transform: translateX(2px);
}

.evnm-card-linked:hover .evnm-card-shine { opacity: 1; }
.evnm-card-linked:active { transform: translateY(-2px) scale(1.01); }
.evnm-card-linked:focus-visible { outline: 2px solid #00A651; outline-offset: 3px; }

/* ================================================================
   MARQUEE
================================================================ */
.evnm-mq-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 15;
    overflow: hidden;
    padding: 11px 0 13px;
    border-top: 1px solid rgba(0,166,81,.1);
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.28));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.evnm-mq { display: flex; overflow: hidden; width: 100%; }

.evnm-mq-track {
    display: flex;
    align-items: center;
    animation: evnm-scrollx 35s linear infinite;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: max-content;
}

.evnm-mq-wrap:hover .evnm-mq-track { animation-play-state: paused; }

@keyframes evnm-scrollx {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.evnm-mq-item {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(148,163,184,.7);
    flex-shrink: 0;
    transition: color .2s;
}

.evnm-mq-item:hover { color: #00A651; }
.evnm-mq-sep { font-size: 5px; color: rgba(0,166,81,.3); flex-shrink: 0; }

/* ================================================================
   ENTRANCE ANIMATIONS
================================================================ */
[data-ea] { opacity: 0; will-change: transform, opacity; }
[data-ea="up"]    { transform: translateY(26px); }
[data-ea="left"]  { transform: translateX(26px); }
[data-ea="scale"] { transform: scale(.88); }

@keyframes evnm-fadein { to { opacity: 1; } }

.elementor-editor-active [data-ea] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    .evnm-hero *, .evnm-hero *::before, .evnm-hero *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-ea] { opacity: 1; transform: none; }
}

/* ================================================================
   TABLET  768px - 1024px
================================================================ */
@media (max-width: 1024px) and (min-width: 768px) {

    .evnm-inner {
        padding-right: 32px;
        padding-bottom: 90px;
        padding-left: 32px;
    }

    .evnm-layout {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }

    .evnm-copy { align-items: center; }

    .evnm-subheadline {
        max-width: 580px;
        text-align: center;
        margin: 0 auto;
    }

    .evnm-headline { font-size: clamp(2rem, 5vw, 3.2rem); }

    .evnm-btns { justify-content: center; }

    .evnm-visual {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        max-width: 680px;
        margin: 0 auto;
    }

    .evnm-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .evnm-card { padding: 10px 11px; }
    .evnm-card-title { font-size: .75rem; }

    .evnm-bg-img-2, .evnm-bg-img-3 { display: none; }
    .evnm-bg-img-1 { width: 260px; height: 200px; top: 3%; right: 2%; }
    .evnm-bg-mask {
        background:
            linear-gradient(to right, #020c06 30%, rgba(2,12,6,.85) 60%, rgba(2,12,6,.6) 100%),
            linear-gradient(to bottom, #020c06 0%, transparent 12%, transparent 88%, #03080f 100%);
    }
    .evnm-corner { width: 36px; height: 36px; }
}

/* ================================================================
   MOBILE  480px - 767px
   KEY FIXES:
   - padding-top accounts for sticky header (~70px typical WP header)
   - overflow: visible on section allows content to breathe
   - All widths constrained to 100% of parent
================================================================ */
@media (max-width: 767px) and (min-width: 480px) {

    .evnm-hero {
        min-height: auto;
        align-items: flex-start;
    }

    .evnm-inner {
        padding-right: 20px;
        padding-bottom: 90px;
        padding-left: 20px;
        width: 100%;
    }

    .evnm-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
        width: 100%;
    }

    .evnm-copy {
        align-items: center;
        width: 100%;
    }

    .evnm-headline {
        font-size: clamp(1.75rem, 6vw, 2.4rem);
        word-break: break-word;
    }

    .evnm-subheadline {
        font-size: .9rem;
        line-height: 1.7;
        max-width: 100%;
        text-align: center;
    }

    .evnm-eyebrow {
        font-size: 9.5px;
        padding: 5px 12px;
        max-width: calc(100% - 40px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .evnm-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .evnm-btn-primary,
    .evnm-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .evnm-btn-ghost {
        align-self: center;
        padding: 0;
    }

    .evnm-visual {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        overflow: hidden;
    }

    .evnm-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .evnm-card { padding: 10px 10px; gap: 8px; }
    .evnm-card-title { font-size: .74rem; }
    .evnm-card-sub { font-size: .62rem; }
    .evnm-orb { width: 76px; height: 76px; }

    .evnm-bg-img-1, .evnm-bg-img-2, .evnm-bg-img-3 { display: none; }
    .evnm-corner { display: none; }
    .evnm-mq-item { padding: 0 14px; font-size: .68rem; }
}

/* ================================================================
   XS PHONE  < 480px
================================================================ */
@media (max-width: 479px) {

    .evnm-hero {
        min-height: auto;
        align-items: flex-start;
    }

    .evnm-inner {
        padding-right: 16px;
        padding-bottom: 86px;
        padding-left: 16px;
        width: 100%;
        max-width: 100%;
    }

    .evnm-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
        width: 100%;
    }

    .evnm-copy {
        align-items: center;
        gap: 18px;
        width: 100%;
    }

    .evnm-headline {
        font-size: clamp(1.6rem, 7.5vw, 2.1rem);
        letter-spacing: -.015em;
        word-break: break-word;
    }

    .evnm-subheadline {
        font-size: .86rem;
        line-height: 1.65;
        max-width: 100%;
    }

    .evnm-eyebrow {
        font-size: 9px;
        padding: 5px 11px;
        gap: 6px;
        max-width: calc(100% - 32px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .evnm-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .evnm-btn-primary,
    .evnm-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
        font-size: .84rem;
    }

    .evnm-btn-ghost {
        align-self: center;
        padding: 0;
        font-size: .82rem;
    }

    /* Single column cards on tiny phones */
    .evnm-cards {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .evnm-card {
        animation: none !important;
        padding: 11px 13px;
        gap: 10px;
    }

    .evnm-card-icon { min-width: 36px; }
    .evnm-card-title { font-size: .78rem; }

    .evnm-visual {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        overflow: hidden;
    }

    .evnm-orb { width: 70px; height: 70px; }

    .evnm-bg-img-1, .evnm-bg-img-2, .evnm-bg-img-3 { display: none; }
    .evnm-corner { display: none; }
    .evnm-svg-circuits { display: none; }
    .evnm-mq-item { padding: 0 11px; font-size: .64rem; }
}
