/* ============================================================
   2. Hero — morphing headline + 3D dashboard mockup
   ============================================================ */

.hero {
    position: relative;
    padding: clamp(7rem, 14vh, 10rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}
.hero::before {
    /* soft accent wash behind the headline */
    content: "";
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 120vw);
    height: 620px;
    background: radial-gradient(closest-side,
        rgba(31, 122, 224, 0.14) 0%,
        rgba(31, 122, 224, 0.05) 55%,
        transparent 100%);
    pointer-events: none;
}

.hero__defs { position: absolute; width: 0; height: 0; }

.hero__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.hero__eyebrow {
    display: inline-block;
    margin: 0 0 1.1rem;
    padding: 0.45rem 1.2rem;
    border-radius: var(--r-pill);
    background: rgba(31, 122, 224, 0.08);
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 600;
}

/* --- morphing headline --- */
.morph {
    position: relative;
    margin: 0 auto;
    height: clamp(4.6rem, 11vw, 8rem);
    max-width: 60rem;
    /* no SVG threshold filter — the transition is a clean blur-crossfade,
       so the text stays crisp at rest and legible mid-transition */
}
.morph__a,
.morph__b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.4rem, 6.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ink);
    white-space: nowrap;
    user-select: none;
}
.morph__b { opacity: 0; }   /* pre-JS: only the "Levion" span shows (no overlap flash) */

.hero__tagline {
    margin: 1rem auto 0;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.01em;
}

.hero__sub {
    margin: 1.1rem auto 0;
    max-width: 44rem;
    color: var(--muted-2);
    font-size: clamp(1.02rem, 1.8vw, 1.22rem);
    line-height: 1.75;
}

/* --- device --- */
.hero__container {
    margin-top: clamp(2.4rem, 5vw, 4rem);
    perspective: 1500px;
}
.hero__device {
    position: relative;
    margin: 0 auto;
    max-width: 880px;
    transform-origin: center top;
    will-change: transform;
}

.mock {
    border-radius: 1.4rem;
    background: #f7fafd;
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow:
        0 2px 6px    rgba(15, 23, 42, 0.06),
        0 24px 60px  rgba(15, 23, 42, 0.16),
        0 60px 120px rgba(31, 122, 224, 0.10);
    overflow: hidden;
}

.mock__chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.1rem;
    background: #eef3f9;
    border-bottom: 1px solid rgba(11, 18, 32, 0.06);
    direction: ltr;
}
.mock__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #d3dce8;
}
.mock__dot:nth-child(1) { background: #f5a9a0; }
.mock__dot:nth-child(2) { background: #f5d58f; }
.mock__dot:nth-child(3) { background: #a4dcae; }
.mock__url {
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 0.2rem 1.4rem;
    border-radius: var(--r-pill);
    background: #ffffff;
    color: #9aa6b5;
    font-size: 0.72rem;
    font-weight: 500;
}

.mock__layout {
    display: grid;
    grid-template-columns: 64px 1fr;
    min-height: 340px;
}

.mock__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0;
    background: #ffffff;
    border-inline-end: 1px solid rgba(11, 18, 32, 0.05);
}
.mock__side-logo {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    margin-bottom: 0.5rem;
}
.mock__side-item {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #e8eef6;
}
.mock__side-item.is-on { background: rgba(31, 122, 224, 0.28); }

.mock__main {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
}

.mock__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.mock__kpi {
    position: relative;
    height: 70px;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 0.8rem;
    background: #ffffff;
    border: 1px solid rgba(11, 18, 32, 0.05);
    overflow: hidden;
}
.mock__kpi-label {
    font-size: 10px;
    font-weight: 600;
    color: #8a97a8;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mock__kpi-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}
.mock__spark {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26px;
}
.mock__spark--1 { background: linear-gradient(180deg, rgba(31, 122, 224, 0.35), transparent); clip-path: polygon(0 90%, 15% 65%, 32% 75%, 50% 40%, 68% 55%, 85% 25%, 100% 35%, 100% 100%, 0 100%); }
.mock__spark--2 { background: linear-gradient(180deg, rgba(74, 200, 145, 0.4), transparent);  clip-path: polygon(0 80%, 18% 70%, 36% 45%, 55% 60%, 72% 30%, 88% 45%, 100% 20%, 100% 100%, 0 100%); }
.mock__spark--3 { background: linear-gradient(180deg, rgba(151, 120, 235, 0.35), transparent); clip-path: polygon(0 60%, 16% 75%, 34% 55%, 52% 68%, 70% 40%, 86% 52%, 100% 30%, 100% 100%, 0 100%); }

.mock__cal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 22px);
    gap: 5px;
    padding: 0.8rem;
    border-radius: 0.8rem;
    background: #ffffff;
    border: 1px solid rgba(11, 18, 32, 0.05);
}
.mock__cal::before {
    content: "";
    position: absolute;
    inset: 0.8rem;
    background:
        repeating-linear-gradient(to bottom, transparent 0 26px, rgba(11, 18, 32, 0.04) 26px 27px);
    pointer-events: none;
}
.mock__slot {
    grid-column: var(--c);
    grid-row: var(--r) / span var(--h);
    border-radius: 6px;
    background: rgba(31, 122, 224, 0.22);
    border-inline-start: 3px solid rgba(31, 122, 224, 0.65);
    padding: 3px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
}
.mock__slot i {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(11, 18, 32, 0.55);
    line-height: 1.15;
}
.mock__slot b {
    font-size: 10px;
    font-weight: 700;
    color: rgba(11, 18, 32, 0.82);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mock__slot--b { background: rgba(74, 200, 145, 0.25); border-inline-start-color: rgba(46, 170, 110, 0.65); }
.mock__slot--c { background: rgba(151, 120, 235, 0.2); border-inline-start-color: rgba(151, 120, 235, 0.6); }

.mock__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mock__row {
    height: 26px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(11, 18, 32, 0.05);
    position: relative;
}
.mock__row::before {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: 10px;
    width: 34%;
    height: 8px;
    border-radius: 4px;
    background: #e6ecf4;
}
.mock__row::after {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    width: 14%;
    height: 8px;
    border-radius: 4px;
    background: rgba(31, 122, 224, 0.2);
}

/* --- CTAs over/below device --- */
.screen-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.hero__desc {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: 46rem;
    color: var(--muted-2);
    font-size: 1.02rem;
    line-height: 1.8;
}

@media (max-width: 640px) {
    .morph__a, .morph__b { white-space: normal; }
    .mock__layout { grid-template-columns: 48px 1fr; min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__device { transform: none !important; }
    .morph { filter: none; }
    .morph__b { opacity: 0 !important; }
    .morph__a { opacity: 1 !important; filter: none !important; }
}