/* Modern Hero Section Styles for scoreEV */
:root {
    --h-bg: #080C14;
    --h-accent: #00E5FF;
    --h-a2: #00FF88;
    --h-a3: #7C3AED;
    --h-text: #F0F4FF;
    --h-muted: #8892A4;
    --h-border: rgba(0, 229, 255, .13);
    --h-card: rgba(13, 18, 32, .9);
    --h-ease: .35s cubic-bezier(.4, 0, .2, 1);
}

@keyframes h-fadeDown {
    from { opacity: 0; transform: translateY(-18px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes h-fadeUp {
    from { opacity: 0; transform: translateY(28px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes h-bgPulse {
    0% { filter: hue-rotate(0deg) }
    100% { filter: hue-rotate(12deg) brightness(1.05) }
}

@keyframes h-orbFloat {
    0% { transform: translate(0, 0) }
    100% { transform: translate(35px, 28px) }
}

@keyframes h-blink {
    0%, 100% { opacity: 1 }
    50% { opacity: .2 }
}

@keyframes h-cur {
    0%, 100% { opacity: 1 }
    50% { opacity: 0 }
}

@keyframes h-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, .4) }
    70% { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0) }
}

#hero {
    position: relative;
    min-height: 90vh; /* Adjusted from 100vh to fit better with the rest of the page */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 5vw 90px;
    overflow: hidden;
    background: var(--h-bg);
    color: var(--h-text);
}

.hbg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--h-bg);
}

.h-grid {
    display: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: h-orbFloat 12s ease-in-out infinite alternate;
}

.o1 { width: 550px; height: 550px; background: rgba(0, 229, 255, .07); top: -18%; left: -12%; animation-duration: 13s; }
.o2 { width: 420px; height: 420px; background: rgba(124, 58, 237, .1); bottom: -12%; right: -8%; animation-duration: 10s; }
.o3 { width: 320px; height: 320px; background: rgba(0, 255, 136, .07); top: 35%; left: 62%; animation-duration: 16s; }

.badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 229, 255, .09);
    border: 1px solid rgba(0, 229, 255, .25);
    border-radius: 999px;
    padding: .32rem .95rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--h-accent);
    margin-bottom: 1.6rem;
    animation: h-fadeDown .7s ease both;
}

.bdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--h-a2);
    box-shadow: 0 0 8px var(--h-a2);
    animation: h-blink 1.8s ease-in-out infinite;
}

.grad {
    color: var(--h-accent);
}

.h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(2.6rem, 5.8vw, 5rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -2.5px;
    margin-bottom: 1.1rem;
    animation: h-fadeDown .8s ease .1s both;
}

.sub {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto 2.4rem;
    font-size: clamp(.95rem, 1.8vw, 1.12rem);
    color: var(--h-muted);
    line-height: 1.75;
    animation: h-fadeDown .8s ease .2s both;
}

.sub strong { color: var(--h-text); }
.tw { color: var(--h-a2); font-weight: 700; }
.tw::after { content: '|'; animation: h-cur .75s step-end infinite; }
.tw.paused::after { animation: none; opacity: 0.5; }

.btns {
    position: relative;
    z-index: 2;
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3.8rem;
    animation: h-fadeDown .8s ease .3s both;
}

.bp {
    padding: .82rem 2rem;
    border-radius: 999px;
    background: var(--h-accent);
    color: #080C14;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(0, 229, 255, .35);
    transition: transform var(--h-ease), box-shadow var(--h-ease), background var(--h-ease);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bp:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 55px rgba(0, 229, 255, .55);
}

.bs {
    padding: .82rem 2rem;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid rgba(0, 229, 255, .28);
    color: var(--h-text);
    font-weight: 600;
    font-size: .97rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--h-ease), background var(--h-ease), transform var(--h-ease);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bs:hover {
    border-color: var(--h-accent);
    background: rgba(0, 229, 255, .07);
    transform: translateY(-3px);
}

/* DASHBOARD MOCKUP */
.dw {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    animation: h-fadeUp .9s ease .45s both;
}

.dc {
    background: rgba(13, 18, 32, .88);
    border: 1px solid var(--h-border);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(22px);
    box-shadow: 0 36px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    position: relative;
    overflow: hidden;
}

.dc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h-accent), var(--h-a3), transparent);
}

.dh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.dt { font-size: .83rem; color: var(--h-muted); font-weight: 500; }

.lt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .73rem;
    color: var(--h-a2);
    font-weight: 600;
}

.ld {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--h-a2);
    animation: h-pulse 2s infinite;
}

.cr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .cr { grid-template-columns: 1fr; }
    .dc { padding: 1.2rem; }
    #hero { padding: 68px 5vw 60px; min-height: auto; }
}

.cc {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 1.1rem;
    transition: border-color var(--h-ease), transform var(--h-ease);
    cursor: pointer;
    text-align: left;
}

.cc:hover {
    border-color: var(--h-accent);
    transform: translateY(-4px);
}

.cbr { font-size: .68rem; color: var(--h-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.cm { font-size: .92rem; font-weight: 700; margin-bottom: .65rem; }

.rr { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.rv { position: relative; z-index: 1; font-size: .82rem; font-weight: 800; }
.ri .v { font-size: 1rem; font-weight: 800; line-height: 1; }
.ri .l { font-size: .7rem; color: var(--h-muted); }

.cst { display: flex; gap: .8rem; flex-wrap: wrap; }
.cs .l { color: var(--h-muted); font-size: .7rem; display: block; }
.cs .v { color: var(--h-text); font-weight: 600; font-size: .78rem; }

.dsearch {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    padding: .6rem 1.1rem;
}

.dsearch:focus-within { border-color: rgba(0, 229, 255, .4); }
.dsearch input {
    background: none;
    border: none;
    outline: none;
    color: var(--h-text);
    font-size: .88rem;
    flex: 1;
    font-family: inherit;
}

.dsearch input::placeholder { color: var(--h-muted); }

.sbtn {
    padding: .38rem .95rem;
    background: var(--h-accent);
    color: #080C14;
    border: none;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

/* STATS */
.stats {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    animation: h-fadeUp .9s ease .6s both;
    border: 1px solid var(--h-border);
    border-radius: 18px;
    background: rgba(13, 18, 32, .7);
    backdrop-filter: blur(12px);
    overflow: hidden;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.st {
    padding: 1.1rem 2.2rem;
    text-align: center;
    border-right: 1px solid var(--h-border);
    flex: 1;
    min-width: 130px;
}

.st:last-child { border-right: none; }
.sn { font-size: 1.85rem; font-weight: 900; color: var(--h-accent); line-height: 1; margin-bottom: 3px; }
.sl { font-size: .72rem; color: var(--h-muted); text-transform: uppercase; letter-spacing: .07em; }

/* SECTIONS */
.sec { padding: 96px 0; }
.sec-alt { background: var(--h-bg2, #0D1220); }

/* WHY */
.wg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3.5rem; }
.wc { background: var(--h-card); border: 1px solid var(--h-border); border-radius: 16px; padding: 1.9rem; position: relative; overflow: hidden; transition: border-color var(--h-ease), transform var(--h-ease), box-shadow var(--h-ease); }
.wc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--h-accent), var(--h-a3)); transform: scaleX(0); transform-origin: left; transition: transform var(--h-ease); }
.wc:hover { border-color: var(--h-accent); transform: translateY(-6px); box-shadow: 0 0 40px rgba(0, 229, 255, .2); }
.wc:hover::before { transform: scaleX(1); }
.wi { width: 50px; height: 50px; border-radius: 13px; background: rgba(0, 229, 255, .1); border: 1px solid rgba(0, 229, 255, .15); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.1rem; }
.wc h3 { font-size: 1rem; font-weight: 700; margin-bottom: .45rem; color: var(--h-text, #F0F4FF); }
.wc p { color: var(--h-muted); font-size: .86rem; line-height: 1.65; }

/* Responsive adjustments for WHY */
@media (max-width: 900px) {
    .wg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wg { grid-template-columns: 1fr; }
}

.tc { text-align: center; }
.lbl { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--h-accent); margin-bottom: .7rem; }
.ttl { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -1px; margin-bottom: .9rem; color: var(--h-text, #F0F4FF); }
.dsc { color: var(--h-muted); font-size: .97rem; line-height: 1.72; max-width: 540px; margin: 0 auto; }

/* CATALOG & VARIOUS UI COMPONENTS */
.ch { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.eg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding-bottom: 20px; }
.ec { background: var(--h-card, rgba(13, 18, 32, .9)); border: 1px solid var(--h-border, rgba(0, 229, 255, .13)); border-radius: 16px; overflow: hidden; transition: border-color var(--h-ease), transform var(--h-ease), box-shadow var(--h-ease); text-align: left; text-decoration: none; display: block; }
.ec:hover { border-color: var(--h-accent); transform: translateY(-6px); box-shadow: 0 0 40px rgba(0, 229, 255, .2); }
.et { height: 160px; background: linear-gradient(135deg, rgba(0, 229, 255, .05), rgba(124, 58, 237, .08)); display: flex; align-items: center; justify-content: center; font-size: 3.2rem; border-bottom: 1px solid var(--h-border, rgba(0,229,255,.13)); position: relative; overflow: hidden; background-size: cover; background-position: center; }
.et::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(transparent, var(--h-card, rgba(13, 18, 32, .9))); z-index: 1;}
.eb { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; color: #080C14; z-index: 2; background: linear-gradient(135deg, var(--h-a2), var(--h-accent)); box-shadow: 0 4px 12px rgba(0,255,136,.3); text-transform: uppercase;}
.eb.fav-btn { cursor: pointer; border: none; outline: none; transition: transform var(--h-ease); }
.eb.fav-btn:hover { transform: scale(1.1); }
.ebody { padding: 1.4rem; position: relative; pointer-events: none; }
.ebody * { pointer-events: auto; }
.ebr { font-size: .7rem; color: var(--h-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.enm { font-size: 1.05rem; font-weight: 800; color: var(--h-text); margin: 0 0 1rem 0; line-height: 1.3; }
.espec { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.ep { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); padding-bottom: .4rem; }
.ep:last-child { border-bottom: none; padding-bottom: 0; }
.ep .epl { color: var(--h-muted); font-size: .8rem; }
.ep .epv { color: var(--h-text); font-weight: 700; font-size: .85rem; }
.etags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.tag { font-size: .7rem; padding: .25rem .7rem; border-radius: 999px; font-weight: 700; border: 1px solid rgba(255,255,255,.1); }

@media (max-width: 1100px) { .eg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .eg { grid-template-columns: 1fr; } }