@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 - KNOWLEDGE HUB HERO WIDGET
   Page: /ev-knowledge-hub-ev-battery-charging-maintenance-guides/
   Layout: Left = copy + audience tags + CTAs
           Right = 2x3 knowledge category card grid
================================================================ */

.hh-hero {
    --hh-green:    #00A651;
    --hh-glt:      #00d068;
    --hh-white:    #ffffff;
    --hh-silver:   #94a3b8;
    --hh-ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --hh-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --hh-header-h: 80px;
}

.hh-hero *, .hh-hero *::before, .hh-hero *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ---- Section ---- */
.hh-hero {
    position: relative; width: 100%; min-height: 100vh;
    display: flex; align-items: center;
    overflow-x: clip; overflow-y: visible;
    isolation: isolate; z-index: 0;
    background:
        radial-gradient(ellipse 55% 50% at 8% 42%,   rgba(0,166,81,.13) 0%, transparent 60%),
        radial-gradient(ellipse 45% 40% at 94% 10%,   rgba(0,166,81,.07) 0%, transparent 55%),
        radial-gradient(ellipse 38% 48% at 80% 90%,   rgba(0,166,81,.05) 0%, transparent 50%),
        linear-gradient(160deg, #020d07 0%, #03120a 40%, #020c06 100%);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- Canvas ---- */
.hh-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.55;
}

/* ---- Background images ---- */
.hh-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hh-bg-img {
    position: absolute; background-size: cover; background-position: center;
    border-radius: 16px; opacity: 0; animation: hh-bgfade 2s ease forwards;
}
.hh-bg-img-1 {
    width: 340px; height: 260px; top: 6%; right: 3%;
    background-image: url('https://images.unsplash.com/photo-1620714223084-8fcacc2dbed5?w=600&q=60');
    filter: blur(1px) brightness(0.15) saturate(1.3) hue-rotate(100deg);
    animation-delay: .4s;
}
.hh-bg-img-2 {
    width: 260px; height: 320px; bottom: 10%; right: 2%;
    background-image: url('https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=600&q=60');
    filter: blur(1.5px) brightness(0.12) saturate(1.5) hue-rotate(110deg);
    animation-delay: .8s;
}
@keyframes hh-bgfade { from{opacity:0;transform:scale(1.1)} to{opacity:1;transform:scale(1)} }

.hh-bg-mask {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, #020d07 38%, rgba(2,13,7,.8) 60%, rgba(2,13,7,.44) 100%),
        linear-gradient(to bottom, #020d07 0%, transparent 15%, transparent 85%, #020c06 100%);
}

/* ---- Dot grid ---- */
.hh-grid-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background-image:
        linear-gradient(rgba(0,166,81,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,166,81,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 100%);
    animation: hh-grid 42s linear infinite;
}
@keyframes hh-grid { from{background-position:0 0} to{background-position:52px 52px} }

/* ---- Scan line ---- */
.hh-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,.5) 42%, rgba(0,208,104,.9) 50%,
        rgba(0,166,81,.5) 58%, rgba(0,166,81,0) 85%, transparent 100%);
    pointer-events: none; z-index: 3; filter: blur(1px);
    animation: hh-scan 10s ease-in-out infinite;
}
@keyframes hh-scan { 0%{top:-2px;opacity:0} 6%{opacity:1} 94%{opacity:.3} 100%{top:100%;opacity:0} }

/* ---- Corners ---- */
.hh-corner { position:absolute;width:46px;height:46px;pointer-events:none;z-index:4;opacity:0;animation:hh-fadein .5s ease forwards; }
.hh-corner-tl{top:20px;left:20px;border-top:1.5px solid rgba(0,166,81,.4);border-left:1.5px solid rgba(0,166,81,.4);animation-delay:2.0s}
.hh-corner-tr{top:20px;right:20px;border-top:1.5px solid rgba(0,166,81,.4);border-right:1.5px solid rgba(0,166,81,.4);animation-delay:2.2s}
.hh-corner-bl{bottom:72px;left:20px;border-bottom:1.5px solid rgba(0,166,81,.4);border-left:1.5px solid rgba(0,166,81,.4);animation-delay:2.4s}
.hh-corner-br{bottom:72px;right:20px;border-bottom:1.5px solid rgba(0,166,81,.4);border-right:1.5px solid rgba(0,166,81,.4);animation-delay:2.6s}

/* ---- Circuits ---- */
.hh-circuits { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3; }
.hh-cline { stroke-dasharray:800;stroke-dashoffset:800;animation:hh-draw 4s cubic-bezier(.22,1,.36,1) forwards; }
.hh-cl-1{animation-delay:.5s} .hh-cl-2{animation-delay:1.0s} .hh-cl-3{animation-delay:1.4s} .hh-cl-4{animation-delay:1.8s}
@keyframes hh-draw { to{stroke-dashoffset:0} }
.hh-cnode{opacity:0;animation:hh-node .4s ease forwards}
.hh-cn-1{animation-delay:1.5s} .hh-cn-2{animation-delay:1.8s} .hh-cn-3{animation-delay:2.0s}
.hh-cn-4{animation-delay:2.1s} .hh-cn-5{animation-delay:2.3s} .hh-cn-6{animation-delay:2.5s}
.hh-cn-7{animation-delay:2.4s} .hh-cn-8{animation-delay:2.7s} .hh-cn-9{animation-delay:3.0s}
@keyframes hh-node { to{opacity:1;filter:drop-shadow(0 0 5px #00A651)} }

/* ---- Rings ---- */
.hh-rings { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2; }
.hh-ring { position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid var(--hh-green);transform:translate(-50%,-50%) scale(0);opacity:0;animation:hh-ring 7s ease-out infinite; }
.hh-ring-1{width:280px;height:280px;animation-delay:0s}
.hh-ring-2{width:540px;height:540px;animation-delay:2.3s}
.hh-ring-3{width:800px;height:800px;animation-delay:4.6s}
@keyframes hh-ring { 0%{transform:translate(-50%,-50%) scale(0);opacity:.5} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }

/* ================================================================
   INNER / LAYOUT
================================================================ */
.hh-inner {
    position: relative; z-index: 10;
    width: 100%; max-width: min(1280px, 100%);
    margin: 0 auto;
    padding-top: calc(var(--hh-header-h) + 40px);
    padding-right: 40px;
    padding-bottom: 100px;
    padding-left: 40px;
    overflow: hidden;
}

.hh-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    width: 100%; min-width: 0;
}
.hh-layout > * { min-width: 0; }

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

/* Tagline pill */
.hh-tagline {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: #00d068;
    border: 1px solid rgba(0,166,81,.5); background: rgba(0,166,81,.12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 100px; padding: 7px 18px; width: fit-content; max-width: 100%;
    box-shadow: 0 0 18px rgba(0,166,81,.15);
}
.hh-tag-dot {
    width:5px;height:5px;border-radius:50%;background:var(--hh-green);
    display:inline-block;flex-shrink:0;animation:hh-blink 2s ease-in-out infinite;
}
.hh-tag-dot:last-child { animation-delay:.5s; }
@keyframes hh-blink { 0%,100%{opacity:1;box-shadow:0 0 7px var(--hh-green)} 50%{opacity:.3;box-shadow:none} }

/* Headline */
.hh-headline {
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: clamp(1.9rem,3.2vw,3.4rem);
    font-weight: 700; line-height: 1.14; letter-spacing: -.024em;
    color: #ffffff; word-break: break-word; overflow-wrap: break-word;
}

.hh-hl {
    background: linear-gradient(135deg, #00A651 0%, #00d068 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    position: relative;
}
.hh-hl::after { content:'';position:absolute;inset:0;background:inherit;filter:blur(22px);opacity:.28;z-index:-1; }

/* Sub-headline */
.hh-sub {
    font-size: 1rem; line-height: 1.78;
    color: rgba(225,235,248,.94);
    max-width: 100%; overflow-wrap: break-word;
}

/* ---- Audience tags ---- */
.hh-who { display:flex;flex-direction:column;gap:10px; }
.hh-who-label { font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,208,104,.85); }
.hh-who-tags  { display:flex;flex-wrap:wrap;gap:7px; }
.hh-tag {
    display:inline-flex;align-items:center;padding:5px 13px;
    font-size:.72rem;font-weight:500;color:rgba(220,235,252,.92);
    background:rgba(255,255,255,.05);border:1px solid rgba(0,166,81,.25);
    border-radius:100px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .2s,border-color .2s,color .2s;cursor:default;
}
.hh-tag:hover { background:rgba(0,166,81,.12);border-color:rgba(0,166,81,.5);color:#ffffff; }

/* ---- Buttons ---- */
.hh-btns { display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:100%; }
.hh-btn {
    position:relative;display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;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(--hh-bounce),box-shadow .25s ease;
    -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.hh-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);
}
.hh-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); }
.hh-bolt { font-size:1rem;flex-shrink:0; }
.hh-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; }
.hh-btn-primary:active .hh-ripple { animation:hh-ripple .45s ease-out forwards; }
@keyframes hh-ripple { to{transform:scale(2.5);opacity:0} }
.hh-btn-secondary {
    background:rgba(255,255,255,.06);color:#ffffff;
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hh-btn-secondary:hover { background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3); }

/* ---- Motto callout ---- */
.hh-motto {
    display:flex;align-items:flex-start;gap:10px;padding:11px 15px;
    background:rgba(0,166,81,.05);border:1px solid rgba(0,166,81,.2);border-radius:10px;
    font-size:.78rem;line-height:1.55;color:rgba(220,235,252,.92);
}
.hh-motto-dot { color:#00A651;font-size:7px;margin-top:4px;flex-shrink:0; }
.hh-motto strong { color:#00d068;font-weight:600; }

/* ================================================================
   RIGHT: KNOWLEDGE CATEGORY CARDS (2x3 grid)
================================================================ */
.hh-cats-panel {
    background:rgba(255,255,255,.03);
    border:1px solid rgba(0,166,81,.18);border-radius:20px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
    position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.hh-cats-panel::before {
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,166,81,.55),transparent);z-index:2;
}

.hh-cats-header { padding:18px 22px 14px;flex-shrink:0; }
.hh-cats-badge {
    font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:#00A651;background:rgba(0,166,81,.1);border:1px solid rgba(0,166,81,.3);
    border-radius:100px;padding:5px 14px;
}

/* 2-column card grid */
.hh-cats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    padding: 4px 18px 16px;
    flex: 1;
}

.hh-cat-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 14px;
    background: rgba(0,166,81,.05);
    border: 1px solid rgba(0,166,81,.15);
    border-radius: 14px;
    position: relative; overflow: hidden;
    transition: background .22s ease, border-color .22s ease, transform .22s var(--hh-bounce);
    cursor: default; min-width: 0;
}
.hh-cat-card::before {
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);
    pointer-events:none;
}
.hh-cat-card:hover {
    background:rgba(0,166,81,.1);border-color:rgba(0,166,81,.42);
    transform:translateY(-3px);
}
a.hh-cat-card { text-decoration:none;color:inherit;cursor:pointer; }
a.hh-cat-card:hover { border-color:rgba(0,166,81,.6); }
a.hh-cat-card:focus-visible { outline:2px solid #00A651;outline-offset:3px; }

/* Category icon */
.hh-cat-icon {
    font-size: 1.5rem;
    line-height: 1;
    display: block;
}

/* Category title */
.hh-cat-title {
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: .82rem; font-weight: 700;
    color: #ffffff; line-height: 1.25; display: block;
}

/* Category description */
.hh-cat-desc {
    font-size: .68rem; line-height: 1.55;
    color: rgba(220,235,252,.88); display: block;
}

/* Arrow for linked cards */
.hh-cat-arr {
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:50%;margin-top:4px;
    border:1px solid rgba(0,166,81,.3);background:rgba(0,166,81,.08);
    color:#00A651;
    transition:background .2s,transform .2s;align-self:flex-start;
}
a.hh-cat-card:hover .hh-cat-arr { background:rgba(0,166,81,.2);transform:translateX(2px); }

/* Footer */
.hh-cats-footer {
    flex-shrink:0;padding:11px 18px;
    background:rgba(0,166,81,.07);border-top:1px solid rgba(0,166,81,.18);
    display:flex;align-items:center;gap:10px;
    font-size:.73rem;line-height:1.5;color:rgba(220,235,252,.92);
}
.hh-cf-dot { color:#00A651;font-size:7px;flex-shrink:0; }

/* ================================================================
   MARQUEE
================================================================ */
.hh-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,.3));
    -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%);
}
.hh-mq { display:flex;overflow:hidden;width:100%; }
.hh-mq-track {
    display:flex;align-items:center;animation:hh-scrollx 32s linear infinite;
    white-space:nowrap;flex-shrink:0;min-width:max-content;
}
.hh-mq-wrap:hover .hh-mq-track { animation-play-state:paused; }
@keyframes hh-scrollx { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hh-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(220,235,252,.88);flex-shrink:0;transition:color .2s;
}
.hh-mq-item:hover { color:#00A651; }
.hh-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 hh-fadein{to{opacity:1}}
.elementor-editor-active [data-ea]{opacity:1 !important;transform:none !important;}
@media(prefers-reduced-motion:reduce){
    .hh-hero *,.hh-hero *::before,.hh-hero *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
    [data-ea]{opacity:1;transform:none}
}

/* ================================================================
   HEADER OVERLAP FIX
================================================================ */
@media(min-width:1025px){.hh-hero{--hh-header-h:80px}}
@media(max-width:1024px) and (min-width:768px){.hh-hero{--hh-header-h:70px}}
@media(max-width:767px){.hh-hero{--hh-header-h:130px}}
@media(max-width:479px){.hh-hero{--hh-header-h:130px}}

/* ================================================================
   TABLET  768-1024px
================================================================ */
@media(max-width:1024px) and (min-width:768px){
    .hh-inner{padding-right:32px;padding-bottom:90px;padding-left:32px;}
    .hh-layout{grid-template-columns:1fr;gap:40px;}
    .hh-headline{font-size:clamp(2rem,5vw,3.2rem);}
    .hh-cats-grid{grid-template-columns:repeat(3,1fr) !important;gap:8px;}
    .hh-cat-card{padding:13px 11px;}
    .hh-cat-icon{font-size:1.3rem;}
    .hh-cat-title{font-size:.78rem;}
    .hh-cat-desc{font-size:.65rem;}
    .hh-bg-img-2{display:none;}
    .hh-bg-img-1{width:220px;height:170px;top:3%;right:2%;}
    .hh-corner{width:34px;height:34px;}
}

/* ================================================================
   MOBILE  480-767px
================================================================ */
@media(max-width:767px) and (min-width:480px){
    .hh-hero{min-height:auto;align-items:flex-start;}
    .hh-inner{padding-right:20px;padding-bottom:90px;padding-left:20px;width:100%;}
    .hh-layout{grid-template-columns:1fr;gap:30px;width:100%;}
    .hh-copy{width:100%;}
    .hh-headline{font-size:clamp(1.75rem,6vw,2.4rem);word-break:break-word;}
    .hh-sub{font-size:.9rem;}
    .hh-tagline{font-size:9.5px;padding:5px 12px;white-space:normal;}
    .hh-btns{flex-direction:column;align-items:stretch;width:100%;gap:10px;}
    .hh-btn-primary,.hh-btn-secondary{width:100%;justify-content:center;padding:14px 20px;}
    .hh-who-tags{gap:6px;} .hh-tag{font-size:.68rem;padding:4px 11px;}
    .hh-cats-grid{grid-template-columns:repeat(2,1fr) !important;gap:7px;}
    .hh-cat-card{padding:12px 10px;gap:5px;}
    .hh-cat-icon{font-size:1.25rem;}
    .hh-cat-title{font-size:.76rem;}
    .hh-cat-desc{font-size:.64rem;}
    .hh-bg-img-1,.hh-bg-img-2{display:none;}
    .hh-corner{display:none;}
    .hh-mq-item{padding:0 14px;font-size:.68rem;}
}

/* ================================================================
   XS PHONE  < 480px
================================================================ */
@media(max-width:479px){
    .hh-hero{min-height:auto;align-items:flex-start;}
    .hh-inner{padding-right:16px;padding-bottom:86px;padding-left:16px;width:100%;max-width:100%;}
    .hh-layout{grid-template-columns:1fr;gap:26px;width:100%;}
    .hh-copy{gap:18px;width:100%;}
    .hh-headline{font-size:clamp(1.6rem,7.5vw,2.1rem);letter-spacing:-.015em;}
    .hh-sub{font-size:.86rem;}
    .hh-tagline{font-size:9px;padding:5px 11px;white-space:normal;}
    .hh-btns{flex-direction:column;align-items:stretch;width:100%;gap:10px;}
    .hh-btn-primary,.hh-btn-secondary{width:100%;justify-content:center;padding:13px 18px;font-size:.84rem;}
    .hh-who-tags{gap:5px;} .hh-tag{font-size:.65rem;padding:4px 10px;}
    .hh-cats-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px;}
    .hh-cat-card{padding:11px 9px;gap:5px;border-radius:11px;}
    .hh-cat-icon{font-size:1.15rem;}
    .hh-cat-title{font-size:.72rem;}
    .hh-cat-desc{font-size:.62rem;}
    .hh-motto{font-size:.74rem;padding:10px 12px;}
    .hh-bg-img-1,.hh-bg-img-2{display:none;}
    .hh-corner{display:none;}
    .hh-circuits{display:none;}
    .hh-mq-item{padding:0 11px;font-size:.64rem;}
}