/* ===== Theme (keep your colors) ===== */
:root {
    --bg: #0E1014;
    --bg2: #12151B;
    --surface: rgba(255,255,255,.03);
    --surface2: rgba(255,255,255,.05);
    --border: rgba(255,255,255,.10);
    --border2: rgba(255,255,255,.14);
    --text: rgba(255,255,255,.90);
    --muted: rgba(255,255,255,.72);
    --subtle: rgba(255,255,255,.56);
    --gold: #D3B06A;
    --goldSoft: rgba(211,176,106,.18);
    --goldBorder: rgba(211,176,106,.35);
    --aqua: #86B7FF;
    --aquaSoft: rgba(134,183,255,.14);
    --shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* ===== Page shell ===== */
html:has(.lp) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.lp) {
        scroll-behavior: auto;
    }
}

.lp {
    min-height: 100vh;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.lp [data-preview-panel][hidden] {
    display: none !important;
}

.home-motion-ready .lp [data-animate-when-visible]:not(.is-in-view),
.home-motion-ready .lp [data-animate-when-visible]:not(.is-in-view) * {
    animation-play-state: paused !important;
}

/* ===== Buttons ===== */
.lpBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .lpBtn:hover {
        background: rgba(255,255,255,.06);
    }

.lpBtn--primary {
    background: var(--goldSoft);
    border-color: var(--goldBorder);
}

    .lpBtn--primary:hover {
        background: rgba(211,176,106,.24);
    }

.lpBtn--ghost {
    background: rgba(255,255,255,.03);
}

    .lpBtn--ghost:hover {
        background: rgba(0,0,0,.28);
    }

.lpBtn--soft {
    background: rgba(134,183,255,.10);
    border-color: rgba(134,183,255,.28);
}

    .lpBtn--soft:hover {
        background: rgba(134,183,255,.16);
    }

/* ===== Tags ===== */
.lpTagRow {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lpTag {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(134, 183, 255, 0.3);
    background: rgba(134, 183, 255, 0.08);
    color: rgba(134, 183, 255, 0.85);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.3s ease;
}

    .lpTag:nth-child(1) { animation-delay: 0.55s; }
    .lpTag:nth-child(2) { animation-delay: 0.65s; }
    .lpTag:nth-child(3) { animation-delay: 0.75s; }

    .lpTag:hover {
        background: rgba(134, 183, 255, 0.15);
        border-color: rgba(134, 183, 255, 0.6);
        box-shadow: 0 0 10px rgba(134, 183, 255, 0.4), inset 0 0 10px rgba(134, 183, 255, 0.05);
        transform: translateY(-2px);
    }

/* ===== Top nav (Discord-ish) ===== */
.lpNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.45), rgba(0,0,0,0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.lpNav__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.lpBrand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}

.lpBrand__mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    color: rgba(0,0,0,.9);
    background: linear-gradient(135deg, rgba(211,176,106,1), rgba(255,255,255,.75));
    box-shadow: 0 10px 30px rgba(211,176,106,.18);
}

.lpBrand__name {
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 13px;
    opacity: .92;
}

.lpNav__links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 18px;
}

.lpNav__link {
    text-decoration: none;
    color: rgba(255,255,255,.78);
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 700;
}

    .lpNav__link:hover {
        color: #fff;
        background: rgba(255,255,255,.08);
    }

.lpNav__actions {
    justify-self: end;
}

/* ===== Hero ===== */
.lpHero {
    position: relative;
    padding-top: 86px; /* nav spacing */
    min-height: 92vh;
    overflow: hidden;
}

/* “Discord-like” background: stars + gradients */
.lpHero__bg {
    position: absolute;
    inset: -40%;
    background: radial-gradient(1200px 700px at 18% 0%, rgba(211,176,106,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 78% 18%, rgba(134,183,255,.12), rgba(0,0,0,0) 55%), radial-gradient(800px 600px at 50% 95%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%), linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0));
    filter: blur(6px);
    opacity: .95;
    pointer-events: none;
}

.lpHero__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 20px 36px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 26px;
    align-items: center;
}

.lpHero__title {
    margin: 0 0 12px;
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    letter-spacing: var(--ls-title);
    line-height: var(--lh-title);
    color: rgba(255,255,255,.94);
    text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

.lpHero__lead {
    margin: 0;
    max-width: 60ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--muted);
}

.lpHero__cta {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lpHero__media {
    display: grid;
    justify-items: end;
}

/* Mock preview (you replace with image/video later) */
.lpMock {
    width: min(520px, 92vw);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,18,22,.72);
    box-shadow: 0 30px 120px rgba(0,0,0,.65);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.lpMock__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.lpMock__dots {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lpDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

.lpMock__title {
    color: rgba(255,255,255,.75);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .06em;
}

.lpMock__body {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 300px;
}

.lpMock__sidebar {
    border-right: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.lpMock__content {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.lpMock__card {
    height: 72px;
    border-radius: 16px;
    border: 1px solid rgba(134,183,255,0.25);
    background: radial-gradient(600px 200px at 20% 20%, rgba(134,183,255,.2), rgba(0,0,0,0) 60%), linear-gradient(135deg, rgba(211,176,106,.12), rgba(134,183,255,.08));
    animation: lpCardSlideIn 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
    opacity: 0;
}

.lpMock__card:nth-child(1) {
    animation-delay: 0s;
}

.lpMock__card:nth-child(2) {
    animation-delay: -0.15s;
}

.lpMock__card:nth-child(3) {
    animation-delay: -0.3s;
}

@keyframes lpCardSlideIn {
    0%, 36% {
        opacity: 0;
        transform: translateY(20px);
    }
    38% {
        opacity: 1;
        transform: translateY(2px);
    }
    41% {
        opacity: 1;
        transform: translateY(-4px);
    }
    44% {
        opacity: 1;
        transform: translateY(0);
    }
    44%, 62% {
        opacity: 1;
        transform: translateY(0);
    }
    67%, 100% {
        opacity: 0;
        transform: translateY(-18px);
    }
}

.lpHero__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(14,16,20,1));
}

/* ===== Carousel ===== */
.lpMockCarousel {
    position: relative;
    width: min(520px, 92vw);
    height: 360px;
    overflow: hidden;
}

.lpMock--carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
}

.lpMock--carousel:nth-child(1) {
    animation: lpCarouselFadeTwoFirst 8s infinite;
}

.lpMock--carousel:nth-child(2) {
    animation: lpCarouselFadeTwoSecond 8s infinite;
}

.lpMock--carousel:nth-child(3) {
    animation: lpCarouselFade3 12s infinite;
}

@keyframes lpCarouselFadeTwoFirst {
    0%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    6%, 45% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    51%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes lpCarouselFadeTwoSecond {
    0%, 45% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    51%, 92% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    98%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes lpCarouselFade1 {
    0%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    5%, 30% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    35%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes lpCarouselFade2 {
    0%, 32% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    37%, 62% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    67%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes lpCarouselFade3 {
    0%, 64% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    69%, 94% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    99%, 100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.lpMock--yakogakuHero,
.lpMock--phoneHero {
    display: grid;
    place-items: center;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lpMock--yakogakuHero {
    background: transparent;
}

.lpMock--yakogakuHero .lpYakogakuWindow {
    width: min(100%, 476px);
    height: auto;
    max-height: 100%;
}

.lpMock--phoneHero {
    background: transparent;
}

.lpMock--phoneHero .lpPhonePreview {
    height: 100%;
}

.lpMock--phoneHero .lpPhonePreview__device {
    width: min(178px, 64%);
}

.lpMock--analyticsHero {
    display: grid;
    place-items: center;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lpAnalyticsBoard {
    position: relative;
    width: min(100%, 500px);
    min-height: 334px;
    padding: 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 217, 255, 0.26);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(22, 25, 25, 0.92), rgba(7, 9, 11, 0.96)),
        radial-gradient(360px 220px at 18% 18%, rgba(241, 201, 121, 0.12), transparent 70%),
        radial-gradient(340px 220px at 80% 12%, rgba(148, 217, 255, 0.12), transparent 72%);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lpAnalyticsBoard::before {
    content: "";
    position: absolute;
    inset: 44px 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 201, 121, 0.36), rgba(148, 217, 255, 0.28), transparent);
    opacity: 0.8;
}

.lpAnalyticsBoard__top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.lpAnalyticsBoard__mark {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: rgba(15, 19, 22, 0.96);
    background: linear-gradient(135deg, #f5d78d, #d79b45);
    box-shadow: 0 8px 18px rgba(199, 143, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    font-size: 12px;
    font-weight: 1000;
    line-height: 1;
}

.lpAnalyticsBoard__heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.lpAnalyticsBoard__heading span,
.lpAnalyticsBoard__metric span,
.lpAnalyticsBoard__callout span {
    color: rgba(224, 229, 229, 0.62);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.lpAnalyticsBoard__heading strong {
    color: rgba(247, 250, 255, 0.94);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.1;
}

.lpAnalyticsBoard__status {
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(148, 217, 255, 0.2);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(148, 217, 255, 0.07);
    color: rgba(148, 217, 255, 0.9);
    font-size: 9px;
    font-weight: 1000;
    line-height: 1;
}

.lpAnalyticsBoard__metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.lpAnalyticsBoard__metric {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    background: rgba(8, 13, 17, 0.62);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.lpAnalyticsBoard__metric--gold {
    border-color: rgba(241, 201, 121, 0.28);
    background: linear-gradient(135deg, rgba(241, 201, 121, 0.13), rgba(8, 13, 17, 0.7));
}

.lpAnalyticsBoard__metric strong {
    color: rgba(148, 217, 255, 0.95);
    font-size: 22px;
    font-weight: 1000;
    line-height: .95;
}

.lpAnalyticsBoard__metric--gold strong {
    color: rgba(241, 201, 121, 0.96);
}

.lpAnalyticsBoard__chart {
    position: relative;
    z-index: 1;
    min-height: 136px;
    overflow: visible;
    border: 1px solid rgba(148, 217, 255, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(148, 217, 255, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 217, 255, 0.055) 1px, transparent 1px),
        linear-gradient(135deg, rgba(241, 201, 121, 0.055), rgba(148, 217, 255, 0.035)),
        rgba(4, 7, 9, 0.46);
    background-size: 72px 100%, 100% 42px, auto, auto;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.lpAnalyticsBoard__chart svg {
    position: absolute;
    inset: 12px 12px 8px;
    width: calc(100% - 24px);
    height: calc(100% - 20px);
}

.lpAnalyticsBoard__area {
    opacity: 0.75;
}

.lpAnalyticsBoard__line {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
    animation: lpInsightLineDraw 4.8s cubic-bezier(.45, 0, .2, 1) infinite;
}

.lpAnalyticsBoard__callout {
    position: absolute;
    right: 14px;
    top: 18px;
    width: 132px;
    padding: 9px 10px;
    border: 1px solid rgba(241, 201, 121, 0.24);
    border-radius: 12px;
    background: rgba(6, 8, 10, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpAnalyticsBoard__callout strong {
    display: block;
    margin-top: 4px;
    color: rgba(247, 250, 255, 0.92);
    font-size: 11px;
    font-weight: 1000;
    line-height: 1.1;
}

.lpAnalyticsBoard__bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 9px;
    min-height: 62px;
}

.lpAnalyticsBoard__bars,
.lpAnalyticsBoard__list {
    border: 1px solid rgba(148, 217, 255, 0.15);
    border-radius: 14px;
    background: rgba(8, 13, 17, 0.54);
}

.lpAnalyticsBoard__bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 10px 12px;
}

.lpAnalyticsBoard__bars span {
    position: relative;
    flex: 1;
    min-height: 12px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, rgba(241, 201, 121, 0.9), rgba(148, 217, 255, 0.58));
    transform-origin: center bottom;
    animation: lpInsightBarBreathe 3.8s ease-in-out infinite;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.lpAnalyticsBoard__bars span:nth-child(2) {
    animation-delay: .16s;
}

.lpAnalyticsBoard__bars span:nth-child(3) {
    animation-delay: .32s;
}

.lpAnalyticsBoard__bars span:nth-child(4) {
    animation-delay: .48s;
}

.lpAnalyticsBoard__list {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 10px 12px;
}

.lpAnalyticsBoard__list span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(224, 229, 229, 0.72);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.lpAnalyticsBoard__list strong {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(148, 217, 255, 0.82);
    box-shadow: 0 0 12px rgba(148, 217, 255, 0.22);
}

.lpAnalyticsBoard__list span:first-child strong {
    background: rgba(241, 201, 121, 0.86);
    box-shadow: 0 0 12px rgba(241, 201, 121, 0.2);
}

.lpAnalyticsBoard [data-lp-tooltip] {
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .lpAnalyticsBoard [data-lp-tooltip]::after {
        content: attr(data-lp-tooltip);
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);
        z-index: 8;
        width: max-content;
        max-width: min(220px, 62vw);
        padding: 8px 10px;
        border: 1px solid rgba(148, 217, 255, 0.24);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(6, 9, 12, 0.98), rgba(13, 17, 20, 0.96)),
            radial-gradient(circle at 12% 0%, rgba(241, 201, 121, 0.14), transparent 44%);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: rgba(232, 244, 250, 0.92);
        font-size: 10px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.02em;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -4px) scale(0.97);
        transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s ease;
    }

    .lpAnalyticsBoard__chart[data-lp-tooltip]::after {
        top: 12px;
        max-width: min(240px, 68vw);
    }

    .lpAnalyticsBoard__bars span[data-lp-tooltip]::after {
        top: auto;
        bottom: calc(100% + 8px);
        padding: 7px 9px;
        transform: translate(-50%, 5px) scale(0.97);
    }

    .lpAnalyticsBoard [data-lp-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
    }

    .lpAnalyticsBoard__metric[data-lp-tooltip]:hover {
        transform: translateY(-1px);
        border-color: rgba(148, 217, 255, 0.32);
        background: rgba(10, 16, 20, 0.72);
    }

    .lpAnalyticsBoard__metric--gold[data-lp-tooltip]:hover {
        border-color: rgba(241, 201, 121, 0.42);
        background: linear-gradient(135deg, rgba(241, 201, 121, 0.16), rgba(8, 13, 17, 0.72));
    }

    .lpAnalyticsBoard__chart[data-lp-tooltip]:hover {
        border-color: rgba(148, 217, 255, 0.3);
    }

    .lpAnalyticsBoard__bars span[data-lp-tooltip]:hover {
        filter: brightness(1.14);
        box-shadow: 0 0 18px rgba(148, 217, 255, 0.14);
    }
}

@keyframes lpInsightLineDraw {
    0% {
        stroke-dashoffset: 430;
        opacity: 0.6;
    }

    38%, 72% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -430;
        opacity: 0.66;
    }
}

@keyframes lpInsightBarBreathe {
    0%, 100% {
        opacity: 0.72;
        transform: scaleY(.82);
    }

    46% {
        opacity: 1;
        transform: scaleY(1.06);
    }

    68% {
        transform: scaleY(.98);
    }
}

.lpMock--phone {
    width: 200px;
    height: 360px;
    border-radius: 40px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border: 8px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.5);
}

.lpMock--phone .lpMock__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.lpMock__notch {
    height: 24px;
    background: rgba(0,0,0,.8);
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
    width: 120px;
    margin-bottom: 8px;
}

.lpMock__body--web {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* Website Header/Navigation - Minimal */
.lpWebsite__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 8px;
    border-bottom: 1px solid rgba(134,183,255,0.2);
}

.lpWebsite__logo {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(211,176,106,1), rgba(134,183,255,0.9));
    border-radius: 3px;
    animation: lpLogoFadeIn 0.34s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
    opacity: 0;
}

@keyframes lpLogoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.86);
    }
    68% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Navigation - Simplified */
.lpWebsite__nav {
    display: flex;
    gap: 6px;
    margin: 0;
}

.lpWebsite__nav-item {
    height: 3px;
    width: 24px;
    background: linear-gradient(90deg, rgba(134,183,255,0.85), rgba(211,176,106,0.8));
    border-radius: 1.5px;
    animation: lpNavItemFade 0.26s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
    opacity: 0;
}

.lpWebsite__nav-item:nth-child(1) {
    animation-delay: 0.05s;
}

.lpWebsite__nav-item:nth-child(2) {
    animation-delay: 0.08s;
}

@keyframes lpNavItemFade {
    0% {
        opacity: 0;
        transform: scaleX(0.6) translateY(2px);
    }
    70% {
        opacity: 1;
        transform: scaleX(1.08) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scaleX(1) translateY(0);
    }
}

/* Hero Section - Clean */
.lpWebsite__hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 16px 8px;
}

.lpWebsite__hero-title {
    height: 10px;
    background: linear-gradient(90deg, rgba(134,183,255,0.95), rgba(211,176,106,0.85));
    border-radius: 2px;
    animation: lpTitleGrow 0.36s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
    width: 0;
    margin-bottom: 2px;
}

@keyframes lpTitleGrow {
    0% {
        width: 0;
        opacity: 0;
    }
    72% {
        width: 82%;
        opacity: 1;
    }
    100% {
        width: 75%;
        opacity: 1;
    }
}

.lpWebsite__hero-title {
    animation-delay: 0.14s;
}

.lpWebsite__hero-subtitle {
    height: 5px;
    background: linear-gradient(90deg, rgba(211,176,106,0.8), rgba(134,183,255,0.7));
    border-radius: 1px;
    animation: lpSubtitleGrow 0.32s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
    width: 0;
    opacity: 0;
}

@keyframes lpSubtitleGrow {
    0% {
        width: 0;
        opacity: 0;
    }
    72% {
        width: 62%;
        opacity: 1;
    }
    100% {
        width: 55%;
        opacity: 1;
    }
}

.lpWebsite__hero-subtitle {
    animation-delay: 0.19s;
}

/* Footer/CTA */
.lpWebsite__footer {
    display: flex;
    align-items: center;
    padding: 0 8px 8px;
}

.lpWebsite__button {
    height: 7px;
    width: 50px;
    background: linear-gradient(90deg, rgba(134,183,255,0.95), rgba(211,176,106,0.9));
    border-radius: 2px;
    animation: lpButtonFade 0.3s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
    opacity: 0;
}

.lpWebsite__button {
    animation-delay: 0.24s;
}

@keyframes lpButtonFade {
    0% {
        opacity: 0;
        transform: translateY(3px) scaleX(0.82);
    }
    72% {
        opacity: 1;
        transform: translateY(-1px) scaleX(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

/* Repeat website preview animation every carousel cycle (1st slide: 5%-30% of 12s) */
.lpMock--carousel:nth-child(1) .lpWebsite__logo {
    animation: lpWebsiteLogoCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

.lpMock--carousel:nth-child(1) .lpWebsite__nav-item:nth-child(1) {
    animation: lpWebsiteNavItem1Cycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

.lpMock--carousel:nth-child(1) .lpWebsite__nav-item:nth-child(2) {
    animation: lpWebsiteNavItem2Cycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

.lpMock--carousel:nth-child(1) .lpWebsite__hero-title {
    animation: lpWebsiteTitleCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

.lpMock--carousel:nth-child(1) .lpWebsite__hero-subtitle {
    animation: lpWebsiteSubtitleCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

.lpMock--carousel:nth-child(1) .lpWebsite__button {
    animation: lpWebsiteButtonCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

@keyframes lpWebsiteLogoCycle {
    0%, 5% { opacity: 0; transform: translateY(6px) scale(0.86); }
    7% { opacity: 1; transform: translateY(-2px) scale(1.08); }
    9%, 30% { opacity: 1; transform: translateY(0) scale(1); }
    31%, 100% { opacity: 0; transform: translateY(6px) scale(0.86); }
}

@keyframes lpWebsiteNavItem1Cycle {
    0%, 6% { opacity: 0; transform: scaleX(0.6) translateY(2px); }
    8% { opacity: 1; transform: scaleX(1.08) translateY(-1px); }
    10%, 30% { opacity: 1; transform: scaleX(1) translateY(0); }
    31%, 100% { opacity: 0; transform: scaleX(0.6) translateY(2px); }
}

@keyframes lpWebsiteNavItem2Cycle {
    0%, 6.5% { opacity: 0; transform: scaleX(0.6) translateY(2px); }
    8.5% { opacity: 1; transform: scaleX(1.08) translateY(-1px); }
    10.5%, 30% { opacity: 1; transform: scaleX(1) translateY(0); }
    31%, 100% { opacity: 0; transform: scaleX(0.6) translateY(2px); }
}

@keyframes lpWebsiteTitleCycle {
    0%, 7% { width: 0; opacity: 0; }
    10% { width: 82%; opacity: 1; }
    12%, 30% { width: 75%; opacity: 1; }
    31%, 100% { width: 0; opacity: 0; }
}

@keyframes lpWebsiteSubtitleCycle {
    0%, 8% { width: 0; opacity: 0; }
    11% { width: 62%; opacity: 1; }
    13%, 30% { width: 55%; opacity: 1; }
    31%, 100% { width: 0; opacity: 0; }
}

@keyframes lpWebsiteButtonCycle {
    0%, 9% { opacity: 0; transform: translateY(3px) scaleX(0.82); }
    12% { opacity: 1; transform: translateY(-1px) scaleX(1.05); }
    14%, 30% { opacity: 1; transform: translateY(0) scaleX(1); }
    31%, 100% { opacity: 0; transform: translateY(3px) scaleX(0.82); }
}

.lpMock__header {
    height: 40px;
    background: linear-gradient(90deg, rgba(134,183,255,0.2), rgba(211,176,106,0.1));
    border-radius: 8px;
}

.lpMock__line {
    height: 8px;
    background: rgba(134,183,255,0.3);
    border-radius: 4px;
}

.lpMock__line--long {
    width: 100%;
}

.lpMock__line--medium {
    width: 85%;
}

.lpMock__line--short {
    width: 60%;
}

.lpMock__body--phone {
    gap: 8px;
}

.lpMock__app-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(134,183,255,0.85), rgba(211,176,106,0.8));
    border-radius: 12px;
    margin: 8px 0;
    animation: lpAppIconAppear 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
}

@keyframes lpAppIconAppear {
    0%, 36% {
        opacity: 0;
        transform: scale(0.78) translateY(8px);
    }
    37.5% {
        opacity: 1;
        transform: scale(1.1) translateY(-2px);
    }
    40.5% {
        opacity: 1;
        transform: scale(0.98) translateY(1px);
    }
    43%, 62% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    67%, 100% {
        opacity: 0;
        transform: scale(0.86) translateY(-8px);
    }
}

.lpMock__body--dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    height: 100%;
}

.lpMock__chart {
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(134,183,255,0.15);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 8px;
    gap: 4px;
    position: relative;
}

.lpMock__chart--bar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.lpMock__bar {
    flex: 1;
    background: linear-gradient(180deg, rgba(134,183,255,0.8), rgba(211,176,106,0.5));
    border-radius: 2px;
    min-height: 4px;
}

.lpMock__chart--pie {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-content: center;
    align-items: center;
}

.lpMock__pie-segment {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.lpMock__pie-segment--1 {
    background: conic-gradient(from 0deg, rgba(134,183,255,0.7) 0deg, rgba(134,183,255,0.7) 120deg, transparent 120deg);
    width: 24px;
    height: 24px;
}

.lpMock__pie-segment--2 {
    background: conic-gradient(from 120deg, rgba(211,176,106,0.7) 0deg, rgba(211,176,106,0.7) 150deg, transparent 150deg);
    width: 24px;
    height: 24px;
    opacity: 0.8;
    left: 4px;
    top: 2px;
}

.lpMock__pie-segment--3 {
    background: radial-gradient(circle, rgba(134,183,255,0.4) 0%, transparent 70%);
    width: 14px;
    height: 14px;
}

.lpMock__chart--line {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 6px;
}

.lpMock__chart--line svg {
    width: 100%;
    height: 100%;
}

.lpMock__stat {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: linear-gradient(135deg, rgba(134,183,255,0.1), rgba(211,176,106,0.05));
    border: 1px solid rgba(134,183,255,0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.lpMock__stat-value {
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(90deg, #86B7FF, #D3B06A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lpMock__stat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* Dashboard animations - synced with carousel visibility (69%-94% of 12s cycle) */
.lpMock--carousel:nth-child(3) .lpMock__bar {
    animation: lpBarGrowCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
    transform-origin: bottom;
}

.lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(1) {
    animation-delay: 0s;
}

.lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(2) {
    animation-delay: -0.12s;
}

.lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(3) {
    animation-delay: -0.24s;
}

.lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(4) {
    animation-delay: -0.36s;
}

@keyframes lpBarGrowCycle {
    0%, 68% {
        opacity: 0;
        transform: scaleY(0.05) translateY(6px);
    }
    70% {
        opacity: 1;
        transform: scaleY(1.14) translateY(-1px);
    }
    73%, 94% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
    97%, 100% {
        opacity: 0;
        transform: scaleY(0.9) translateY(-4px);
    }
}

.lpMock--carousel:nth-child(3) .lpMock__pie-segment {
    animation: lpPieRotateCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
    transform-origin: center;
}

.lpMock--carousel:nth-child(3) .lpMock__pie-segment--1 {
    animation-delay: 0s;
}

.lpMock--carousel:nth-child(3) .lpMock__pie-segment--2 {
    animation-delay: -0.12s;
}

.lpMock--carousel:nth-child(3) .lpMock__pie-segment--3 {
    animation-delay: -0.24s;
}

@keyframes lpPieRotateCycle {
    0%, 68% {
        transform: rotate(-90deg) scale(0.78);
        opacity: 0;
    }
    70% {
        transform: rotate(12deg) scale(1.1);
        opacity: 1;
    }
    74%, 94% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    97%, 100% {
        transform: rotate(0deg) scale(0.9);
        opacity: 0;
    }
}

.lpMock--carousel:nth-child(3) .lpMock__chart--line svg {
    animation: lpLineRevealCycle 12s cubic-bezier(0.22, 1.15, 0.36, 1) infinite;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

@keyframes lpLineRevealCycle {
    0%, 68% {
        stroke-dashoffset: 200;
        opacity: 0;
        transform: translateY(5px);
    }
    70% {
        stroke-dashoffset: 200;
        opacity: 1;
        transform: translateY(-1px);
    }
    77%, 94% {
        stroke-dashoffset: 0;
        opacity: 1;
        transform: translateY(0);
    }
    97%, 100% {
        stroke-dashoffset: 0;
        opacity: 0;
        transform: translateY(-4px);
    }
}

.lpMock--carousel:nth-child(3) .lpMock__stat {
    animation: lpStatPulseCycle 12s cubic-bezier(0.22, 1.2, 0.36, 1) infinite;
}

@keyframes lpStatPulseCycle {
    0%, 68% {
        transform: scale(0.8);
        opacity: 0;
    }
    70% {
        transform: scale(0.8);
        opacity: 0;
    }
    73% {
        transform: scale(1.08);
        opacity: 1;
    }
    76% {
        transform: scale(1);
        opacity: 1;
    }
    94% {
        transform: scale(1);
        opacity: 1;
    }
    97%, 100% {
        transform: scale(0.92);
        opacity: 0;
    }
}

/* ===== Sections ===== */
.lpSection {
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 20px 10px;
    scroll-margin-top: 30px;
}

.lpSection__head {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.lpSection__title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .02em;
    color: rgba(211,176,106,.92);
}

.lpRule {
    height: 2px;
    background: linear-gradient(to right, rgba(211,176,106,.55), rgba(255,255,255,.12));
}

.lpSection__sub {
    margin: 0;
    color: var(--subtle);
    font-size: 13px;
    max-width: 80ch;
}

/* ===== “Discord” stacked panels ===== */
.lpStack {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.lpPanel {
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover effect with glow */
.lpPanel:hover {
    border-color: rgba(134, 183, 255, 0.4);
    box-shadow: 0 0 20px rgba(134, 183, 255, 0.3), 0 18px 50px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(134, 183, 255, 0.05);
    transform: translateY(-8px);
}

.lpPanel:has(.lpMediaPlaceholder--alt):hover {
    border-color: rgba(211, 176, 106, 0.4);
    box-shadow: 0 0 20px rgba(211, 176, 106, 0.3), 0 18px 50px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(211, 176, 106, 0.05);
}

.lpPanel--split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
}

.lpPanel__media {
    padding: 22px;
    display: grid;
    position: relative;
    overflow: hidden;
}

    .lpPanel__media::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(134, 183, 255, 0) 0%, rgba(134, 183, 255, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .lpPanel:hover .lpPanel__media::before {
        opacity: 1;
    }

    .lpPanel:has(.lpMediaPlaceholder--alt) .lpPanel__media::before {
        background: linear-gradient(135deg, rgba(211, 176, 106, 0) 0%, rgba(211, 176, 106, 0.1) 100%);
    }

.lpPanel__copy {
    padding: 22px 22px 20px;
    display: grid;
    align-content: center;
    gap: 10px;
    background: rgba(0,0,0,.12);
    border-left: 1px solid rgba(255,255,255,.06);
}

.lpPanel--reverse .lpPanel__copy {
    border-left: 0;
    border-right: 1px solid rgba(255,255,255,.06);
}

.lpPanel--reverse {
    direction: rtl;
}

    .lpPanel--reverse > * {
        direction: ltr;
    }

.lpPanel__title {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.05;
    color: rgba(255,255,255,.94);
    opacity: 0;
    animation: fadeInDown 0.8s ease-out 0.3s forwards;
}

.lpPanel__text {
    margin: 0;
    color: rgba(255,255,255,.74);
    line-height: 1.6;
    max-width: 60ch;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.lpLink {
    color: rgba(134, 183, 255, 0.92);
    text-decoration: none;
    font-weight: 800;
    width: max-content;
    position: relative;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
    transition: all 0.3s ease;
}

    .lpLink:hover {
        color: rgba(134, 183, 255, 1);
        text-shadow: 0 0 8px rgba(134, 183, 255, 0.6);
        transform: translateX(4px);
    }

    .lpLink::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #86B7FF, #D3B06A);
        transition: width 0.3s ease;
    }

    .lpLink:hover::after {
        width: 100%;
    }

/* Placeholder media blocks */
.lpMediaPlaceholder {
    height: 320px;
    border-radius: 28px;
    border: 2px dashed rgba(134, 183, 255, 0.3);
    background: radial-gradient(800px 400px at 20% 20%, rgba(134, 183, 255, 0.08), rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, .22);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .60);
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .lpMediaPlaceholder:hover {
        border-color: rgba(134, 183, 255, 0.6);
        background: radial-gradient(800px 400px at 20% 20%, rgba(134, 183, 255, 0.15), rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, .22);
    }

    .lpMediaPlaceholder::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(134, 183, 255, 0.1), transparent);
        animation: none;
        pointer-events: none;
    }

.lpMediaPlaceholder--alt {
    border-color: rgba(211, 176, 106, 0.3);
    background: radial-gradient(800px 400px at 70% 20%, rgba(211, 176, 106, 0.08), rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, .22);
}

    .lpMediaPlaceholder--alt::before {
        background: linear-gradient(90deg, transparent, rgba(211, 176, 106, 0.1), transparent);
    }

    .lpMediaPlaceholder--alt:hover {
        border-color: rgba(211, 176, 106, 0.6);
        background: radial-gradient(800px 400px at 70% 20%, rgba(211, 176, 106, 0.15), rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, .22);
    }

.lpMediaPlaceholder--phonePreview {
    cursor: default;
    border-style: solid;
    border-color: rgba(148, 217, 255, 0.28);
    background:
        radial-gradient(560px 300px at 26% 16%, rgba(241, 201, 121, 0.12), transparent 62%),
        radial-gradient(520px 320px at 76% 22%, rgba(148, 217, 255, 0.13), transparent 64%),
        rgba(0, 0, 0, .24);
}

    .lpMediaPlaceholder--phonePreview:hover {
        border-color: rgba(148, 217, 255, 0.42);
        background:
            radial-gradient(560px 300px at 26% 16%, rgba(241, 201, 121, 0.14), transparent 62%),
            radial-gradient(520px 320px at 76% 22%, rgba(148, 217, 255, 0.15), transparent 64%),
            rgba(0, 0, 0, .24);
    }

.lpMediaPlaceholder__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Feature-specific animations */
.lpFeatureAnimation {
    width: min(100%, 430px);
    height: auto;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    overflow: visible;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22));
}

.lpFeatureAnimation--app {
    width: min(100%, 430px);
}

.lpFeatureAnimation--bi {
    width: min(100%, 430px);
}

.lpFeatureAnimation * {
    transform-box: fill-box;
}

.lpYakogakuWindow {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    height: min(100%, 286px);
    aspect-ratio: 3 / 2;
    border: 1px solid rgba(241, 201, 121, 0.42);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(6, 7, 10, 0.94);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(148, 217, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lpYakogakuWindow__top {
    height: 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(205, 208, 198, 0.13);
    background: linear-gradient(90deg, rgba(17, 15, 21, 0.94), rgba(11, 16, 20, 0.94));
}

.lpYakogakuWindow__dots {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
}

.lpYakogakuWindow__dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(241, 201, 121, 0.8);
}

.lpYakogakuWindow__dots span:nth-child(2) {
    background: rgba(148, 217, 255, 0.72);
}

.lpYakogakuWindow__dots span:nth-child(3) {
    background: rgba(205, 208, 198, 0.32);
}

.lpYakogakuWindow__brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(247, 250, 255, 0.94);
    font: inherit;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .18s ease;
}

.lpYakogakuWindow__brand:hover,
.lpYakogakuWindow__brand:focus-visible {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    outline: none;
}

.lpYakogakuWindow__mark {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #8f4cff, #6b35d8);
    box-shadow: 0 0 18px rgba(143, 76, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 8px;
    font-weight: 1000;
    line-height: 1;
}

.lpYakogakuWindow__nav {
    justify-self: end;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lpYakogakuWindow__navButton {
    min-height: 24px;
    min-width: 0;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(224, 229, 229, 0.58);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.lpYakogakuWindow__navButton:hover,
.lpYakogakuWindow__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.94);
    border-color: rgba(148, 217, 255, 0.18);
    background: rgba(148, 217, 255, 0.07);
    outline: none;
}

.lpYakogakuWindow__navButton.is-active {
    color: rgba(255, 245, 255, 0.96);
    border-color: rgba(161, 100, 255, 0.42);
    background: rgba(143, 76, 255, 0.26);
}

.lpYakogakuWindow__stage {
    position: relative;
    height: calc(100% - 34px);
    overflow: hidden;
    background:
        radial-gradient(220px 130px at 50% 72%, rgba(143, 76, 255, 0.18), transparent 68%),
        rgba(7, 7, 10, 0.96);
}

.lpYakogakuWindow__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.12), rgba(5, 7, 10, 0.34)),
        radial-gradient(240px 140px at 50% 58%, transparent 0%, rgba(5, 7, 10, 0.42) 78%);
}

.lpYakogakuWindow__stage:focus-visible {
    outline: 1px solid rgba(148, 217, 255, 0.34);
    outline-offset: -4px;
}

.lpYakogakuWindow__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    display: block;
    opacity: 0.88;
    filter: saturate(0.95) contrast(1.05);
    transform: scale(1.58);
}

.lpYakogakuWindow__stage--hub img,
.lpYakogakuWindow__stage--mining img {
    object-position: 50% 44%;
    transform: scale(1.46);
}

.lpYakogakuWindow__stage--hub img {
    opacity: 0.2;
    filter: saturate(0.82) contrast(1.06) blur(.4px);
}

.lpYakogakuWindow__stage--mining img {
    opacity: 0.38;
}

.lpYakogakuWindow__stage--japanese img {
    object-position: 50% 52%;
    opacity: 0.38;
    transform: scale(1.28);
}

.lpYakogakuWindow__stage--visual img {
    object-position: 62% 46%;
    opacity: 0.34;
    transform: scale(1.04);
}

.lpYakogakuMini {
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 18px 22px 44px;
    display: grid;
    align-items: center;
    color: rgba(247, 250, 255, 0.94);
    animation: lpYakogakuMiniEnter .28s cubic-bezier(.22, 1, .36, 1) both;
}

.lpYakogakuMini__hub,
.lpYakogakuMini__page {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.lpYakogakuMini__hub {
    width: min(250px, 74%);
    margin: 0 auto;
}

.lpYakogakuMini__page {
    width: min(286px, 82%);
    margin: 0 auto;
}

.lpYakogakuMini__hero {
    display: grid;
    gap: 4px;
    text-align: left;
}

.lpYakogakuMini__eyebrow {
    color: rgba(190, 144, 255, 0.92);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.lpYakogakuMini h4 {
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: 21px;
    font-weight: 1000;
    letter-spacing: 0;
    line-height: .98;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
}

.lpYakogakuMini__cards {
    display: grid;
    gap: 7px;
}

.lpYakogakuMini__card {
    display: grid;
    gap: 3px;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(190, 144, 255, 0.24);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(14, 12, 21, 0.76);
    color: rgba(247, 250, 255, 0.86);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.lpYakogakuMini__card:hover,
.lpYakogakuMini__card:focus-visible {
    border-color: rgba(190, 144, 255, 0.48);
    background:
        linear-gradient(135deg, rgba(190, 144, 255, 0.16), rgba(255, 255, 255, 0.02)),
        rgba(17, 14, 25, 0.9);
    transform: translateY(-1px);
    outline: none;
}

.lpYakogakuMini__card.is-primary {
    border-color: rgba(190, 144, 255, 0.62);
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.94), rgba(118, 69, 224, 0.9));
    color: #fff;
}

.lpYakogakuMini__card span {
    color: currentColor;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0;
    line-height: 1;
}

.lpYakogakuMini__card strong {
    color: rgba(247, 250, 255, 0.72);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.12;
}

.lpYakogakuMini__card.is-primary strong {
    color: rgba(255, 255, 255, 0.86);
}

.lpYakogakuMini__course,
.lpYakogakuMini__deck {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(190, 144, 255, 0.38);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.88), rgba(111, 63, 218, 0.76));
    box-shadow: 0 12px 34px rgba(92, 47, 172, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lpYakogakuMini__deck {
    grid-template-columns: 1fr auto;
    align-items: center;
    background: rgba(14, 12, 21, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lpYakogakuMini__course span,
.lpYakogakuMini__deck span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lpYakogakuMini__course strong,
.lpYakogakuMini__deck strong {
    color: #fff;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.1;
}

.lpYakogakuMini__progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.lpYakogakuMini__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.78);
}

.lpYakogakuMini__list,
.lpYakogakuMini__menu {
    display: grid;
    gap: 6px;
}

.lpYakogakuMini__list span,
.lpYakogakuMini__menu span {
    padding: 8px 10px;
    border: 1px solid rgba(190, 144, 255, 0.2);
    border-radius: 10px;
    background: rgba(8, 7, 12, 0.72);
    color: rgba(247, 250, 255, 0.78);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lpYakogakuMini__page--visual {
    width: min(260px, 78%);
    margin-left: 24px;
    margin-right: auto;
}

.lpYakogakuMini__menu {
    width: 130px;
}

.lpYakogakuWindow--pc {
    border-color: rgba(143, 76, 255, 0.44);
    border-radius: 16px;
    background: #090810;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.38),
        0 0 38px rgba(143, 76, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__top {
    height: 40px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    padding: 0 12px;
    border-bottom-color: rgba(190, 144, 255, 0.15);
    background: linear-gradient(90deg, rgba(14, 12, 20, 0.98), rgba(10, 9, 15, 0.98));
}

.lpYakogakuWindow__brandCluster {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.lpYakogakuWindow__menu {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    display: grid;
    align-content: center;
    gap: 4px;
    cursor: pointer;
}

.lpYakogakuWindow__menu span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: rgba(247, 250, 255, 0.46);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__brand {
    gap: 6px;
    font-size: 11px;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__mark {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #9a55ff, #7134df);
    font-size: 7px;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__nav {
    justify-self: start;
    gap: clamp(8px, 1.4vw, 14px);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton,
.lpYakogakuWindow__navText {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(224, 229, 229, 0.56);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton:hover,
.lpYakogakuWindow--pc .lpYakogakuWindow__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.96);
    border: 0;
    background: transparent;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton.is-active {
    color: rgba(190, 144, 255, 0.96);
    border: 0;
    background: transparent;
}

.lpYakogakuWindow__right {
    justify-self: end;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lpYakogakuWindow__auth {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(190, 144, 255, 0.18);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(247, 250, 255, 0.92);
    font: inherit;
    font-size: 8.5px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage {
    height: calc(100% - 40px);
    background:
        radial-gradient(260px 170px at 50% 58%, rgba(143, 76, 255, 0.18), transparent 68%),
        linear-gradient(180deg, #090810 0%, #07070b 72%, #0c0715 100%);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -78px;
    z-index: 1;
    height: 128px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(143, 76, 255, 0.96), rgba(122, 55, 231, 0.9));
    box-shadow: 0 -18px 44px rgba(143, 76, 255, 0.22);
    pointer-events: none;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage::after {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.08), rgba(5, 7, 10, 0.24)),
        radial-gradient(260px 160px at 50% 58%, transparent 0%, rgba(5, 7, 10, 0.28) 80%);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage picture {
    position: absolute;
    inset: 0;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage img {
    opacity: 0.08;
    transform: scale(1.02);
    filter: saturate(0.82) contrast(1.05) blur(.5px);
}

.lpYakogakuWindow--pc .lpYakogakuMini {
    z-index: 2;
    padding: 22px 28px 56px;
    align-items: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini__hub {
    width: min(360px, 70%);
    gap: 9px;
    margin: 0 auto;
}

.lpYakogakuWindow--pc .lpYakogakuMini__hero {
    justify-items: center;
    text-align: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini h4 {
    max-width: 11ch;
    font-size: 30px;
    line-height: .88;
    text-align: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini__cards {
    width: min(100%, 315px);
    gap: 6px;
    margin: 0 auto;
}

.lpYakogakuWindow--pc .lpYakogakuMini__card {
    min-height: 38px;
    padding: 8px 11px;
    border-color: rgba(190, 144, 255, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(18, 15, 27, 0.84);
}

.lpYakogakuWindow--pc .lpYakogakuMini__card.is-primary {
    border-color: rgba(190, 144, 255, 0.66);
    background: linear-gradient(135deg, #9852ff, #7d3ef0);
    box-shadow:
        0 13px 28px rgba(93, 48, 174, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lpYakogakuMini__card--battle {
    border-color: rgba(143, 76, 255, 0.58) !important;
    background:
        linear-gradient(135deg, rgba(143, 76, 255, 0.22), rgba(143, 76, 255, 0.05)),
        rgba(17, 13, 27, 0.84) !important;
}

.lpYakogakuMini__card--battle span {
    color: rgba(171, 103, 255, 0.98) !important;
}

.lpYakogakuMini__card--visual {
    background:
        repeating-linear-gradient(135deg, rgba(148, 217, 255, 0.06) 0 8px, transparent 8px 16px),
        rgba(24, 31, 46, 0.74) !important;
}

.lpYakogakuMini__card--visual span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lpYakogakuMini__card--visual em {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(247, 250, 255, 0.72);
    font-size: 5.5px;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpYakogakuWindow--pc .lpYakogakuMini__page {
    width: min(340px, 72%);
    gap: 9px;
}

.lpYakogakuWindow--pc .lpYakogakuMini__page h4 {
    max-width: none;
    text-align: left;
}

.lpYakogakuWindow--pc .lpYakogakuMini__course,
.lpYakogakuWindow--pc .lpYakogakuMini__deck {
    border-color: rgba(190, 144, 255, 0.56);
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.9), rgba(110, 62, 218, 0.78));
}

@keyframes lpYakogakuMiniEnter {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Efficiency animation: side-by-side comparison - STATIC */
.lpInefficient {
    animation: none;
}

.lpChaosItem {
    animation: none;
}

.lpChaosLine {
    animation: none;
}

.lpVsIcon {
    opacity: 0.7;
    animation: none;
}

.lpEfficient {
    animation: none;
}

.lpOrderItem {
    animation: none;
}

.lpSpeedIndicator {
    animation: none;
}

/* Clean & Improved Animations */

/* Block 1: Efficiency - Papers floating */
.lpPaperItem {
    animation: lpPaperFloat 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpPaperItem:nth-child(1) { 
    animation: lpPaperFloat1 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
}
.lpPaperItem:nth-child(2) { 
    animation: lpPaperFloat2 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
}
.lpPaperItem:nth-child(3) { 
    animation: lpPaperFloat3 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
}
.lpPaperItem:nth-child(4) { 
    animation: lpPaperFloat4 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
}

.lpVsIcon {
    animation: lpPulseGlow 3.5s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpEfficient .lpOrderItem {
    animation: lpSolutionFloat 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpEfficient .lpOrderItem:nth-child(1) { animation: lpSolutionFloat1 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; }
.lpEfficient .lpOrderItem:nth-child(2) { animation: lpSolutionFloat2 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; }
.lpEfficient .lpOrderItem:nth-child(3) { animation: lpSolutionFloat3 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; }
.lpEfficient .lpOrderItem:nth-child(4) { animation: lpSolutionFloat4 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; }
.lpEfficient .lpOrderItem:nth-child(5) { animation: lpSolutionFloat5 3.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; }

.lpFeatureAnimation--workflow {
    cursor: default;
    overflow: visible;
}

.lpFeatureAnimation--workflow .lpPaperItem,
.lpFeatureAnimation--workflow .lpVsIcon,
.lpFeatureAnimation--workflow .lpOrderItem {
    animation: none !important;
    transform-origin: center;
    transform-box: fill-box;
    will-change: auto;
}

/* Block 2: Website */
.lpWebsiteContent rect {
    animation: lpCascadeReveal 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    transform-origin: left center;
    transform-box: fill-box;
}

.lpWebsiteContent rect:nth-child(1) { animation-delay: 0s; }
.lpWebsiteContent rect:nth-child(2) { animation-delay: 0.3s; }
.lpWebsiteContent rect:nth-child(3) { animation-delay: 0.6s; }

/* Block 3: usable Yakoru phone preview */
.lpPhonePreview {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(246, 250, 255, 0.92);
    letter-spacing: 0;
}

.lpPhonePreview__device {
    position: relative;
    width: min(172px, 78%);
    aspect-ratio: 9 / 16;
    padding: 7px;
    border: 1px solid rgba(241, 201, 121, 0.72);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(241, 201, 121, 0.22), rgba(148, 217, 255, 0.2)),
        rgba(5, 7, 9, 0.92);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(148, 217, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lpPhonePreview__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    width: 44px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    transform: translateX(-50%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lpPhonePreview__screen {
    height: 100%;
    border: 1px solid rgba(148, 217, 255, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(15, 22, 27, 0.94), rgba(5, 7, 9, 0.98)),
        radial-gradient(160px 120px at 24% 20%, rgba(241, 201, 121, 0.12), transparent 68%),
        radial-gradient(150px 120px at 78% 16%, rgba(148, 217, 255, 0.11), transparent 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 10px 10px;
    overflow: hidden;
}

.lpPhonePreview__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
}

.lpPhonePreview__brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, filter .18s ease;
}

.lpPhonePreview__brand:hover,
.lpPhonePreview__brand:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    outline: none;
}

.lpPhonePreview__mark {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: rgba(15, 19, 22, 0.96);
    background: linear-gradient(135deg, #f5d78d, #d79b45);
    box-shadow: 0 8px 18px rgba(199, 143, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    font-size: 12px;
    font-weight: 1000;
    line-height: 1;
}

.lpPhonePreview__brandName {
    display: block;
    line-height: 1.08;
    white-space: nowrap;
}

.lpPhonePreview__brandName {
    color: rgba(247, 250, 255, 0.94);
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lpPhonePreview__content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-color: rgba(241, 201, 121, 0.62) rgba(148, 217, 255, 0.08);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.lpPhonePreview__content:focus-visible {
    outline: 1px solid rgba(148, 217, 255, 0.34);
    outline-offset: 2px;
}

.lpPhonePreview__content::-webkit-scrollbar {
    width: 5px;
}

.lpPhonePreview__content::-webkit-scrollbar-track {
    background: rgba(148, 217, 255, 0.08);
    border-radius: 999px;
}

.lpPhonePreview__content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(241, 201, 121, 0.78), rgba(148, 217, 255, 0.62));
}

.lpPhonePreview__view {
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 7px 9px 9px;
    border: 1px solid rgba(148, 217, 255, 0.15);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: lpPhonePreviewSwap .34s cubic-bezier(.22, 1, .36, 1) both;
}

.lpPhonePreview__view--home {
    border-color: rgba(241, 201, 121, 0.18);
    background:
        radial-gradient(100px 80px at 18% 6%, rgba(241, 201, 121, 0.11), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
        rgba(0, 0, 0, 0.18);
}

.lpPhonePreview__view--work {
    border-color: rgba(148, 217, 255, 0.18);
}

.lpPhonePreview__view--contact {
    border-color: rgba(241, 201, 121, 0.2);
}

.lpPhonePreview__heroBlock,
.lpPhonePreview__sectionHead {
    display: grid;
    gap: 5px;
}

.lpPhonePreview__eyebrow {
    color: rgba(241, 201, 121, 0.9);
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.lpPhonePreview__title {
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: 0;
    line-height: 1.08;
}

.lpPhonePreview__text {
    margin: 0;
    color: rgba(224, 229, 229, 0.72);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.lpPhonePreview__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
}

.lpPhonePreview__homeCards,
.lpPhonePreview__projectGrid,
.lpPhonePreview__briefList {
    display: grid;
    gap: 6px;
}

.lpPhonePreview__homeCard {
    display: grid;
    gap: 4px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(8, 13, 17, 0.72);
    color: rgba(247, 250, 255, 0.88);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-tap-highlight-color: transparent;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.lpPhonePreview__homeCard:hover,
.lpPhonePreview__homeCard:focus-visible {
    border-color: rgba(148, 217, 255, 0.32);
    background:
        linear-gradient(135deg, rgba(148, 217, 255, 0.1), rgba(255, 255, 255, 0.012)),
        rgba(10, 16, 20, 0.82);
    transform: translateY(-1px);
    outline: none;
}

.lpPhonePreview__homeCard.is-primary {
    border-color: rgba(241, 201, 121, 0.52);
    background: linear-gradient(135deg, #f2ce7f, #d99d48);
    color: rgba(17, 22, 24, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lpPhonePreview__homeCard span {
    color: currentColor;
    font-size: 10px;
    font-weight: 1000;
    line-height: 1;
}

.lpPhonePreview__homeCard strong {
    color: rgba(224, 229, 229, 0.7);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.15;
}

.lpPhonePreview__homeCard.is-primary strong {
    color: rgba(17, 22, 24, 0.72);
}

.lpPhonePreview__actions span,
.lpPhonePreview__submit {
    min-height: 24px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 8.5px;
    font-weight: 1000;
    color: rgba(17, 22, 24, 0.95);
    background: linear-gradient(135deg, #f2ce7f, #d99d48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lpPhonePreview__actions span + span {
    color: rgba(241, 201, 121, 0.92);
    border: 1px solid rgba(148, 217, 255, 0.24);
    background: rgba(8, 13, 17, 0.76);
}

.lpPhonePreview__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 11px;
    background: rgba(148, 217, 255, 0.06);
}

.lpPhonePreview__metric span,
.lpPhonePreview__project span,
.lpPhonePreview__brief span,
.lpPhonePreview__feedItem span {
    color: rgba(224, 229, 229, 0.62);
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview__metric strong,
.lpPhonePreview__project strong,
.lpPhonePreview__brief strong,
.lpPhonePreview__feedItem strong {
    color: rgba(148, 217, 255, 0.94);
    font-size: 10px;
    font-weight: 1000;
    line-height: 1.1;
}

.lpPhonePreview__project,
.lpPhonePreview__brief,
.lpPhonePreview__feedItem {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(148, 217, 255, 0.17);
    border-radius: 12px;
    background: rgba(8, 13, 17, 0.64);
}

.lpPhonePreview__project--featured {
    border-color: rgba(241, 201, 121, 0.34);
    background:
        linear-gradient(135deg, rgba(241, 201, 121, 0.16), rgba(148, 217, 255, 0.07)),
        rgba(8, 13, 17, 0.7);
}

.lpPhonePreview__project--featured strong {
    color: rgba(241, 201, 121, 0.94);
}

.lpPhonePreview__brief {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.lpPhonePreview__timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.lpPhonePreview__timeline span {
    min-width: 0;
    padding: 7px 4px;
    border: 1px solid rgba(241, 201, 121, 0.18);
    border-radius: 9px;
    background: rgba(241, 201, 121, 0.07);
    color: rgba(246, 220, 160, 0.84);
    font-size: 7.5px;
    font-weight: 1000;
    line-height: 1;
    text-align: center;
}

.lpPhonePreview__feed {
    display: grid;
    gap: 6px;
}

.lpPhonePreview__feedItem {
    background: rgba(8, 13, 17, 0.5);
}

.lpPhonePreview__note {
    padding: 8px;
    border: 1px solid rgba(241, 201, 121, 0.18);
    border-radius: 12px;
    background: rgba(241, 201, 121, 0.07);
    color: rgba(224, 229, 229, 0.72);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.34;
}

.lpPhonePreview__submit {
    margin-top: auto;
    width: 100%;
}

.lpPhonePreview__statusPill {
    display: grid;
    place-items: center;
    min-height: 25px;
    margin-top: auto;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 999px;
    background: rgba(148, 217, 255, 0.07);
    color: rgba(148, 217, 255, 0.9);
    font-size: 8.5px;
    font-weight: 1000;
    line-height: 1;
}

.lpPhonePreview__nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(148, 217, 255, 0.16);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.28);
}

.lpPhonePreview__navButton {
    min-width: 0;
    min-height: 29px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(224, 229, 229, 0.68);
    font: inherit;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.lpPhonePreview__navButton:hover,
.lpPhonePreview__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.95);
    border-color: rgba(148, 217, 255, 0.24);
    background: rgba(148, 217, 255, 0.08);
    outline: none;
}

.lpPhonePreview__navButton:focus-visible {
    box-shadow: 0 0 0 2px rgba(148, 217, 255, 0.18);
}

.lpPhonePreview__navButton.is-active {
    color: rgba(17, 22, 24, 0.96);
    border-color: rgba(241, 201, 121, 0.56);
    background: linear-gradient(135deg, #f3d28a, #d69b46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.lpPhonePreview--yakogaku .lpPhonePreview__device {
    border-color: rgba(143, 76, 255, 0.68);
    background:
        linear-gradient(145deg, rgba(143, 76, 255, 0.28), rgba(13, 11, 20, 0.96) 42%, rgba(52, 38, 86, 0.88)),
        rgba(5, 5, 9, 0.96);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(143, 76, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lpPhonePreview--yakogaku .lpPhonePreview__notch {
    top: 10px;
    width: 48px;
    background: rgba(3, 3, 6, 0.82);
}

.lpPhonePreview--yakogaku .lpPhonePreview__screen {
    position: relative;
    gap: 7px;
    padding: 22px 10px 9px;
    border-color: rgba(190, 144, 255, 0.22);
    background:
        radial-gradient(190px 150px at 50% 47%, rgba(143, 76, 255, 0.18), transparent 68%),
        radial-gradient(110px 90px at 12% 16%, rgba(143, 76, 255, 0.18), transparent 74%),
        linear-gradient(180deg, #0d0b13 0%, #07070b 56%, #08060e 100%);
}

.lpPhonePreview--yakogaku .lpPhonePreview__screen::after {
    content: "";
    position: absolute;
    left: -28%;
    right: -28%;
    bottom: -70px;
    height: 118px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(143, 76, 255, 0.96), rgba(122, 55, 231, 0.92));
    box-shadow: 0 -18px 44px rgba(143, 76, 255, 0.22);
    pointer-events: none;
}

.lpPhonePreview--yakogaku .lpPhonePreview__top,
.lpPhonePreview--yakogaku .lpPhonePreview__content,
.lpPhonePreview--yakogaku .lpPhonePreview__nav {
    position: relative;
    z-index: 1;
}

.lpPhonePreview--yakogaku .lpPhonePreview__top {
    min-height: 26px;
}

.lpYakoPhoneTop {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.lpYakoPhoneMenu {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    display: grid;
    align-content: center;
    gap: 4px;
    cursor: pointer;
}

.lpYakoPhoneMenu span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: rgba(247, 250, 255, 0.48);
}

.lpPhonePreview--yakogaku .lpPhonePreview__brand {
    gap: 5px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(135deg, #9a55ff, #7134df);
    font-size: 7px;
    box-shadow: 0 0 18px rgba(143, 76, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lpPhonePreview--yakogaku .lpPhonePreview__brandName {
    color: rgba(247, 250, 255, 0.95);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.lpYakoPhoneTopLinks {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(224, 229, 229, 0.46);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview--yakogaku .lpPhonePreview__content {
    overflow: hidden;
    padding: 0;
    scrollbar-color: rgba(143, 76, 255, 0.68) rgba(255, 255, 255, 0.06);
}

.lpPhonePreview--yakogaku .lpPhonePreview__view {
    min-height: 100%;
    gap: 9px;
    padding: 3px 2px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpPhonePreview--yakogaku .lpPhonePreview__view--home {
    background: transparent;
}

.lpYakoPhoneHubShell {
    min-height: 100%;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 4px 4px 18px;
}

.lpYakoPhoneHero {
    width: min(100%, 168px);
    margin: 0 auto;
    text-align: left;
}

.lpPhonePreview--yakogaku .lpPhonePreview__title {
    color: rgba(247, 250, 255, 0.96);
    font-size: 21px;
    line-height: .93;
    text-shadow: 0 12px 26px rgba(0, 0, 0, 0.58);
}

.lpYakoPhoneHubCards {
    width: min(100%, 172px);
    margin: 0 auto;
    gap: 6px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard {
    min-height: 40px;
    gap: 4px;
    padding: 8px 10px;
    border-color: rgba(190, 144, 255, 0.24);
    border-radius: 11px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(18, 15, 27, 0.84);
    color: rgba(247, 250, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard:hover,
.lpPhonePreview--yakogaku .lpPhonePreview__homeCard:focus-visible {
    border-color: rgba(190, 144, 255, 0.46);
    background:
        linear-gradient(135deg, rgba(190, 144, 255, 0.14), rgba(255, 255, 255, 0.018)),
        rgba(20, 16, 31, 0.94);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard.is-primary {
    border-color: rgba(190, 144, 255, 0.66);
    background: linear-gradient(135deg, #9852ff, #7d3ef0);
    color: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 13px 28px rgba(93, 48, 174, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-size: 9.2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard strong {
    color: rgba(247, 250, 255, 0.66);
    font-size: 7.5px;
    line-height: 1.15;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard.is-primary strong {
    color: rgba(255, 255, 255, 0.84);
}

.lpYakoPhoneCard--battle {
    border-color: rgba(143, 76, 255, 0.58) !important;
    background:
        linear-gradient(135deg, rgba(143, 76, 255, 0.22), rgba(143, 76, 255, 0.05)),
        rgba(17, 13, 27, 0.84) !important;
}

.lpYakoPhoneCard--battle span {
    color: rgba(171, 103, 255, 0.98) !important;
}

.lpYakoPhoneCard--visual {
    background:
        repeating-linear-gradient(135deg, rgba(148, 217, 255, 0.06) 0 7px, transparent 7px 14px),
        rgba(24, 31, 46, 0.72) !important;
}

.lpYakoPhoneCard--visual em {
    padding: 3px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(247, 250, 255, 0.72);
    font-size: 5.4px;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpPhonePreview--yakogaku .lpPhonePreview__eyebrow,
.lpPhonePreview--yakogaku .lpPhonePreview__project--featured strong {
    color: rgba(202, 176, 255, 0.96);
}

.lpYakoPhonePageHead {
    padding: 7px 6px 0;
}

.lpPhonePreview--yakogaku .lpPhonePreview__sectionHead .lpPhonePreview__title {
    font-size: 18px;
    line-height: .96;
}

.lpYakoPhoneRows {
    gap: 7px;
    padding: 0 4px 2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__project,
.lpPhonePreview--yakogaku .lpPhonePreview__brief {
    border-color: rgba(190, 144, 255, 0.2);
    border-radius: 11px;
    background: rgba(14, 12, 21, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project--featured,
.lpYakoPhoneDeckCard {
    border-color: rgba(190, 144, 255, 0.56) !important;
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.9), rgba(110, 62, 218, 0.78)) !important;
    box-shadow: 0 12px 34px rgba(92, 47, 172, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.lpPhonePreview--yakogaku .lpPhonePreview__metric,
.lpPhonePreview--yakogaku .lpPhonePreview__note {
    border-color: rgba(142, 91, 246, 0.2);
    background: rgba(142, 91, 246, 0.075);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project span,
.lpPhonePreview--yakogaku .lpPhonePreview__brief span {
    color: rgba(247, 250, 255, 0.68);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project strong,
.lpPhonePreview--yakogaku .lpPhonePreview__brief strong {
    color: rgba(247, 250, 255, 0.92);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project--featured span,
.lpPhonePreview--yakogaku .lpPhonePreview__project--featured strong,
.lpPhonePreview--yakogaku .lpYakoPhoneDeckCard span,
.lpPhonePreview--yakogaku .lpYakoPhoneDeckCard strong {
    color: rgba(255, 255, 255, 0.96);
}

.lpPhonePreview--yakogaku .lpPhonePreview__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    border-color: rgba(190, 144, 255, 0.14);
    background: rgba(8, 7, 12, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton {
    min-height: 26px;
    padding-inline: 2px;
    color: rgba(224, 229, 229, 0.58);
    font-size: 7.2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton:hover,
.lpPhonePreview--yakogaku .lpPhonePreview__navButton:focus-visible {
    border-color: rgba(190, 144, 255, 0.28);
    background: rgba(143, 76, 255, 0.12);
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton.is-active,
.lpPhonePreview--yakogaku .lpPhonePreview__statusPill {
    border-color: rgba(142, 91, 246, 0.58);
    background: linear-gradient(135deg, #8d55f5, #6533d3);
    color: rgba(255, 255, 255, 0.96);
}

.lpYakoPhoneProgress {
    height: 9px;
    padding: 2px;
    border: 1px solid rgba(142, 91, 246, 0.2);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

.lpYakoPhoneProgress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8d55f5, #f1c979);
}

.lpYakoPhoneStoryMenu {
    display: grid;
    gap: 7px;
}

.lpYakoPhoneStoryMenu button {
    min-height: 31px;
    border: 1px solid rgba(142, 91, 246, 0.24);
    border-radius: 11px;
    background: rgba(142, 91, 246, 0.09);
    color: rgba(247, 250, 255, 0.92);
    font: inherit;
    font-size: 9px;
    font-weight: 1000;
    cursor: pointer;
}

/* Block 4: Database */
.lpDataFlow {
    animation: lpDataFlowAnim 2.8s linear infinite;
}

.lpDataLine {
    stroke: rgba(232, 178, 89, 0.82);
    stroke-dasharray: 16 10;
    animation: lpDataLinePulse 2.8s ease-in-out infinite, lpDataLineTravel 2.8s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpDataLine--out {
    stroke: rgba(148, 217, 255, 0.82);
    animation-direction: normal, reverse;
}

.lpDatabaseStack {
    animation: lpDbCoreFloat 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpDbCore {
    animation: none;
}

.lpDbRing {
    animation: lpDbRingPulse 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.lpDbSuccess {
    animation: lpDbSuccessPop 3s cubic-bezier(0.22, 1.1, 0.36, 1) infinite;
}

.lpDataLine:nth-child(1) { animation-delay: 0s; }
.lpDataLine:nth-child(2) { animation-delay: 0.4s; }
.lpDataLine:nth-child(3) { animation-delay: 0.8s; }

.lpDataCheck {
    animation: lpCheckDraw 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes lpDataFlowAnim {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes lpDataLinePulse {
    0%, 100% {
        stroke-width: 2.4;
        opacity: 0.58;
    }
    50% {
        stroke-width: 3;
        opacity: 0.95;
    }
}

@keyframes lpDataLineTravel {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -26; }
}

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

@keyframes lpDbRingPulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.6; }
}

@keyframes lpDbSuccessPop {
    0%, 100% { transform: scale(0.96); opacity: 0.75; }
    50% { transform: scale(1.02); opacity: 1; }
}

/* Block 5: Power BI */
.lpBiBar {
    transform-origin: center bottom;
    transform-box: fill-box;
}

.lpBiBar rect {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: lpBiBarStep 3s cubic-bezier(0.22, 1.1, 0.36, 1) infinite;
}

.lpBiBaseline {
    stroke: rgba(148, 217, 255, 0.74);
    opacity: 0.72;
}

.lpBiBar:nth-of-type(1) rect { animation-delay: 0s; }
.lpBiBar:nth-of-type(2) rect { animation-delay: 0.12s; }
.lpBiBar:nth-of-type(3) rect { animation-delay: 0.24s; }

.lpMediaPlaceholder__icon {
    width: 48px;
    height: 48px;
    animation: lpFloatUp 3s ease-in-out infinite;
}

.lpMediaPlaceholder__arrow {
    animation: lpArrowBounce 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    transform-origin: 32px 24px;
}

.lpMediaPlaceholder__cloud {
    animation: lpCloudFloat 4s ease-in-out infinite;
    transform-origin: 32px 36px;
}

.lpMediaPlaceholder__text {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 217, 255, 0.8);
    text-align: center;
    animation: lpTextPulse 2s ease-in-out infinite;
}

.lpMediaPlaceholder--alt .lpMediaPlaceholder__text {
    color: rgba(255, 0, 127, 0.8);
}

.lpMediaPlaceholder__subtext {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0;
    animation: lpSubtextFade 2.5s ease-in-out 0.5s infinite;
}

/* ===== Stripe section (big words) ===== */
.lpStripe {
    margin-top: 44px;
    padding: 44px 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,0)), rgba(0,0,0,.10);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    isolation: isolate; /* keeps glow contained */
    align-items: center;
}

    .lpStripe::before,
    .lpStripe::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(211,176,106,.85) 0%,
            rgba(134,183,255,.85) 32%,
            rgba(211,176,106,.85) 50%,
            rgba(134,183,255,.85) 82%,
            rgba(211,176,106,.85) 100%
        );
        background-size: 200% 100%;
        animation: lpRailMove 5s linear infinite;
        filter: blur(.2px) drop-shadow(0 0 10px rgba(211,176,106,.35)) drop-shadow(0 0 12px rgba(134,183,255,.25));
        opacity: .95;
    }

    .lpStripe::before {
        top: 0;
    }

    .lpStripe::after {
        bottom: 0;
        animation-direction: reverse;
        opacity: .85;
    }

@keyframes lpRailMove {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


.lpStripe__inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    align-items: center;
    gap: 10px;
    z-index: 3;
}
    .lpStripe__inner::before {
        content: "";
        position: absolute;
        inset: -24px 0;
        background: radial-gradient(900px 180px at 15% 0%, rgba(211,176,106,.12), transparent 60%), radial-gradient(900px 180px at 85% 100%, rgba(134,183,255,.10), transparent 60%);
        opacity: .8;
        pointer-events: none;
        z-index: -1;
    }

.lpStripe__words {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center; /* center words inside flex row */
    text-align: center;
    font-weight: 1000;
    letter-spacing: .10em;
    color: #f0eadc;
    font-size: 44px;
    text-shadow: 0 4px 18px rgba(0,0,0,.75), 0 0 30px rgba(0,0,0,.6);
    position: relative;
}


    .lpStripe__words span {
        position: relative;
        font-weight: 1000;
        letter-spacing: .10em;
        color: #f0eadc;
        --shadow-flat: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
        --shadow-extrude: 0 6px 18px rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 2px 2px 0 rgba(0,0,0,.55), 3px 3px 0 rgba(0,0,0,.55), 4px 4px 0 rgba(211,176,106,.55), 5px 5px 0 rgba(134,183,255,.40), 0 0 20px rgba(211,176,106,.18), 0 0 18px rgba(134,183,255,.14);
        /* start flat */
        text-shadow: var(--shadow-flat);
        animation: lpExtrudeSnap 4.8s infinite, lpWordGlow 2.6s ease-in-out infinite;
    }
        .lpStripe__words span:nth-child(1) {
            animation-delay: 0ms, 0ms;
        }

        .lpStripe__words span:nth-child(2) {
            animation-delay: 500ms, 0ms;
        }

        .lpStripe__words span:nth-child(3) {
            animation-delay: 1000ms, 0ms;
        }

        .lpStripe__words span:nth-child(4) {
            animation-delay: 1500ms, 0ms;
        }

/* ===== Animation Keyframes for Features ===== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(134, 183, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(134, 183, 255, 0.6), 0 0 25px rgba(211, 176, 106, 0.3);
    }
}

@keyframes lpPaperFloat1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes lpPaperFloat2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes lpPaperFloat3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes lpPaperFloat4 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-9px); }
}

@keyframes lpPulseGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0px rgba(0, 217, 255, 0)); }
    50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.7)); }
}

@keyframes lpSolutionFloat1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes lpSolutionFloat2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-9px); }
}

@keyframes lpSolutionFloat3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes lpSolutionFloat4 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes lpSolutionFloat5 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes lpItemSlide {
    0%, 50% { transform: translateX(-20px); opacity: 0.2; }
    55% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes lpOrganize1 {
    0%, 100% { cx: 20; cy: 40; opacity: 0.5; }
    50% { cx: 28; cy: 35; opacity: 0.8; }
}

@keyframes lpOrganize2 {
    0%, 100% { cx: 32; cy: 55; opacity: 0.4; }
    50% { cx: 32; cy: 48; opacity: 0.75; }
}

@keyframes lpOrganize3 {
    0%, 100% { cx: 15; cy: 70; opacity: 0.6; }
    50% { cx: 28; cy: 58; opacity: 0.85; }
}

@keyframes lpOrganize4 {
    0%, 100% { cx: 28; cy: 80; opacity: 0.45; }
    50% { cx: 25; cy: 68; opacity: 0.8; }
}

@keyframes lpLineVanish {
    0%, 40% { opacity: 0.3; stroke-width: 1.5; }
    50% { opacity: 0; stroke-width: 1; }
    60%, 100% { opacity: 0; }
}

@keyframes lpAlignSlide {
    0%, 50% { transform: translateX(-15px); opacity: 0.3; }
    55% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes lpPulseGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0px rgba(0, 217, 255, 0)); }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.6)); }
}

@keyframes lpCascadeReveal {
    0%, 100% {
        transform: scaleX(0.32);
        opacity: 0.36;
    }
    34%, 82% {
        transform: scaleX(1);
        opacity: 0.95;
    }
}

@keyframes lpMomentumBounce {
    0%, 100% { transform: translateY(0) scale(0.97); opacity: 0.85; }
    30% { transform: translateY(-6px) scale(1.02); opacity: 1; }
    58% { transform: translateY(0) scale(0.99); opacity: 0.92; }
    78% { transform: translateY(-3px) scale(1.01); opacity: 0.96; }
}

@keyframes lpPhonePreviewFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes lpPhonePreviewSwap {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lpPhoneSignalPulse {
    0%, 100% {
        opacity: .72;
        transform: scale(.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lpEnergyPulse {
    0%, 100% { stroke-width: 1.5; opacity: 0.3; filter: drop-shadow(0 0 0px rgba(0, 217, 255, 0)); }
    50% { stroke-width: 3.5; opacity: 1; filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.8)); }
}

@keyframes lpCheckDraw {
    0%, 60% { opacity: 0; transform: scale(0) rotate(-90deg); }
    65% { opacity: 1; transform: scale(1.2) rotate(0deg); }
    75%, 100% { opacity: 0.9; transform: scale(1) rotate(0deg); }
}

@keyframes lpBiBarStep {
    0%, 50%, 100% {
        opacity: 0.95;
        transform: scaleY(1);
    }
    56% {
        opacity: 1;
        transform: scaleY(1.08);
    }
    62% {
        opacity: 0.92;
        transform: scaleY(0.98);
    }
    68% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes lpOrbitRotate {
    0% { transform: rotate(0deg) scaleX(0.8); opacity: 0.4; }
    50% { transform: rotate(180deg) scaleX(1); opacity: 1; }
    100% { transform: rotate(360deg) scaleX(0.8); opacity: 0.4; }
}

@keyframes lpZzzScale {
    0%, 100% {
        transform: scale(0.7);
        opacity: 0.6;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes lpZzzGlitch {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0px);
    }
    50% {
        opacity: 0.7;
        transform: translateX(2px);
    }
}

@keyframes lpZzzSlide {
    0%, 100% {
        transform: translateX(-10px);
        opacity: 0.5;
    }
    50% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes lpZzzRotate {
    0%, 100% {
        transform: rotate(0deg) scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: rotate(5deg) scale(1);
        opacity: 1;
    }
}

@keyframes lpZzzScaleWidth {
    0%, 100% {
        transform: scaleX(0.6);
        opacity: 0.5;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes lpZzzBounce {
    0%, 100% {
        transform: translateY(0px) scale(0.95);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-8px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(0px) scale(0.95);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-4px) scale(0.98);
        opacity: 0.9;
    }
}

@keyframes lpZzzPulseFlow {
    0%, 100% {
        stroke-width: 1.5;
        opacity: 0.4;
    }
    50% {
        stroke-width: 3;
        opacity: 1;
    }
}

@keyframes lpZzzCheckmark {
    0%, 100% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes lpZzzBarScale {
    0%, 100% {
        transform: scaleY(0.6);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes lpGentleGlow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes lpVsPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes lpWebsiteGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes lpAppPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes lpDataPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes lpCheckPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes lpBarGlow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes lpPieGlow {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes lpFloatUp {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes lpArrowBounce {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

@keyframes lpCloudFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-4px) translateX(2px);
        opacity: 0.9;
    }
}

@keyframes lpTextPulse {
    0%, 100% {
        opacity: 0.7;
        letter-spacing: 0.06em;
    }
    50% {
        opacity: 1;
        letter-spacing: 0.08em;
    }
}

@keyframes lpSubtextFade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lpShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Feature-specific keyframes */
@keyframes lpChaosFloat {
    0%, 100% {
        opacity: 0.6;
        cy: 0px;
    }
    50% {
        opacity: 0.3;
        cy: 8px;
    }
}

@keyframes lpChaosLineFlicker {
    0%, 100% {
        opacity: 0.3;
        stroke-width: 1.5;
    }
    50% {
        opacity: 0.1;
        stroke-width: 1;
    }
}

@keyframes lpVsPulse {
    0%, 100% {
        opacity: 0.5;
        font-size: 32px;
    }
    50% {
        opacity: 1;
        font-size: 36px;
    }
}

@keyframes lpOrderSlide {
    0% {
        opacity: 0.5;
        x: 5px;
    }
    50% {
        opacity: 1;
        x: 0px;
    }
    100% {
        opacity: 0.8;
        x: 2px;
    }
}

@keyframes lpSpeedPulse {
    0%, 100% {
        opacity: 0.5;
        stroke-width: 2;
    }
    50% {
        opacity: 1;
        stroke-width: 3;
    }
}

@keyframes lpOrderReveal {
    0%, 50% {
        opacity: 0;
    }
    67% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes lpArrowPulse {
    0%, 25% {
        opacity: 0;
    }
    33%, 67% {
        opacity: 1;
    }
    75%, 100% {
        opacity: 0;
    }
}

@keyframes lpWebsiteLoad {
    0%, 100% {
        opacity: 0.3;
        width: 0%;
    }
    50% {
        opacity: 1;
        width: 100%;
    }
}

@keyframes lpAppFadeInOut {
    0%, 100% {
        opacity: 0;
    }
    33%, 66% {
        opacity: 1;
    }
}

@keyframes lpDataFlow {
    0% {
        stroke-dashoffset: 30;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -30;
        opacity: 0;
    }
}

@keyframes lpDataValidate {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lpBarGrow {
    0%, 10% {
        height: 0;
        y: 140;
    }
    50%, 100% {
        height: 30;
        y: 110;
    }
}

@keyframes lpPieRevolve {
    0%, 100% {
        transform: rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: rotate(180deg);
        opacity: 1;
    }
}

@keyframes lpWordGlow {
    0%,100% {
        filter: drop-shadow(0 0 0 rgba(0,0,0,0));
        opacity: .92;
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(211,176,106,.20)) drop-shadow(0 0 10px rgba(134,183,255,.16));
        opacity: 1;
    }
}


@keyframes lpSheen {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}
@keyframes lpExtrudeSnap {
    /* --- FLAT (long pause) --- */
    0% {
        text-shadow: var(--shadow-flat);
        transform: translateY(0px);
    }

    22% {
        text-shadow: var(--shadow-flat);
        transform: translateY(0px);
    }
    /* --- SNAP OUT --- */
    28% {
        text-shadow: var(--shadow-extrude);
        transform: translateY(-2px);
        animation-timing-function: cubic-bezier(.10, 1.15, .30, 1.00);
    }
    /* small settle */
    34% {
        text-shadow: var(--shadow-extrude);
        transform: translateY(0px);
    }
    /* --- EXTRUDED HOLD (long pause) --- */
    60% {
        text-shadow: var(--shadow-extrude);
        transform: translateY(0px);
    }
    /* --- SNAP BACK --- */
    68% {
        text-shadow: var(--shadow-flat);
        transform: translateY(1px);
        animation-timing-function: cubic-bezier(.20, .90, .20, 1.00);
    }
    /* settle */
    74% {
        text-shadow: var(--shadow-flat);
        transform: translateY(0px);
    }
    /* rest until loop */
    100% {
        text-shadow: var(--shadow-flat);
        transform: translateY(0px);
    }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lpStripe::before, .lpStripe::after,
    .lpStripe__words, .lpStripe__words span,
    .lpStripe__words span::after {
        animation: none !important;
    }
}

.lpStripe__sub {
    margin: 0;
    color: rgba(255,255,255,.70);
    max-width: 90ch;
    line-height: 1.6;
}

/* ===== Optional cards ===== */
.lpGrid2 {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lpCard {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,12,16,.55);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px;
}

.lpCard__title {
    margin: 0;
    font-weight: 900;
    color: rgba(255,255,255,.92);
}

.lpCard__text {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 14px;
}

/* ===== Final CTA ===== */
.lpFinal {
    padding: 54px 0 60px;
}

.lpFinal__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: radial-gradient(1000px 500px at 18% 20%, rgba(211,176,106,.14), rgba(0,0,0,0) 60%), radial-gradient(900px 500px at 78% 30%, rgba(134,183,255,.12), rgba(0,0,0,0) 60%), rgba(0,0,0,.18);
    box-shadow: var(--shadow);
    padding: 28px;
    display: grid;
    gap: 10px;
    text-align: center;
}

.lpFinal__title {
    margin: 0;
    font-size: 34px;
    font-weight: 1000;
    color: #f0eadc;
}

.lpFinal__text {
    margin: 0 auto 24px;
    max-width: 60ch;
    text-align: center;
    font-size: 16px;
    color: rgba(255,255,255,.74);
    line-height: 1.6;
}

.lpFinal__cta {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Footer ===== */
.lpFooter {
    padding: 22px 0 30px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.lpFooter__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.60);
    font-size: 13px;
}

.lpFooter__links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.lpFooter__link {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-weight: 700;
}

.lpFooter__link:hover {
        color: #fff;
        text-decoration: underline;
    }

/* ===== Performance ===== */
.lpSection,
.lpPanel,
.lpStripe,
.lpGrid2,
.lpFinal,
.lpFooter {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
}

.lpHero__bg {
    inset: 0;
    filter: none;
}

.lpNav,
.lpBtn,
.lpMock,
.lpPanel,
.lpCard {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.lpMock {
    box-shadow: 0 22px 72px rgba(0,0,0,.5);
}

.lpMock--carousel {
    will-change: auto;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .lpNav__links {
        display: none;
    }
    /* like Discord: simplify nav on small screens */
    .lpHero__inner {
        grid-template-columns: 1fr;
        padding-top: 44px;
    }

    .lpHero__media {
        justify-items: start;
    }

    .lpHero__title {
        font-size: 46px;
    }

    .lpPanel--split {
        grid-template-columns: 1fr;
    }

    .lpPanel__copy {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.06);
    }

    .lpPanel--reverse {
        direction: ltr;
    }

    .lpGrid2 {
        grid-template-columns: 1fr;
    }

    .lpStripe__words {
        font-size: 34px;
    }
}


.lpScrollHint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 18px;
    color: #D3B06A;
}

/* Subtle static gradient rail at bottom of hero */
.lpHero {
    position: relative;
}

    .lpHero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px; /* thinner = more premium */
        pointer-events: none;
        z-index: 5;
        background: linear-gradient( 90deg, transparent 0%, rgba(211,176,106,.45) 20%, rgba(134,183,255,.55) 50%, rgba(211,176,106,.45) 80%, transparent 100% );
        /* Soft glow */
        filter: drop-shadow(0 0 8px rgba(211,176,106,.25)) drop-shadow(0 0 8px rgba(134,183,255,.20));
        opacity: .8;
    }



@media (max-width: 980px) {
    .lp {
        overflow-x: hidden;
    }

    .lpHero {
        min-height: auto;
        padding-top: 74px;
        overflow: visible;
    }

    .lpHero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px 18px 48px;
        align-items: start;
    }

    .lpHero__copy {
        display: contents;
    }

    .lpHero__title,
    .lpPanel__title,
    .lpFinal__title {
        letter-spacing: 0;
    }

    .lpHero__title {
        order: 1;
        font-size: var(--fs-title);
        max-width: 12ch;
    }

    .lpHero__lead {
        order: 3;
        max-width: 100%;
    }

    .lpHero__cta,
    .lpFinal__cta {
        gap: 10px;
    }

    .lpHero__media {
        order: 2;
        width: 100%;
        justify-items: center;
    }

    .lpHero__cta {
        order: 4;
    }

    .lpMockCarousel {
        width: min(100%, 420px);
        height: 300px;
        margin: 0 auto;
    }

    .lpMock {
        width: 100%;
        border-radius: 18px;
    }

    .lpMock--yakogakuHero,
    .lpMock--phoneHero,
    .lpMock--analyticsHero {
        padding: 0;
    }

    .lpMock--phoneHero .lpPhonePreview__device {
        width: min(154px, 58%);
    }

    .lpAnalyticsBoard {
        min-height: 286px;
    }

    .lpMock__body {
        min-height: 240px;
    }

    .lpMock--phone {
        width: 168px;
        height: 300px;
        border-width: 7px;
        border-radius: 34px;
    }

    .lpMock--phone .lpMock__body {
        min-height: 0;
    }

    .lpMock__content {
        gap: 9px;
        padding: 12px;
    }

    .lpMock__card {
        height: 56px;
        border-radius: 12px;
    }

    .lpSection {
        padding: 38px 18px 6px;
    }

    .lpPanel {
        border-radius: 22px;
        transform: none;
    }

    .lpPanel:hover {
        transform: none;
    }

    .lpPanel__media,
    .lpPanel__copy {
        padding: 16px;
    }

    .lpPanel__title {
        font-size: 26px;
        line-height: 1.12;
    }

    .lpMediaPlaceholder {
        height: 230px;
        border-radius: 18px;
    }

    .lpMediaPlaceholder--yakogaku {
        height: 280px;
    }

    .lpMediaPlaceholder--phonePreview {
        height: 324px;
    }

    .lpFeatureAnimation {
        width: min(100%, 390px);
        height: auto;
    }

    .lpFeatureAnimation--app {
        width: min(100%, 390px);
    }

    .lpFeatureAnimation--bi {
        width: min(100%, 390px);
    }

    .lpStripe {
        padding: 34px 0;
    }

    .lpStripe__inner {
        padding-inline: 16px;
    }

    .lpStripe__words {
        gap: 10px;
        font-size: 26px;
        letter-spacing: 0;
        line-height: 1.15;
    }

    .lpStripe__words span {
        letter-spacing: 0;
    }

    .lpGrid2 {
        grid-template-columns: 1fr;
    }

    .lpFinal {
        padding: 40px 18px 28px;
    }

    .lpFinal__inner {
        border-radius: 22px;
        padding: 24px 18px;
    }

    .lpFinal__title {
        font-size: 28px;
    }

    .lpFooter {
        padding-bottom: 18px;
    }

    .lpScrollHint {
        display: none;
    }

}

@media (max-width: 560px) {
    .lpHero {
        padding-top: 68px;
    }

    .lpHero__inner {
        padding: 26px 16px 40px;
    }

    .lpHero__title {
        max-width: none;
        text-align: center;
    }

    .lpHero__cta .lpBtn,
    .lpFinal__cta .lpBtn {
        width: 100%;
        min-height: 46px;
    }

    .lpTag {
        max-width: 100%;
        line-height: 1.25;
    }

    .lpMockCarousel {
        height: 240px;
    }

    .lpYakogakuWindow__top {
        gap: 6px;
        padding: 0 8px;
    }

    .lpYakogakuWindow__brand {
        gap: 5px;
    }

    .lpYakogakuWindow__brand > span:last-child {
        display: none;
    }

    .lpYakogakuWindow__nav {
        gap: 2px;
    }

    .lpYakogakuWindow__navButton {
        min-height: 22px;
        padding: 0 5px;
        font-size: 7.5px;
    }

    .lpYakogakuWindow__dots {
        gap: 4px;
    }

    .lpYakogakuWindow__dots span {
        width: 5px;
        height: 5px;
    }

    .lpYakogakuMini {
        padding: 13px 18px 24px;
    }

    .lpYakogakuMini__hub,
    .lpYakogakuMini__page {
        gap: 7px;
    }

    .lpYakogakuMini__cards {
        gap: 5px;
    }

    .lpYakogakuMini h4 {
        font-size: 16px;
    }

    .lpYakogakuMini__eyebrow {
        font-size: 8px;
    }

    .lpYakogakuMini__card {
        min-height: 27px;
        padding: 5px 9px;
    }

    .lpYakogakuMini__card span {
        font-size: 8.5px;
    }

    .lpYakogakuMini__card strong {
        font-size: 7px;
    }

    .lpMock__top {
        padding: 10px 12px;
    }

    .lpMock__body {
        min-height: 190px;
    }

    .lpMock--phone {
        width: 136px;
        height: 240px;
        border-width: 6px;
        border-radius: 28px;
    }

    .lpMock__notch {
        width: 86px;
        height: 18px;
    }

    .lpMock__app-icon {
        width: 34px;
        height: 34px;
        margin: 4px 0;
    }

    .lpMock__card {
        height: 42px;
    }

    .lpSection {
        padding-inline: 16px;
    }

    .lpPanel__media,
    .lpPanel__copy {
        padding: 14px;
    }

    .lpPanel__title {
        font-size: 23px;
    }

    .lpMediaPlaceholder {
        height: 220px;
    }

    .lpMediaPlaceholder--yakogaku {
        height: 242px;
    }

    .lpMediaPlaceholder--phonePreview {
        height: 308px;
    }

    .lpPhonePreview__device {
        width: min(182px, 74vw);
    }

    .lpMock--phoneHero .lpPhonePreview__device {
        width: min(132px, 54%);
    }

    .lpMock--phoneHero .lpPhonePreview__screen {
        gap: 6px;
        padding: 22px 8px 8px;
    }

    .lpMock--phoneHero .lpPhonePreview__top {
        min-height: 28px;
    }

    .lpMock--phoneHero .lpPhonePreview__mark {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        font-size: 10px;
    }

    .lpMock--phoneHero .lpPhonePreview__brandName {
        font-size: 9px;
    }

    .lpMock--phoneHero .lpPhonePreview__view {
        gap: 5px;
        padding: 7px 6px;
        border-radius: 14px;
    }

    .lpMock--phoneHero .lpPhonePreview__title {
        font-size: 12px;
    }

    .lpMock--phoneHero .lpPhonePreview__text {
        font-size: 8px;
        line-height: 1.25;
    }

    .lpMock--phoneHero .lpPhonePreview__homeCards {
        gap: 5px;
    }

    .lpMock--phoneHero .lpPhonePreview__homeCard {
        min-height: 34px;
        padding: 7px;
    }

    .lpMock--phoneHero .lpPhonePreview__homeCard span {
        font-size: 8.5px;
    }

    .lpMock--phoneHero .lpPhonePreview__homeCard strong {
        font-size: 7px;
    }

    .lpMock--phoneHero .lpPhonePreview__nav {
        gap: 2px;
        padding: 3px;
        border-radius: 13px;
    }

    .lpMock--phoneHero .lpPhonePreview__navButton {
        min-height: 24px;
        padding: 0 3px;
        border-radius: 9px;
        font-size: 7.5px;
    }

    .lpAnalyticsBoard {
        min-height: 228px;
        padding: 11px;
        gap: 8px;
        border-radius: 18px;
    }

    .lpAnalyticsBoard::before {
        inset: 37px 0 auto 0;
    }

    .lpAnalyticsBoard__top {
        gap: 7px;
    }

    .lpAnalyticsBoard__mark {
        width: 23px;
        height: 23px;
        border-radius: 8px;
        font-size: 10px;
    }

    .lpAnalyticsBoard__heading span,
    .lpAnalyticsBoard__metric span,
    .lpAnalyticsBoard__callout span {
        font-size: 7px;
    }

    .lpAnalyticsBoard__heading strong {
        font-size: 11px;
    }

    .lpAnalyticsBoard__status {
        min-height: 20px;
        padding: 0 7px;
        font-size: 7px;
    }

    .lpAnalyticsBoard__metrics {
        gap: 6px;
    }

    .lpAnalyticsBoard__metric {
        padding: 8px;
        border-radius: 12px;
        gap: 4px;
    }

    .lpAnalyticsBoard__metric strong {
        font-size: 16px;
    }

    .lpAnalyticsBoard__chart {
        min-height: 86px;
        border-radius: 13px;
        background-size: 54px 100%, 100% 30px, auto, auto;
    }

    .lpAnalyticsBoard__line {
        stroke-width: 8px;
    }

    .lpAnalyticsBoard__callout {
        right: 9px;
        top: 9px;
        width: 106px;
        padding: 7px;
        border-radius: 10px;
    }

    .lpAnalyticsBoard__callout strong {
        font-size: 8.5px;
    }

    .lpAnalyticsBoard__bottom {
        min-height: 46px;
        gap: 6px;
    }

    .lpAnalyticsBoard__bars {
        gap: 5px;
        padding: 8px;
    }

    .lpAnalyticsBoard__list {
        gap: 5px;
        padding: 8px;
    }

    .lpAnalyticsBoard__list span {
        gap: 5px;
        font-size: 7.5px;
    }

    .lpAnalyticsBoard__list strong {
        width: 6px;
        height: 6px;
    }

    .lpStripe__words {
        font-size: 22px;
        gap: 8px;
    }

    .lpFinal__title {
        font-size: 25px;
    }
}

/* ===== Restrained Rover/Shorekeeper gold-blue premium refresh ===== */
.lp {
    --lp-bg: #07090d;
    --lp-bg-2: #0d1014;
    --lp-surface: rgba(18, 20, 21, 0.86);
    --lp-surface-strong: rgba(22, 24, 25, 0.92);
    --lp-surface-soft: rgba(255, 255, 255, 0.045);
    --lp-border: rgba(205, 208, 198, 0.15);
    --lp-border-strong: rgba(219, 219, 204, 0.25);
    --lp-border-gold: rgba(232, 178, 89, 0.42);
    --lp-border-blue: rgba(155, 220, 255, 0.3);
    --lp-gold: #e8b259;
    --lp-gold-soft: #c98f42;
    --lp-blue: #94d9ff;
    --lp-blue-soft: #d0efff;
    --lp-ink: rgba(247, 250, 255, 0.94);
    --lp-muted: rgba(224, 229, 229, 0.74);
    --lp-subtle: rgba(202, 210, 209, 0.58);
    --lp-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    --lp-shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.28);
    --gold: var(--lp-gold);
    --goldSoft: rgba(232, 178, 89, 0.19);
    --goldBorder: var(--lp-border-gold);
    --aqua: var(--lp-blue);
    --aquaSoft: rgba(155, 220, 255, 0.105);
    --shadow: var(--lp-shadow);
    background:
        linear-gradient(135deg, rgba(20, 18, 14, 0.86) 0%, rgba(8, 11, 14, 0.94) 44%, rgba(5, 6, 8, 1) 100%),
        var(--lp-bg);
    color: var(--lp-ink);
}

.lp .lpBtn {
    min-height: 48px;
    border-radius: 12px;
    border-color: var(--lp-border);
    background: rgba(18, 17, 15, 0.78);
    color: var(--lp-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.lp .lpBtn:hover {
    border-color: var(--lp-border-strong);
    background: rgba(25, 23, 19, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.lp .lpBtn--primary,
.lp .lpBtn--soft {
    border-color: rgba(243, 210, 138, 0.58);
    background: linear-gradient(135deg, #f3d28a, #d49a45);
    color: #0b3a52;
    box-shadow: 0 12px 34px rgba(185, 129, 39, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.lp .lpBtn--primary:hover,
.lp .lpBtn--soft:hover {
    border-color: rgba(255, 226, 166, 0.72);
    background: linear-gradient(135deg, #ffe2a6, #dda450);
    box-shadow: 0 14px 38px rgba(185, 129, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.lp .lpBtn--ghost {
    border-color: rgba(155, 220, 255, 0.28);
    background: rgba(10, 16, 20, 0.72);
    color: rgba(246, 220, 160, 0.96);
}

.lp .lpBtn--ghost:hover {
    border-color: rgba(155, 220, 255, 0.42);
    background: rgba(13, 24, 31, 0.88);
    color: rgba(255, 231, 181, 0.98);
}

.lp .lpTag {
    border-color: rgba(232, 178, 89, 0.26);
    background: rgba(232, 178, 89, 0.07);
    color: rgba(246, 220, 160, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lp .lpTag:nth-child(even) {
    border-color: rgba(155, 220, 255, 0.26);
    background: rgba(155, 220, 255, 0.07);
    color: rgba(216, 242, 255, 0.9);
}

.lp .lpTag:hover {
    border-color: var(--lp-border-strong);
    background: rgba(155, 220, 255, 0.085);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.lp .lpHero {
    display: grid;
    align-items: center;
    min-height: clamp(560px, 84vh, 720px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}

.lp .lpHero__bg {
    inset: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(18, 22, 24, 0.52), rgba(8, 9, 11, 0.1) 46%, rgba(7, 7, 9, 0.76));
    opacity: 1;
}

.lp .lpHero__bg::before {
    content: "";
    position: absolute;
    inset: -30% -42%;
    background: linear-gradient(90deg, rgba(232, 178, 89, 0.052) 0%, rgba(232, 178, 89, 0.078) 16%, rgba(232, 178, 89, 0.052) 28%, rgba(232, 178, 89, 0.012) 40%, rgba(155, 220, 255, 0.014) 48%, rgba(155, 220, 255, 0.096) 64%, rgba(155, 220, 255, 0.078) 78%, rgba(155, 220, 255, 0.012) 90%, rgba(232, 178, 89, 0.052) 100%);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 180vw 100%;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.72) 52%, transparent 86%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.72) 52%, transparent 86%);
    filter: blur(34px);
    opacity: 0.62;
    pointer-events: none;
    will-change: background-position;
    animation: lpHeroGradientSweep 44s linear infinite;
}

@keyframes lpHeroGradientSweep {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 180vw 50%;
    }
}

.lp .lpHero__inner {
    width: min(1120px, calc(100% - 28px));
    max-width: 1120px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding-top: 62px;
    padding-bottom: 78px;
}

.lp .lpHero__copy {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: 100%;
}

.lp .lpHero__title {
    width: 100%;
    max-width: min(980px, 100%);
    margin-bottom: 0;
    color: var(--lp-ink);
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
}

.lp .lpHero__title--builder {
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: min(980px, 100%);
    min-height: 3.08em;
    line-height: 0.96;
}

.lp .lpHeroSentenceSwap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: min(100%, 21.5ch);
    min-height: 3.08em;
    overflow: hidden;
}

.lp .lpHeroSentence {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    opacity: 0;
    color: rgba(247, 250, 255, 0.97);
    text-wrap: balance;
    filter: blur(7px);
    will-change: opacity, transform, filter;
    animation: lpHeroSentenceFade 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.lp .lpHeroSentence:nth-child(2) {
    animation-delay: 3.5s;
}

.lp .lpHeroSentence:nth-child(3) {
    animation-delay: 7s;
}

.lp .lpHeroSentence:nth-child(4) {
    animation-delay: 10.5s;
}

.lp .lpHeroSentence strong {
    font: inherit;
}

.lp .lpHeroSentence--blue strong {
    color: rgba(148, 217, 255, 0.96);
    text-shadow: 0 0 28px rgba(148, 217, 255, 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroSentence--gold strong {
    color: rgba(246, 220, 160, 0.97);
    text-shadow: 0 0 28px rgba(232, 178, 89, 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroSentenceSwap.is-morphing {
    overflow: visible;
}

.lp .lpHeroMorphText {
    display: block;
    width: 100%;
    text-align: center;
}

.lp .lpHeroMorphWord {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.2em;
}

.lp .lpHeroMorphWord:last-child {
    margin-right: 0;
}

.lp .lpHeroMorphText--compact .lpHeroMorphWord {
    margin-right: 0.28em;
}

.lp .lpHeroMorphGlyph {
    display: inline-block;
    min-width: 0;
    color: rgba(247, 250, 255, 0.97);
    text-align: center;
    transform-origin: 50% 54%;
    will-change: transform, opacity, filter;
}

.lp .lpHeroMorphText--compact .lpHeroMorphGlyph {
    min-width: 0;
}

.lp .lpHeroMorphGlyph--empty {
    opacity: 0;
}

.lp .lpHeroMorphGlyph--blue {
    color: rgba(148, 217, 255, 0.96);
    text-shadow: 0 0 28px rgba(148, 217, 255, 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroMorphGlyph--gold {
    color: rgba(246, 220, 160, 0.97);
    text-shadow: 0 0 28px rgba(232, 178, 89, 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroOutcome .lpHeroMorphGlyph {
    color: rgba(226, 232, 234, 0.76);
    text-shadow: none;
}

.lp .lpHeroOutcome .lpHeroMorphGlyph--blue {
    color: rgba(213, 238, 250, 0.82);
}

.lp .lpHeroOutcome .lpHeroMorphGlyph--gold {
    color: rgba(246, 226, 184, 0.82);
}

.lp .lpHeroMorphGlyph.is-changing {
    animation: lpHeroGlyphMorph 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp .lpHeroOutcome .lpHeroMorphGlyph.is-changing {
    animation-duration: 0.96s;
}

@keyframes lpHeroGlyphMorph {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    43% {
        opacity: 0;
        transform: translateY(-0.34em) scale(0.82);
        filter: blur(8px);
    }

    44% {
        opacity: 0;
        transform: translateY(0.34em) scale(0.82);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes lpHeroSentenceFade {
    0%,
    7%,
    22% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    29%,
    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(7px);
    }
}

.lp .lpHero__lead {
    max-width: 68ch;
    margin-inline: auto;
    color: var(--lp-muted);
}

.lp .lpHeroOutcome {
    display: grid;
    place-items: center;
    width: min(100%, 76ch);
    min-height: 3.1em;
    max-width: 76ch;
    margin-top: 2px;
}

.lp .lpHeroOutcome__line {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    opacity: 0;
    color: rgba(226, 232, 234, 0.76);
    text-wrap: balance;
    filter: blur(6px);
    will-change: opacity, filter;
    animation: lpHeroOutcomeFade 14s ease-in-out infinite;
}

.lp .lpHeroOutcome__line:nth-child(2) {
    animation-delay: 3.5s;
}

.lp .lpHeroOutcome__line:nth-child(3) {
    animation-delay: 7s;
}

.lp .lpHeroOutcome__line:nth-child(4) {
    animation-delay: 10.5s;
}

.lp .lpHeroOutcome__line--blue {
    color: rgba(213, 238, 250, 0.82);
}

.lp .lpHeroOutcome__line--gold {
    color: rgba(246, 226, 184, 0.82);
}

@keyframes lpHeroOutcomeFade {
    0%,
    7%,
    22% {
        opacity: 1;
        filter: blur(0);
    }

    29%,
    100% {
        opacity: 0;
        filter: blur(6px);
    }
}

.lp .lpHero__cta {
    justify-content: center;
    margin-top: 2px;
}

.lp .lpHero::after {
    height: 1px;
    background: linear-gradient(90deg, rgba(232, 178, 89, 0.14) 0%, rgba(232, 178, 89, 0.24) 18%, rgba(232, 178, 89, 0.05) 36%, rgba(155, 220, 255, 0.06) 48%, rgba(155, 220, 255, 0.3) 66%, rgba(155, 220, 255, 0.06) 84%, rgba(232, 178, 89, 0.14) 100%) 0 50% / 130vw 100% repeat-x;
    filter: none;
    opacity: 0.36;
    animation: lpHeroRailSweep 38s linear infinite;
}

@keyframes lpHeroRailSweep {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 130vw 50%;
    }
}

.lp .lpScrollHint {
    bottom: 18px;
    width: 32px;
    height: 42px;
    border: 1px solid rgba(232, 178, 89, 0.34);
    border-radius: 999px;
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
    background: rgba(7, 11, 18, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lp .lpScrollHint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--lp-gold);
    transform: translateX(-50%);
    animation: lpScrollCue 2.6s ease-in-out infinite;
}

@keyframes lpScrollCue {
    0%, 100% {
        opacity: 0.35;
        transform: translate(-50%, 0);
    }

    45% {
        opacity: 0.9;
        transform: translate(-50%, 12px);
    }
}

.lp .lpMock {
    border-radius: 18px;
    border-color: rgba(205, 208, 198, 0.18);
    background: linear-gradient(145deg, rgba(19, 21, 21, 0.94), rgba(8, 9, 10, 0.94));
    box-shadow: var(--lp-shadow);
}

.lp .lpMock--yakogakuHero {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp .lpMock--phoneHero {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp .lpMock--analyticsHero {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp .lpMock--carousel {
    opacity: 0;
}

.lp .lpMock--carousel:nth-child(1) {
    animation: lpCarouselFade1 12s infinite;
}

.lp .lpMock--carousel:nth-child(2) {
    animation: lpCarouselFade2 12s infinite;
}

.lp .lpMock--carousel:nth-child(3) {
    animation: lpCarouselFade3 12s infinite;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar,
.lp .lpMock--carousel:nth-child(3) .lpMock__pie-segment,
.lp .lpMock--carousel:nth-child(3) .lpMock__chart--line svg,
.lp .lpMock--carousel:nth-child(3) .lpMock__stat {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar {
    animation: lpAnalyticsBarFlow 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    transform-origin: center bottom;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(1) {
    animation-delay: 0s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(2) {
    animation-delay: 0.18s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(3) {
    animation-delay: 0.36s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__bar:nth-child(4) {
    animation-delay: 0.54s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__pie-segment {
    animation: lpAnalyticsPieFlow 4.2s ease-in-out infinite !important;
    transform-origin: center;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__pie-segment--2 {
    animation-delay: 0.18s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__pie-segment--3 {
    animation-delay: 0.36s !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__chart--line svg {
    animation: lpAnalyticsLineFloat 4.4s ease-in-out infinite !important;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__chart--line polyline {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    animation: lpAnalyticsLineDraw 4.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.lp .lpMock--carousel:nth-child(3) .lpMock__stat {
    animation: lpAnalyticsStatBreathe 4.4s ease-in-out infinite !important;
}

@keyframes lpAnalyticsBarFlow {
    0%, 100% {
        opacity: 0.68;
        transform: scaleY(0.72);
    }

    46% {
        opacity: 1;
        transform: scaleY(1.08);
    }

    68% {
        transform: scaleY(0.96);
    }
}

@keyframes lpAnalyticsPieFlow {
    0%, 100% {
        opacity: 0.68;
        transform: rotate(-10deg) scale(0.88);
    }

    50% {
        opacity: 1;
        transform: rotate(14deg) scale(1.04);
    }
}

@keyframes lpAnalyticsLineFloat {
    0%, 100% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes lpAnalyticsLineDraw {
    0% {
        stroke-dashoffset: 170;
        opacity: 0.7;
    }

    42%, 72% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -170;
        opacity: 0.72;
    }
}

@keyframes lpAnalyticsStatBreathe {
    0%, 100% {
        opacity: 0.82;
        transform: scale(0.98);
    }

    48% {
        opacity: 1;
        transform: scale(1.025);
    }
}

.lp .lpMock__top {
    border-bottom-color: rgba(205, 208, 198, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.lp .lpMock__title {
    color: rgba(236, 241, 250, 0.78);
}

.lp .lpDot {
    background: rgba(205, 208, 198, 0.24);
}

.lp .lpMock__card,
.lp .lpWebsite__logo,
.lp .lpWebsite__nav-item,
.lp .lpWebsite__hero-title,
.lp .lpWebsite__hero-subtitle,
.lp .lpWebsite__button,
.lp .lpMock__app-icon,
.lp .lpMock__bar {
    background: linear-gradient(135deg, rgba(242, 205, 132, 0.86), rgba(155, 220, 255, 0.62));
}

.lp .lpMock__chart {
    border-color: rgba(155, 220, 255, 0.2);
    background: rgba(255, 255, 255, 0.025);
}

.lp .lpMock__stat {
    border-color: rgba(232, 178, 89, 0.2);
    background: linear-gradient(135deg, rgba(232, 178, 89, 0.08), rgba(155, 220, 255, 0.055));
}

.lp .lpSection__title {
    color: var(--lp-gold);
}

.lp .lpRule {
    height: 1px;
    background: linear-gradient(90deg, rgba(232, 178, 89, 0.62), rgba(155, 220, 255, 0.3), transparent);
}

.lp .lpSection__sub,
.lp .lpPanel__text,
.lp .lpCard__text,
.lp .lpFinal__text {
    color: var(--lp-muted);
}

.lp .lpPanel {
    border-radius: 22px;
    border-color: var(--lp-border);
    background: linear-gradient(135deg, rgba(20, 21, 20, 0.88), rgba(8, 9, 10, 0.92));
    box-shadow: var(--lp-shadow-soft);
}

.lp .lpPanel:hover,
.lp .lpPanel:has(.lpMediaPlaceholder--alt):hover {
    border-color: rgba(155, 220, 255, 0.26);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
    transform: translateY(-3px);
}

.lp .lpPanel__copy {
    background: rgba(5, 8, 13, 0.18);
    border-left-color: rgba(205, 208, 198, 0.1);
}

.lp .lpPanel--reverse .lpPanel__copy {
    border-right-color: rgba(205, 208, 198, 0.1);
}

.lp .lpPanel__title,
.lp .lpCard__title,
.lp .lpFinal__title {
    color: var(--lp-ink);
}

.lp .lpPanel__media::before,
.lp .lpPanel:has(.lpMediaPlaceholder--alt) .lpPanel__media::before {
    background: linear-gradient(135deg, rgba(232, 178, 89, 0.045), rgba(155, 220, 255, 0.05));
}

.lp .lpLink {
    color: rgba(246, 220, 160, 0.96);
}

.lp .lpLink:hover {
    color: rgba(209, 238, 255, 0.92);
    text-shadow: none;
    transform: translateX(3px);
}

.lp .lpLink::after {
    background: linear-gradient(90deg, var(--lp-gold), rgba(155, 220, 255, 0.46));
}

.lp .lpMediaPlaceholder {
    border: 1px solid rgba(155, 220, 255, 0.22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(18, 29, 36, 0.36), rgba(7, 8, 10, 0.68));
    cursor: default;
}

.lp .lpMediaPlaceholder:hover {
    border-color: rgba(155, 220, 255, 0.34);
    background: linear-gradient(145deg, rgba(20, 34, 43, 0.42), rgba(7, 8, 10, 0.68));
}

.lp .lpMediaPlaceholder::before,
.lp .lpMediaPlaceholder--alt::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
    opacity: 0.55;
}

.lp .lpMediaPlaceholder--alt {
    border-color: rgba(232, 178, 89, 0.24);
    background: linear-gradient(145deg, rgba(31, 25, 16, 0.42), rgba(8, 8, 10, 0.68));
}

.lp .lpMediaPlaceholder--alt:hover {
    border-color: rgba(232, 178, 89, 0.36);
    background: linear-gradient(145deg, rgba(39, 31, 18, 0.48), rgba(8, 8, 10, 0.68));
}

.lp .lpMediaPlaceholder--phonePreview {
    border-color: rgba(155, 220, 255, 0.26);
    background:
        radial-gradient(560px 300px at 26% 16%, rgba(232, 178, 89, 0.13), transparent 62%),
        radial-gradient(520px 320px at 76% 22%, rgba(155, 220, 255, 0.14), transparent 64%),
        linear-gradient(145deg, rgba(18, 29, 36, 0.28), rgba(7, 8, 10, 0.72));
}

.lp .lpMediaPlaceholder--phonePreview:hover {
    border-color: rgba(155, 220, 255, 0.38);
    background:
        radial-gradient(560px 300px at 26% 16%, rgba(232, 178, 89, 0.15), transparent 62%),
        radial-gradient(520px 320px at 76% 22%, rgba(155, 220, 255, 0.16), transparent 64%),
        linear-gradient(145deg, rgba(20, 34, 43, 0.34), rgba(7, 8, 10, 0.72));
}

.lp .lpFeatureAnimation {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.lp .lpStripe {
    background: linear-gradient(180deg, rgba(15, 17, 17, 0.9), rgba(7, 7, 9, 0.93));
    border-top-color: rgba(205, 208, 198, 0.1);
    border-bottom-color: rgba(205, 208, 198, 0.1);
}

.lp .lpStripe::before,
.lp .lpStripe::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 178, 89, 0.5), rgba(155, 220, 255, 0.34), transparent);
    background-size: 100% 100%;
    animation: none;
    filter: none;
    opacity: 0.78;
}

.lp .lpStripe__inner::before {
    background: linear-gradient(110deg, rgba(232, 178, 89, 0.09), transparent 44%, rgba(155, 220, 255, 0.07));
    opacity: 1;
}

.lp .lpStripe__words {
    color: var(--lp-ink);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.lp .lpStripe__words span {
    color: var(--lp-ink);
    --shadow-flat: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
    --shadow-extrude: 0 6px 18px rgba(0,0,0,.5), 1px 1px 0 rgba(0,0,0,.5), 2px 2px 0 rgba(0,0,0,.5), 3px 3px 0 rgba(0,0,0,.5), 4px 4px 0 rgba(232,178,89,.5), 5px 5px 0 rgba(155,220,255,.32), 0 0 18px rgba(232,178,89,.16), 0 0 16px rgba(155,220,255,.12);
    text-shadow: var(--shadow-flat);
    animation: lpExtrudeSnap 4.8s infinite, lpWordGlow 2.6s ease-in-out infinite;
}

.lp .lpStripe__words span:nth-child(odd) {
    color: rgba(246, 220, 160, 0.95);
}

.lp .lpStripe__words span:nth-child(even) {
    color: rgba(215, 242, 255, 0.92);
}

.lp .lpStripe__words span:nth-child(1) {
    animation-delay: 0ms, 0ms;
}

.lp .lpStripe__words span:nth-child(2) {
    animation-delay: 500ms, 0ms;
}

.lp .lpStripe__words span:nth-child(3) {
    animation-delay: 1000ms, 0ms;
}

.lp .lpStripe__words span:nth-child(4) {
    animation-delay: 1500ms, 0ms;
}

.lp .lpCard,
.lp .lpFinal__inner {
    border-color: var(--lp-border);
    background: linear-gradient(145deg, rgba(19, 21, 20, 0.86), rgba(8, 8, 10, 0.9));
    box-shadow: var(--lp-shadow-soft);
}

.lp .lpFinal__inner {
    border-color: rgba(232, 178, 89, 0.18);
    background:
        linear-gradient(125deg, rgba(232, 178, 89, 0.15), transparent 42%),
        linear-gradient(230deg, rgba(155, 220, 255, 0.09), transparent 50%),
        rgba(8, 8, 10, 0.93);
}

@media (prefers-reduced-motion: reduce) {
    .lp .lpHero__bg::before,
    .lp .lpHero::after {
        animation: none !important;
    }

    .lp .lpHeroSentence,
    .lp .lpHeroOutcome__line {
        animation: none !important;
        transform: none;
        filter: none;
        opacity: 0;
    }

    .lp .lpHeroSentence:first-child,
    .lp .lpHeroOutcome__line:first-child {
        opacity: 1;
    }

    .lp .lpScrollHint::before {
        animation: none !important;
    }

    .lp .lpBtn,
    .lp .lpPanel,
    .lp .lpTag,
    .lp .lpLink,
    .lp .lpYakogakuWindow__navButton,
    .lp .lpYakogakuWindow__brand,
    .lp .lpYakogakuMini__card,
    .lp .lpPhonePreview__brand,
    .lp .lpPhonePreview__homeCard,
    .lp .lpPhonePreview__navButton {
        transition: none !important;
    }

    .lp .lpYakogakuMini {
        animation: none !important;
    }

    .lp .lpPhonePreview__device,
    .lp .lpPhonePreview__view,
    .lp .lpAnalyticsBoard__line,
    .lp .lpAnalyticsBoard__bars span {
        animation: none !important;
    }
}

@media (max-width: 980px) {
    .lp .lpHero {
        min-height: auto;
    }

    .lp .lpHero__inner {
        padding: 30px 18px 48px;
    }

    .lp .lpHero__title--builder,
    .lp .lpHeroSentenceSwap {
        min-height: 3.34em;
    }

    .lp .lpHeroSentenceSwap {
        width: min(100%, 19.25ch);
    }

    .lp .lpHeroOutcome {
        width: min(100%, 58ch);
        min-height: 3.3em;
    }

    .lp .lpPanel,
    .lp .lpFinal__inner {
        border-radius: 18px;
    }

    .lp .lpPanel:hover,
    .lp .lpPanel:has(.lpMediaPlaceholder--alt):hover {
        transform: none;
    }
}

@media (max-width: 560px) {
    .lp .lpHero__inner {
        width: calc(100% - 20px);
        padding: 26px 10px 40px;
    }

    .lp .lpHero__title--builder,
    .lp .lpHeroSentenceSwap {
        min-height: 3.62em;
    }

    .lp .lpHeroSentenceSwap {
        width: min(100%, 16.8ch);
    }

    .lp .lpHeroOutcome {
        width: min(100%, 42ch);
        min-height: 3.6em;
    }

    .lp .lpBtn {
        min-height: 46px;
    }
}

@media (max-width: 760px) {
    .lp .lpHero__bg {
        background: linear-gradient(180deg, rgba(18, 22, 24, 0.44), rgba(8, 9, 11, 0.1) 42%, rgba(7, 7, 9, 0.82));
    }

    .lp .lpHero__bg::before {
        inset: -24% -72%;
        -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.68) 52%, transparent 86%);
        mask-image: radial-gradient(ellipse 82% 68% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.68) 52%, transparent 86%);
        filter: blur(28px);
        opacity: 0.48;
    }

    .lp .lpMock--carousel {
        will-change: opacity;
    }

    .lp .lpMock--carousel:nth-child(1) {
        animation: lpCarouselFade1 12s infinite !important;
    }

    .lp .lpMock--carousel:nth-child(2) {
        animation: lpCarouselFade2 12s infinite !important;
    }

    .lp .lpMock--carousel:nth-child(3) {
        animation: lpCarouselFade3 12s infinite !important;
    }

    .lp .lpPhonePreview__device,
    .lp .lpPhonePreview__view,
    .lp .lpYakogakuMini,
    .lp .lpAnalyticsBoard__line,
    .lp .lpAnalyticsBoard__bars span,
    .lp .lpPanel__title,
    .lp .lpPanel__text,
    .lp .lpLink,
    .lp .lpStripe__words,
    .lp .lpStripe__words span,
    .lp .lpScrollHint::before,
    .lp .lpPaperItem,
    .lp .lpVsIcon,
    .lp .lpOrderItem,
    .lp .lpDataLine,
    .lp .lpBiBar,
    .lp .lpDbRing,
    .lp .lpDbCore {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .lp .lpPanel__title,
    .lp .lpPanel__text,
    .lp .lpLink {
        opacity: 1;
    }

    .lp .lpAnalyticsBoard__line {
        stroke-dashoffset: 0;
    }

    .lp .lpAnalyticsBoard__bars span {
        opacity: 1;
        transform: none;
    }

    .lp .lpPanel,
    .lp .lpCard,
    .lp .lpMock,
    .lp .lpAnalyticsBoard,
    .lp .lpMediaPlaceholder,
    .lp .lpFinal__inner {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .lp .lpFeatureAnimation {
        filter: none;
    }

    .lp .lpPanel:hover,
    .lp .lpMediaPlaceholder:hover,
    .lp .lpMediaPlaceholder--alt:hover,
    .lp .lpMediaPlaceholder--phonePreview:hover {
        transform: none;
    }
}

/* ===== Premium homepage refresh ===== */
.lpPremiumFeatures {
    position: relative;
    isolation: isolate;
    padding: 92px 20px 34px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(6, 7, 10, 0.98), rgba(10, 11, 15, 0.96));
}

.lpPremiumFeatures::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 210px;
    background: linear-gradient(180deg, rgba(148, 217, 255, 0.08), transparent);
    transform: skewY(-4deg);
    transform-origin: 0 0;
}

.lpPremiumIntro,
.lpPremiumBottom__panel,
.lpFooter--premium .lpFooter__inner {
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
}

.lpPremiumIntro {
    display: grid;
    gap: 16px;
    text-align: center;
    margin-bottom: 42px;
}

.lpPremiumKicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 34px;
    padding: 8px 13px;
    border: 1px solid rgba(232, 178, 89, 0.38);
    border-radius: 999px;
    background: rgba(232, 178, 89, 0.12);
    color: rgba(246, 220, 160, 0.96);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lpPremiumIntro .lpPremiumKicker,
.lpPremiumProof__copy .lpPremiumKicker,
.lpPremiumBottom__panel .lpPremiumKicker {
    justify-self: center;
}

.lpPremiumTitle {
    max-width: 980px;
    margin: 0 auto;
    color: rgba(247, 250, 255, 0.96);
    font-size: 4.55rem;
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0;
}

.lpPremiumLead {
    max-width: 820px;
    margin: 0 auto;
    color: rgba(224, 229, 229, 0.72);
    font-size: 1.16rem;
    line-height: 1.7;
}

.lpPremiumSteps {
    width: min(1180px, 100%);
    margin-inline: auto;
    display: grid;
    gap: 30px;
}

.lpPremiumCard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
    align-items: stretch;
    gap: 26px;
    min-height: 410px;
    padding: 22px;
    border: 1px solid rgba(205, 208, 198, 0.15);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(21, 23, 24, 0.93), rgba(7, 8, 10, 0.95)),
        rgba(8, 9, 11, 0.98);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.4), 10px 10px 0 rgba(148, 217, 255, 0.08);
    overflow: hidden;
}

.lpPremiumCard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(232, 178, 89, 0.24), transparent 26%, transparent 74%, rgba(148, 217, 255, 0.2)),
        radial-gradient(520px 240px at 80% 10%, rgba(148, 217, 255, 0.11), transparent 70%);
    opacity: 0.8;
}

.lpPremiumCard--reverse {
    grid-template-columns: minmax(320px, 1.12fr) minmax(0, 0.88fr);
}

.lpPremiumCard--reverse .lpPremiumCard__copy {
    order: 2;
}

.lpPremiumCard--reverse .lpPremiumPreview,
.lpPremiumCard--reverse .lpPremiumVisual {
    order: 1;
}

.lpPremiumCard__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 22px;
}

.lpPremiumCard__copy h3 {
    margin: 0;
    max-width: 10ch;
    color: rgba(247, 250, 255, 0.96);
    font-size: 3rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
}

.lpPremiumCard--site .lpPremiumCard__copy h3,
.lpPremiumCard--data .lpPremiumCard__copy h3 {
    max-width: 11ch;
}

.lpPremiumCard__copy p {
    margin: 0;
    max-width: 58ch;
    color: rgba(224, 229, 229, 0.72);
    font-size: 1rem;
    line-height: 1.7;
}

.lpPremiumBottom__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.lpPremiumBottom__checks span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 999px;
    background: rgba(148, 217, 255, 0.075);
    color: rgba(215, 242, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 800;
}

.lpPremiumVisual,
.lpPremiumPreview,
.lpPremiumPhoneStage {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 330px;
    border: 1px solid rgba(148, 217, 255, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(460px 280px at 50% 18%, rgba(148, 217, 255, 0.14), transparent 70%),
        linear-gradient(145deg, rgba(12, 18, 24, 0.78), rgba(3, 5, 8, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    overflow: hidden;
}

.lpPremiumPreview {
    display: grid;
    place-items: center;
    padding: 20px;
}

.lpPremiumPreview .lpYakogakuWindow {
    width: min(100%, 560px);
    height: 330px;
}

.lpPremiumPhoneStage {
    display: grid;
    place-items: center;
    min-height: 440px;
    overflow: visible;
}

.lpPremiumPhoneStage .lpPhonePreview {
    width: 252px;
    transform: translateY(2px);
}

.lpPhoneMetric {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 2px;
    min-width: 132px;
    padding: 12px 14px;
    border: 1px solid rgba(232, 178, 89, 0.28);
    border-radius: 14px;
    background: rgba(8, 9, 11, 0.82);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

.lpPhoneMetric span {
    color: rgba(224, 229, 229, 0.6);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lpPhoneMetric strong {
    color: rgba(246, 220, 160, 0.96);
    font-size: 1rem;
}

.lpPhoneMetric--top {
    top: 58px;
    right: 28px;
}

.lpPhoneMetric--bottom {
    left: 26px;
    bottom: 62px;
}

.lpWorkflowBoard {
    position: absolute;
    inset: 26px;
    display: grid;
    place-items: center;
}

.lpDataConsole {
    position: absolute;
    inset: 36px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(205, 208, 198, 0.12);
    border-radius: 18px;
    background: rgba(5, 7, 10, 0.72);
}

.lpDataConsole__top {
    display: flex;
    gap: 7px;
}

.lpDataConsole__top span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(232, 178, 89, 0.78);
}

.lpDataConsole__top span:nth-child(2) {
    background: rgba(148, 217, 255, 0.68);
}

.lpDataConsole__top span:nth-child(3) {
    background: rgba(247, 250, 255, 0.46);
}

.lpDataConsole__grid {
    display: flex;
    align-items: end;
    gap: 14px;
    min-height: 150px;
    padding: 16px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
}

.lpDataConsole__grid span {
    flex: 1;
    min-width: 16px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, rgba(232, 178, 89, 0.94), rgba(148, 217, 255, 0.58));
    transform-origin: bottom;
    animation: lpPremiumBar 3.8s ease-in-out infinite;
}

.lpDataConsole__grid span:nth-child(2) { animation-delay: -0.4s; }
.lpDataConsole__grid span:nth-child(3) { animation-delay: -0.8s; }
.lpDataConsole__grid span:nth-child(4) { animation-delay: -1.2s; }
.lpDataConsole__grid span:nth-child(5) { animation-delay: -1.6s; }

.lpDataConsole__line {
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(232, 178, 89, 0.2), rgba(148, 217, 255, 0.9), rgba(232, 178, 89, 0.2));
    background-size: 200% 100%;
    animation: lpPremiumSheen 3s linear infinite;
}

.lpDataConsole__rows {
    display: grid;
    gap: 9px;
}

.lpDataConsole__rows span {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 217, 255, 0.14);
}

.lpDataConsole__rows span:nth-child(2) {
    width: 74%;
}

.lpDataConsole__rows span:nth-child(3) {
    width: 52%;
}

.lpPremiumRibbon {
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(205, 208, 198, 0.12);
    background:
        linear-gradient(90deg, rgba(232, 178, 89, 0.14), rgba(148, 217, 255, 0.09), rgba(232, 178, 89, 0.14)),
        rgba(8, 9, 11, 0.96);
}

.lpPremiumRibbon__track {
    display: flex;
    width: max-content;
    padding: 30px 0;
    white-space: nowrap;
    animation: lpPremiumMarquee 28s linear infinite;
}

.lpPremiumRibbon__group {
    display: flex;
    flex: 0 0 auto;
    gap: 28px;
    padding-right: 28px;
}

.lpPremiumRibbon__track span {
    color: rgba(247, 250, 255, 0.94);
    font-size: 3.15rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.lpPremiumRibbon__group span:nth-child(4n+1),
.lpPremiumRibbon__group span:nth-child(4n+3) {
    color: rgba(148, 217, 255, 0.92);
}

.lpPremiumRibbon__group span:nth-child(4n+2),
.lpPremiumRibbon__group span:nth-child(4n+4) {
    color: rgba(246, 220, 160, 0.94);
}

.lpPremiumProof {
    position: relative;
    isolation: isolate;
    z-index: 1;
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 86px 20px 78px;
    overflow: visible;
    background:
        radial-gradient(720px 220px at 50% 0%, rgba(211, 176, 106, 0.035), transparent 70%),
        rgba(3, 4, 7, 1);
}

.lpPremiumProof::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -124px;
    z-index: 0;
    height: 248px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background:
        radial-gradient(860px 170px at 50% 0%, rgba(134, 183, 255, 0.035), transparent 72%),
        rgba(3, 4, 7, 1);
    transform: scaleX(1.55);
    transform-origin: 50% 0;
    pointer-events: none;
}

.lpPremiumProof__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
    text-align: center;
}

.lpPremiumProof__copy h2 {
    max-width: 880px;
    margin: 0 auto;
    color: rgba(247, 250, 255, 0.95);
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
}

.lpPremiumProof__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
}

.lpPremiumProof__grid article {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 172px;
    padding: 22px;
    border: 1px solid rgba(205, 208, 198, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(18, 20, 21, 0.86), rgba(8, 9, 10, 0.9)),
        rgba(8, 9, 10, 0.94);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
}

.lpPremiumProof__grid strong {
    color: rgba(246, 220, 160, 0.96);
    font-size: 1.16rem;
}

.lpPremiumProof__grid span {
    color: rgba(224, 229, 229, 0.68);
    line-height: 1.55;
}

.lpPremiumBottom {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    justify-items: center;
    margin-top: 0;
    min-height: 860px;
    padding: 178px 20px 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(211, 176, 106, 0.04), transparent 24%, transparent 76%, rgba(134, 183, 255, 0.04)),
        radial-gradient(820px 420px at 50% 58%, rgba(211, 176, 106, 0.07), transparent 64%),
        radial-gradient(920px 480px at 74% 49%, rgba(134, 183, 255, 0.066), transparent 68%),
        linear-gradient(180deg, rgba(8, 9, 13, 0.98), rgba(5, 6, 9, 1));
}

.lpPremiumBottom::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 74%, transparent 100%);
    opacity: 0.3;
    animation: lpBottomGridDrift 18s linear infinite;
}

.lpPremiumBottom__scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    perspective: 900px;
}

.lpPremiumBottom__scene::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 55%;
    width: min(620px, 48vw);
    height: 240px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 45% 50%, rgba(246, 220, 160, 0.11), transparent 54%),
        radial-gradient(circle at 58% 50%, rgba(134, 183, 255, 0.12), transparent 58%);
    filter: blur(4px);
    opacity: 0.78;
    transform: translate(-50%, -50%);
    animation: lpBottomSourcePulse 8.8s ease-in-out infinite;
}

.lpSceneTile {
    position: absolute;
    display: block;
    --float-x: 0px;
    --float-y: -12px;
    --trail-angle: 0deg;
    --trail-length: 142px;
    --trail-left: 50%;
    --trail-top: 50%;
    --card-rotate: 0deg;
    --card-scale: 1;
    --float-b-x: 8px;
    --float-b-y: 8px;
    --float-c-x: -6px;
    --float-c-y: 10px;
    --trail-speed: 1.35s;
    --particle-speed: 1.55s;
    --trail-delay: 0s;
    --card-opacity: 0.78;
    --trail-opacity: 0.72;
    min-width: 64px;
    padding: 8px 12px;
    border: 1px solid rgba(134, 183, 255, 0.16);
    border-radius: 11px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.09), transparent 28%),
        linear-gradient(135deg, rgba(211, 176, 106, 0.15), rgba(4, 6, 9, 0.68) 48%, rgba(134, 183, 255, 0.14)),
        rgba(5, 7, 10, 0.58);
    color: rgba(218, 235, 244, 0.82);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(14px);
    opacity: var(--card-opacity);
    transform: translate3d(0, 0, 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    animation: lpBottomFloatingCard 8.8s ease-in-out infinite;
    animation-delay: var(--card-delay, 0s);
}

.lpSceneTile::before {
    content: "";
    position: absolute;
    left: var(--trail-left);
    top: var(--trail-top);
    z-index: -1;
    width: var(--trail-length);
    height: 26px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), rgba(246, 220, 160, 0.36), transparent) -96px 50% / 78px 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(134, 183, 255, 0.34), rgba(246, 220, 160, 0.2), transparent) -132px calc(50% - 7px) / 92px 1px no-repeat,
        linear-gradient(90deg, rgba(246, 220, 160, 0.66), rgba(134, 183, 255, 0.42), transparent) 0 50% / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(246, 220, 160, 0.42), rgba(134, 183, 255, 0.2), transparent) 8% calc(50% - 7px) / 72% 1px no-repeat,
        linear-gradient(90deg, rgba(134, 183, 255, 0.38), rgba(246, 220, 160, 0.18), transparent) 16% calc(50% + 7px) / 58% 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.11), transparent) 4% calc(50% + 2px) / 42% 1px no-repeat;
    mask-image: linear-gradient(90deg, #000 0%, #000 76%, transparent 100%);
    opacity: var(--trail-opacity);
    transform: translateY(-50%) rotate(var(--trail-angle));
    transform-origin: 0 50%;
    will-change: transform, opacity, background-position;
    animation: lpBottomFloatingTrail 8.8s ease-in-out infinite, lpBottomTrailFlight var(--trail-speed) linear infinite;
    animation-delay: var(--card-delay, 0s), var(--trail-delay);
}

.lpSceneTile::after {
    content: "";
    position: absolute;
    left: var(--trail-left);
    top: var(--trail-top);
    z-index: -1;
    width: calc(var(--trail-length) * 0.92);
    height: 34px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(246, 220, 160, 0.9) 0 32%, transparent 62%) 0 50% / 7px 7px no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 26%, transparent 58%) -28px calc(50% - 9px) / 5px 5px no-repeat,
        radial-gradient(circle, rgba(134, 183, 255, 0.82) 0 28%, transparent 60%) -64px calc(50% + 8px) / 6px 6px no-repeat,
        radial-gradient(circle, rgba(246, 220, 160, 0.72) 0 28%, transparent 62%) -106px calc(50% - 2px) / 4px 4px no-repeat,
        radial-gradient(circle, rgba(134, 183, 255, 0.58) 0 26%, transparent 60%) -148px calc(50% + 12px) / 4px 4px no-repeat;
    filter: drop-shadow(0 0 8px rgba(134, 183, 255, 0.18));
    mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 100%);
    opacity: var(--trail-opacity);
    transform: translateY(-50%) rotate(var(--trail-angle));
    transform-origin: 0 50%;
    will-change: background-position, opacity;
    animation: lpBottomParticleFlight var(--particle-speed) linear infinite;
    animation-delay: var(--trail-delay);
}

.lpSceneTile:nth-child(even)::before {
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), rgba(134, 183, 255, 0.34), transparent) -96px 50% / 78px 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(246, 220, 160, 0.32), rgba(134, 183, 255, 0.22), transparent) -132px calc(50% - 7px) / 92px 1px no-repeat,
        linear-gradient(90deg, rgba(134, 183, 255, 0.58), rgba(246, 220, 160, 0.38), transparent) 0 50% / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(134, 183, 255, 0.38), rgba(246, 220, 160, 0.18), transparent) 8% calc(50% - 7px) / 72% 1px no-repeat,
        linear-gradient(90deg, rgba(246, 220, 160, 0.34), rgba(134, 183, 255, 0.16), transparent) 16% calc(50% + 7px) / 58% 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent) 4% calc(50% + 2px) / 42% 1px no-repeat;
}

.lpSceneTile:nth-child(even)::after {
    background:
        radial-gradient(circle, rgba(134, 183, 255, 0.9) 0 32%, transparent 62%) 0 50% / 7px 7px no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 26%, transparent 58%) -28px calc(50% - 9px) / 5px 5px no-repeat,
        radial-gradient(circle, rgba(246, 220, 160, 0.78) 0 28%, transparent 60%) -64px calc(50% + 8px) / 6px 6px no-repeat,
        radial-gradient(circle, rgba(134, 183, 255, 0.68) 0 28%, transparent 62%) -106px calc(50% - 2px) / 4px 4px no-repeat,
        radial-gradient(circle, rgba(246, 220, 160, 0.54) 0 26%, transparent 60%) -148px calc(50% + 12px) / 4px 4px no-repeat;
    filter: drop-shadow(0 0 8px rgba(211, 176, 106, 0.16));
}

.lpSceneTile--one {
    left: 7%;
    top: 23%;
    --trail-left: 100%;
    --card-rotate: 9deg;
    --float-x: -13px;
    --float-y: -10px;
    --float-b-x: 8px;
    --float-b-y: -17px;
    --float-c-x: 12px;
    --float-c-y: 5px;
    --trail-angle: 9deg;
    --trail-length: clamp(150px, 14vw, 225px);
    border-color: rgba(211, 176, 106, 0.2);
    color: rgba(246, 220, 160, 0.82);
    --card-delay: -1.2s;
    --trail-delay: -0.15s;
}

.lpSceneTile--two {
    right: 7%;
    top: 23%;
    --trail-left: 0%;
    --card-rotate: -9deg;
    --float-x: 12px;
    --float-y: -12px;
    --float-b-x: -9px;
    --float-b-y: -17px;
    --float-c-x: -13px;
    --float-c-y: 5px;
    --trail-angle: 171deg;
    --trail-length: clamp(150px, 14vw, 225px);
    border-color: rgba(134, 183, 255, 0.18);
    --card-delay: -3.1s;
    --trail-delay: -0.72s;
}

.lpSceneTile--three {
    right: 7.8%;
    top: 68%;
    --trail-left: 0%;
    --card-rotate: 9deg;
    --float-x: 13px;
    --float-y: 10px;
    --float-b-x: -10px;
    --float-b-y: 16px;
    --float-c-x: -13px;
    --float-c-y: -6px;
    --trail-angle: 189deg;
    --trail-length: clamp(140px, 13vw, 210px);
    --card-delay: -4.4s;
    --trail-delay: -1.08s;
}

.lpSceneTile--four {
    left: 5%;
    top: 47%;
    --trail-left: 100%;
    --card-rotate: 0deg;
    --float-x: -14px;
    --float-y: 5px;
    --float-b-x: 6px;
    --float-b-y: 13px;
    --float-c-x: 12px;
    --float-c-y: -7px;
    --trail-angle: 0deg;
    --trail-length: clamp(165px, 16vw, 255px);
    --card-opacity: 0.74;
    --card-delay: -5.6s;
    --trail-delay: -0.48s;
}

.lpSceneTile--five {
    left: 7.8%;
    top: 68%;
    --trail-left: 100%;
    --card-rotate: -9deg;
    --float-x: -10px;
    --float-y: 14px;
    --float-b-x: 9px;
    --float-b-y: 16px;
    --float-c-x: 13px;
    --float-c-y: -7px;
    --trail-angle: -9deg;
    --trail-length: clamp(140px, 13vw, 210px);
    color: rgba(246, 220, 160, 0.72);
    --card-opacity: 0.72;
    --card-delay: -7.2s;
    --trail-delay: -0.92s;
}

.lpSceneTile--nine {
    right: 5%;
    top: 47%;
    --trail-left: 0%;
    --card-rotate: 0deg;
    --float-x: 10px;
    --float-y: -4px;
    --float-b-x: -8px;
    --float-b-y: -11px;
    --float-c-x: -12px;
    --float-c-y: 8px;
    --trail-angle: 180deg;
    --trail-length: clamp(165px, 16vw, 255px);
    color: rgba(246, 220, 160, 0.68);
    --card-opacity: 0.72;
    --card-delay: -5.2s;
    --trail-delay: -0.32s;
}

.lpPremiumBottom__panel {
    position: relative;
    display: grid;
    align-self: end;
    align-content: center;
    justify-items: center;
    gap: clamp(18px, 2vw, 24px);
    width: min(910px, 100%);
    max-width: 910px;
    min-height: clamp(370px, 31vw, 455px);
    margin-bottom: -1px;
    padding: clamp(42px, 5vw, 66px) clamp(28px, 5vw, 68px) clamp(46px, 5vw, 70px);
    border: 1px solid rgba(211, 176, 106, 0.13);
    border-bottom-color: rgba(205, 208, 198, 0.1);
    border-radius: 8px 8px 0 0;
    background:
        linear-gradient(120deg, rgba(211, 176, 106, 0.09), transparent 35%),
        linear-gradient(230deg, rgba(134, 183, 255, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(6, 8, 10, 0.78), rgba(5, 6, 9, 0.95));
    box-shadow: 0 -18px 58px rgba(0, 0, 0, 0.24), 0 24px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    text-align: center;
}

.lpPremiumBottom__panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 24%, rgba(211, 176, 106, 0.44) 34%, rgba(134, 183, 255, 0.32) 50%, transparent 68% 100%) top / 220% 1px no-repeat,
        linear-gradient(90deg, transparent 0 28%, rgba(134, 183, 255, 0.28) 44%, rgba(211, 176, 106, 0.36) 58%, transparent 78% 100%) bottom / 220% 1px no-repeat;
    animation: lpBottomBorderSweep 9.5s ease-in-out infinite;
}

.lpPremiumBottom__panel::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 0;
    height: 30px;
    border-inline: 1px solid rgba(134, 183, 255, 0.06);
    background: linear-gradient(180deg, rgba(5, 6, 9, 0), rgba(5, 6, 9, 0.92));
    pointer-events: none;
}

.lpPremiumBottom__panel > * {
    position: relative;
    z-index: 1;
}

.lpPremiumBottom__panel h2 {
    max-width: min(760px, 15ch);
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: clamp(2.65rem, 4vw, 4.1rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpPremiumBottom__panel p {
    max-width: 680px;
    margin: 0;
    color: rgba(224, 229, 229, 0.72);
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.65;
}

.lpFooter--premium {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 48px 20px 34px;
    background:
        linear-gradient(180deg, rgba(9, 10, 14, 0.94), rgba(5, 6, 9, 1)),
        rgba(5, 6, 9, 1);
    overflow: hidden;
}

.lpFooter--premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(910px, calc(100% - 40px));
    height: 1px;
    background: linear-gradient(90deg, rgba(211, 176, 106, 0.18), rgba(134, 183, 255, 0.16), rgba(211, 176, 106, 0.12));
    transform: translateX(-50%);
    pointer-events: none;
}

.lpFooter--premium .lpFooter__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(128px, 0.44fr) minmax(150px, 0.52fr) minmax(210px, 0.72fr);
    align-items: start;
    gap: clamp(22px, 2.7vw, 36px);
    padding-top: 0;
    border-top: 0;
}

.lpFooterPitch {
    display: grid;
    gap: 18px;
    max-width: 430px;
}

.lpFooterPitch p {
    margin: 0;
    color: rgba(224, 229, 229, 0.68);
    font-size: 1rem;
    line-height: 1.65;
}

.lpFooterBrand {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 12px;
    color: rgba(247, 250, 255, 0.9);
    text-decoration: none;
    font-weight: 950;
}

.lpFooterBrand span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #f2c979, #e8b259);
    color: rgba(13, 12, 9, 0.94);
}

.lpFooterColumn {
    display: grid;
    align-content: start;
    gap: 10px;
}

.lpFooterColumn strong {
    margin-bottom: 3px;
    color: rgba(246, 220, 160, 0.94);
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lpFooterColumn a,
.lpFooterColumn span {
    color: rgba(224, 229, 229, 0.68);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.45;
}

.lpFooterColumn a:hover {
    color: rgba(246, 220, 160, 0.96);
}

.lpFooterColumn--contact a {
    overflow-wrap: anywhere;
}

.lpFooterBottom {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 1px));
    margin: 30px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(205, 208, 198, 0.1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(202, 210, 209, 0.46);
    font-size: 0.86rem;
    font-weight: 800;
}

@media (max-width: 1020px) {
    .lpFooter--premium .lpFooter__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    }
}

@keyframes lpPremiumFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes lpPremiumBar {
    0%, 100% {
        transform: scaleY(0.92);
        opacity: 0.78;
    }

    50% {
        transform: scaleY(1.04);
        opacity: 1;
    }
}

@keyframes lpPremiumSheen {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

@keyframes lpPremiumMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes lpBottomFloatingCard {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    }

    24% {
        transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    }

    52% {
        transform: translate3d(var(--float-b-x), var(--float-b-y), 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    }

    78% {
        transform: translate3d(var(--float-c-x), var(--float-c-y), 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    }
}

@keyframes lpBottomFloatingTrail {
    0%, 100% {
        opacity: 0.34;
        transform: translateY(-50%) rotate(var(--trail-angle)) scaleX(0.82);
    }

    24% {
        opacity: var(--trail-opacity);
        transform: translateY(-50%) rotate(var(--trail-angle)) scaleX(1.02);
    }

    52% {
        opacity: 0.48;
        transform: translateY(-50%) rotate(var(--trail-angle)) scaleX(0.92);
    }

    78% {
        opacity: 0.56;
        transform: translateY(-50%) rotate(var(--trail-angle)) scaleX(1.08);
    }
}

@keyframes lpBottomTrailFlight {
    0% {
        background-position:
            -96px 50%,
            -132px calc(50% - 7px),
            0 50%,
            8% calc(50% - 7px),
            16% calc(50% + 7px),
            4% calc(50% + 2px);
    }

    100% {
        background-position:
            calc(100% + 72px) 50%,
            calc(100% + 42px) calc(50% - 7px),
            0 50%,
            8% calc(50% - 7px),
            16% calc(50% + 7px),
            4% calc(50% + 2px);
    }
}

@keyframes lpBottomParticleFlight {
    0% {
        background-position:
            0 50%,
            -28px calc(50% - 9px),
            -64px calc(50% + 8px),
            -106px calc(50% - 2px),
            -148px calc(50% + 12px);
    }

    100% {
        background-position:
            0 50%,
            calc(100% + 24px) calc(50% - 9px),
            calc(100% + 58px) calc(50% + 8px),
            calc(100% + 96px) calc(50% - 2px),
            calc(100% + 132px) calc(50% + 12px);
    }
}

@keyframes lpBottomSourcePulse {
    0%, 100% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.86);
    }

    48% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes lpBottomBorderSweep {
    0%, 100% {
        background-position: 0% top, 100% bottom;
    }

    50% {
        background-position: 100% top, 0% bottom;
    }
}

@keyframes lpBottomHorizonBreathe {
    0%, 100% {
        opacity: 0.92;
        transform: translateX(-50%) scaleX(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.025);
    }
}

@keyframes lpBottomGridDrift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 86px 0, 0 86px;
    }
}

@media (max-width: 980px) {
    .lpPremiumFeatures {
        padding-top: 70px;
    }

    .lpPremiumTitle {
        font-size: 3.3rem;
    }

    .lpPremiumCard,
    .lpPremiumCard--reverse {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
    }

    .lpPremiumCard--reverse .lpPremiumCard__copy,
    .lpPremiumCard--reverse .lpPremiumPreview,
    .lpPremiumCard--reverse .lpPremiumVisual {
        order: initial;
    }

    .lpPremiumCard__copy {
        padding: 12px;
    }

    .lpPremiumCard__copy h3,
    .lpPremiumBottom__panel h2,
    .lpPremiumProof__copy h2 {
        max-width: none;
        font-size: 2.55rem;
    }

    .lpPremiumProof__grid {
        grid-template-columns: 1fr;
    }

    .lpPremiumRibbon__track span {
        font-size: 2.35rem;
    }

    .lpPremiumBottom {
        margin-top: 0;
        min-height: 760px;
        padding-top: 148px;
    }

    .lpPremiumBottom__panel {
        width: min(760px, 100%);
        min-height: clamp(360px, 48vw, 430px);
        padding: clamp(38px, 5vw, 54px) clamp(24px, 5vw, 48px) clamp(42px, 6vw, 58px);
    }

    .lpPremiumBottom__panel h2 {
        max-width: 15ch;
        font-size: clamp(2.35rem, 5.4vw, 3.05rem);
    }

    .lpPremiumBottom__scene {
        display: none;
    }

}

@media (max-width: 760px) {
    .lpPremiumFeatures {
        padding: 56px 16px 24px;
    }

    .lpPremiumTitle {
        font-size: 2.35rem;
        line-height: 1.03;
    }

    .lpPremiumLead {
        font-size: 1rem;
    }

    .lpPremiumSteps {
        gap: 18px;
    }

    .lpPremiumCard {
        padding: 14px;
        border-radius: 18px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
    }

    .lpPremiumCard__copy h3 {
        font-size: 2rem;
        line-height: 1.04;
    }

    .lpPremiumVisual,
    .lpPremiumPreview,
    .lpPremiumPhoneStage {
        min-height: 300px;
        border-radius: 16px;
    }

    .lpPremiumPreview {
        padding: 12px;
    }

    .lpPremiumPreview .lpYakogakuWindow {
        height: 260px;
    }

    .lpPremiumPhoneStage {
        min-height: 400px;
        overflow: hidden;
    }

    .lpPremiumPhoneStage .lpPhonePreview {
        width: 222px;
    }

    .lpPhoneMetric {
        display: none;
    }

    .lpWorkflowBoard {
        inset: 16px;
    }

    .lpDataConsole {
        inset: 16px;
    }

    .lpPremiumRibbon__track {
        padding: 22px 0;
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .lpPremiumRibbon__group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        padding-right: 0;
    }

    .lpPremiumRibbon__group:nth-child(n+2),
    .lpPremiumRibbon__group span:nth-child(n+5) {
        display: none;
    }

    .lpPremiumRibbon__track span {
        font-size: 1.32rem;
    }

    .lpPremiumProof {
        padding: 56px 16px 36px;
    }

    .lpPremiumProof__copy h2,
    .lpPremiumBottom__panel h2 {
        font-size: 2.1rem;
        line-height: 1.05;
    }

    .lpPremiumBottom {
        margin-top: 0;
        min-height: auto;
        padding: 112px 16px 0;
    }

    .lpPremiumBottom__panel {
        gap: clamp(15px, 4vw, 20px);
        min-height: clamp(340px, 72vw, 420px);
        padding: clamp(34px, 9vw, 48px) 20px clamp(38px, 10vw, 56px);
        border-radius: 8px 8px 0 0;
    }

    .lpPremiumBottom__panel h2 {
        max-width: 14ch;
        font-size: clamp(2rem, 8.2vw, 2.52rem);
        line-height: 1.03;
    }

    .lpPremiumBottom__panel p {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .lpPremiumBottom__checks {
        justify-content: center;
        gap: 7px;
    }

    .lpPremiumBottom__checks span {
        min-height: 29px;
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .lpSceneTile {
        display: none;
    }

    .lpFooter--premium .lpFooter__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .lpFooterPitch {
        max-width: none;
    }

    .lpFooterBottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lpDataConsole__grid span,
    .lpDataConsole__line {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpDataConsole__grid span,
    .lpDataConsole__line,
    .lpPremiumRibbon__track,
    .lpPremiumBottom::before,
    .lpPremiumBottom::after,
    .lpPremiumBottom__scene::before,
    .lpSceneTile,
    .lpSceneTile::before,
    .lpSceneTile::after,
    .lpPremiumBottom__panel::before {
        animation: none !important;
    }
}

/* ===== Premium story upgrade ===== */
.lpPremiumFeatures--story {
    padding-bottom: clamp(132px, 11vw, 180px);
}

.lpPremiumFeatures--story .lpPremiumIntro {
    margin-bottom: 56px;
}

.lpPremiumSteps--story {
    gap: clamp(76px, 8vw, 104px);
}

.lpPremiumStep {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(380px, 1.12fr);
    align-items: center;
    gap: 42px;
    min-height: 510px;
    padding: 22px;
    overflow: hidden;
}

.lpPremiumStep::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(205, 208, 198, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(115deg, rgba(232, 178, 89, 0.13), transparent 30%),
        linear-gradient(245deg, rgba(148, 217, 255, 0.13), transparent 38%),
        rgba(8, 9, 11, 0.78);
    box-shadow: 0 34px 78px rgba(0, 0, 0, 0.36), 10px 10px 0 rgba(148, 217, 255, 0.055);
}

.lpPremiumStep::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    pointer-events: none;
}

.lpPremiumStep--reverse {
    grid-template-columns: minmax(380px, 1.12fr) minmax(300px, 0.88fr);
}

.lpPremiumStep--reverse .lpPremiumStep__copy {
    order: 2;
}

.lpPremiumStep--reverse .lpProductScene,
.lpPremiumStep--reverse .lpPremiumVisual {
    order: 1;
}

.lpPremiumStep__copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 15px;
    align-content: center;
    min-height: 388px;
    padding: 34px 36px 34px 40px;
    border: 1px solid rgba(211, 176, 106, 0.16);
    border-radius: 8px;
    background:
        radial-gradient(420px 220px at 0% 0%, rgba(211, 176, 106, 0.12), transparent 64%),
        radial-gradient(360px 220px at 100% 12%, rgba(134, 183, 255, 0.08), transparent 68%),
        linear-gradient(145deg, rgba(15, 18, 22, 0.96), rgba(6, 8, 11, 0.97));
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpPremiumStep__copy::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 34px;
    bottom: 34px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(211, 176, 106, 0.9), rgba(134, 183, 255, 0.32));
}

.lpPremiumStep--reverse .lpPremiumStep__copy {
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpPremiumStep__copy h3 {
    margin: 0;
    max-width: 12.5ch;
    color: rgba(247, 250, 255, 0.96);
    font-size: 2.88rem;
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: 0;
    text-shadow: none;
}

.lpPremiumStep--site .lpPremiumStep__copy h3,
.lpPremiumStep--phone .lpPremiumStep__copy h3,
.lpPremiumStep--data .lpPremiumStep__copy h3 {
    max-width: 12ch;
}

.lpPremiumStep__copy p {
    max-width: 58ch;
    margin: 0;
    color: rgba(224, 229, 229, 0.72);
    font-size: 0.98rem;
    line-height: 1.68;
}

.lpBeforeAfter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.lpBeforeAfter span {
    display: grid;
    gap: 5px;
    min-height: 76px;
    padding: 12px 13px;
    border: 1px solid rgba(205, 208, 198, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(224, 229, 229, 0.68);
    font-size: 0.82rem;
    line-height: 1.4;
}

.lpBeforeAfter span + span {
    border-color: rgba(134, 183, 255, 0.18);
    background: rgba(134, 183, 255, 0.055);
    color: rgba(225, 240, 255, 0.82);
}

.lpBeforeAfter strong {
    color: rgba(246, 220, 160, 0.94);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.lpPremiumStep .lpPremiumVisual,
.lpProductScene {
    position: relative;
    z-index: 2;
    min-height: 420px;
    border: 1px solid rgba(148, 217, 255, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(520px 290px at 48% 18%, rgba(148, 217, 255, 0.14), transparent 72%),
        linear-gradient(145deg, rgba(11, 20, 28, 0.9), rgba(3, 5, 8, 0.96));
    background-size: 54px 54px, 54px 54px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.lpSceneLabels {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.lpSceneLabels span,
.lpMotionCaption,
.lpSolutionBadge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid rgba(232, 178, 89, 0.26);
    border-radius: 999px;
    background: rgba(8, 9, 11, 0.7);
    color: rgba(246, 220, 160, 0.94);
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.lpSceneLabels span + span,
.lpSolutionBadge {
    border-color: rgba(21, 198, 173, 0.34);
    color: rgba(224, 255, 247, 0.95);
}

.lpWorkflowBoard--resolve {
    inset: 54px 28px 40px;
    place-items: stretch;
}

.lpProductScene {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 24px;
}

.lpProductScene .lpPremiumPreview {
    width: min(100%, 590px);
    min-height: 350px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(2, 4, 8, 0.56);
}

.lpProductScene .lpYakogakuWindow {
    height: 330px;
}

.lpProblemStack,
.lpPhoneProblemRail,
.lpDataFragments {
    position: absolute;
    z-index: 4;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.lpProblemStack {
    left: 24px;
    top: 72px;
    animation: lpProblemStackResolve 7.2s cubic-bezier(.65, 0, .22, 1) infinite;
}

.lpProblemStack span,
.lpPhoneProblemRail span,
.lpDataFragments span {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(232, 178, 89, 0.34);
    border-radius: 8px;
    background: rgba(17, 14, 8, 0.82);
    color: rgba(246, 220, 160, 0.96);
    font-size: 0.78rem;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.lpProblemStack span:nth-child(2),
.lpPhoneProblemRail span:nth-child(2),
.lpDataFragments span:nth-child(2) {
    margin-left: 18px;
}

.lpProblemStack span:nth-child(3),
.lpPhoneProblemRail span:nth-child(3),
.lpDataFragments span:nth-child(3) {
    margin-left: 7px;
}

.lpScanLine {
    position: absolute;
    z-index: 5;
    top: 50px;
    bottom: 48px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, transparent, rgba(21, 198, 173, 0.9), transparent);
    box-shadow: 0 0 24px rgba(21, 198, 173, 0.32);
    animation: lpScanAcross 7.2s ease-in-out infinite;
}

.lpSolutionBadge {
    position: absolute;
    z-index: 6;
    right: 24px;
    bottom: 26px;
    animation: lpSolutionBadge 7.2s ease-in-out infinite;
}

.lpProductScene--phone {
    grid-template-columns: 1fr;
    min-height: 520px;
}

.lpProductScene--phone .lpPremiumPhoneStage {
    width: min(100%, 520px);
    min-height: 500px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.lpProductScene--phone .lpPhonePreview {
    width: 320px;
}

.lpProductScene--phone .lpPremiumPhoneStage {
    transform: translateX(-70px);
}

.lpProductScene--phone .lpPhonePreview__device {
    width: 250px;
}

.lpPhoneProblemRail {
    left: 28px;
    top: 82px;
    animation: lpPhoneRailResolve 7.6s cubic-bezier(.65, 0, .22, 1) infinite;
}

.lpProductScene--phone .lpSolutionBadge {
    right: 28px;
    top: 86px;
    bottom: auto;
    animation-duration: 7.6s;
}

.lpProductScene--phone .lpPhoneProofNote {
    position: absolute;
    right: 8px;
    top: 124px;
    z-index: 5;
    width: 216px;
    max-width: min(216px, calc(100vw - 96px));
    pointer-events: none;
    transform: rotate(2.5deg);
    animation: none !important;
}

.lpProductScene--phone .lpPhoneProofNote span {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 217, 255, 0.42);
    border-radius: 8px;
    background: rgba(8, 24, 35, 0.86);
    color: rgba(215, 242, 255, 0.98);
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1.24;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 24px rgba(148, 217, 255, 0.12);
}

.lpPremiumVisual--dataResolve .lpDataFragments {
    left: 28px;
    top: 98px;
    animation: lpDataFragmentsResolve 7.4s cubic-bezier(.65, 0, .22, 1) infinite;
}

.lpPremiumVisual--dataResolve .lpDataConsole {
    inset: 74px 28px 28px auto;
    width: min(62%, 390px);
    border-radius: 8px;
    animation: lpSolutionPanelGlow 7.4s ease-in-out infinite;
}

.lpPremiumVisual--dataResolve .lpDataConsole__grid span {
    animation: none;
}

.lpPremiumVisual--dataResolve .lpDataConsole__line {
    background-size: 200% 100%;
    animation: lpStoryArrowPulse 7.4s ease-in-out infinite;
}

.lpPremiumVisual--dataResolve .lpSolutionBadge {
    right: 38px;
    bottom: 38px;
    animation-duration: 7.4s;
}

.lpPremiumVisual--analyticsResolve {
    display: grid;
    place-items: center;
    overflow: visible;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story {
    width: min(100%, 530px);
    min-height: 360px;
    transform: translate(34px, 52px);
}

.lpDataProofCard {
    position: absolute;
    left: 26px;
    top: 34px;
    z-index: 5;
    width: 258px;
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(232, 178, 89, 0.34);
    border-radius: 8px;
    background: rgba(17, 14, 8, 0.86);
    color: rgba(246, 220, 160, 0.98);
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1.24;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    transform: rotate(-2deg);
}

.lpPremiumRibbon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}

.lpPremiumRibbon__track span {
    text-shadow: 0 8px 0 rgba(5, 6, 10, 0.25), 0 18px 34px rgba(0, 0, 0, 0.42);
}

.lpPremiumBottom__panel {
    border-radius: 8px 8px 0 0;
}

@keyframes lpStoryArrowPulse {
    0%, 25%, 100% {
        opacity: 0.54;
        background-position: 0% 50%;
    }

    48%, 70% {
        opacity: 1;
        background-position: 100% 50%;
    }
}

@keyframes lpSolutionPanelGlow {
    0%, 35%, 100% {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    }

    52%, 72% {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(21, 198, 173, 0.18);
    }
}

@keyframes lpProblemStackResolve {
    0%, 26%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    52%, 72% {
        opacity: 0.18;
        transform: translate3d(260px, 80px, 0) scale(0.86) rotate(0);
    }
}

@keyframes lpScanAcross {
    0%, 26%, 100% {
        left: 24%;
        opacity: 0;
    }

    45%, 68% {
        left: 72%;
        opacity: 1;
    }
}

@keyframes lpSolutionBadge {
    0%, 34%, 100% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.96);
    }

    52%, 76% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes lpPhoneRailResolve {
    0%, 30%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    54%, 76% {
        opacity: 0.18;
        transform: translate3d(190px, 118px, 0) scale(0.82);
    }
}

@keyframes lpDataFragmentsResolve {
    0%, 28%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    52%, 74% {
        opacity: 0.18;
        transform: translate3d(210px, 84px, 0) scale(0.84) rotate(0);
    }
}

@media (max-width: 980px) {
    .lpPremiumStep,
    .lpPremiumStep--reverse {
        grid-template-columns: 1fr;
        gap: 22px;
        min-height: 0;
    }

    .lpPremiumStep--reverse .lpPremiumStep__copy,
    .lpPremiumStep--reverse .lpProductScene,
    .lpPremiumStep--reverse .lpPremiumVisual {
        order: initial;
    }

    .lpPremiumStep__copy {
        min-height: 0;
    }

    .lpPremiumStep__copy h3 {
        max-width: none;
        font-size: 2.65rem;
    }

    .lpPremiumStep .lpPremiumVisual,
    .lpProductScene {
        min-height: 390px;
    }
}

@media (max-width: 760px) {
    .lpPremiumFeatures--story {
        padding-bottom: 96px;
    }

    .lpPremiumFeatures--story .lpPremiumIntro {
        margin-bottom: 32px;
    }

    .lpPremiumSteps--story {
        gap: 46px;
    }

    .lpPremiumStep {
        padding: 12px;
    }

    .lpPremiumStep::after {
        inset: 10px;
    }

    .lpPremiumStep__copy {
        padding: 22px 20px 22px 28px;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .lpPremiumStep--reverse .lpPremiumStep__copy {
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .lpPremiumStep__copy::before {
        left: 14px;
        top: 22px;
        bottom: 22px;
    }

    .lpPremiumStep__copy h3 {
        font-size: 1.92rem;
        line-height: 1.07;
        text-shadow: none;
    }

    .lpBeforeAfter {
        grid-template-columns: 1fr;
    }

    .lpBeforeAfter span {
        min-height: 0;
    }

    .lpPremiumStep .lpPremiumVisual,
    .lpProductScene {
        min-height: 330px;
        padding: 14px;
    }

    .lpSceneLabels {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .lpSceneLabels span,
    .lpMotionCaption,
    .lpSolutionBadge {
        font-size: 0.64rem;
        min-height: 26px;
        padding: 6px 8px;
    }

    .lpWorkflowBoard--resolve {
        inset: 48px 14px 36px;
    }

    .lpProductScene .lpPremiumPreview {
        min-height: 270px;
        padding: 10px;
    }

    .lpProductScene .lpYakogakuWindow {
        height: 250px;
    }

    .lpProblemStack,
    .lpPhoneProblemRail,
    .lpDataFragments,
    .lpScanLine,
    .lpSolutionBadge {
        animation: none;
    }

    .lpProblemStack,
    .lpPhoneProblemRail,
    .lpDataFragments {
        transform: none;
        opacity: 0.95;
    }

    .lpProblemStack {
        left: 14px;
        top: 54px;
    }

    .lpProblemStack span,
    .lpPhoneProblemRail span,
    .lpDataFragments span {
        min-height: 28px;
        padding: 6px 8px;
        font-size: 0.64rem;
    }

    .lpScanLine {
        left: 66%;
        opacity: 0.9;
    }

    .lpSolutionBadge {
        right: 12px;
        bottom: 14px;
        opacity: 1;
        transform: none;
    }

    .lpProductScene--phone {
        min-height: 450px;
    }

    .lpProductScene--phone .lpPremiumPhoneStage {
        min-height: 430px;
        transform: translateX(-60px);
    }

    .lpProductScene--phone .lpPhonePreview {
        width: 242px;
        transform: translateY(-24px);
    }

    .lpProductScene--phone .lpPhonePreview__device {
        width: min(216px, 62vw);
    }

    .lpPhoneProblemRail {
        left: 12px;
        top: 54px;
    }

    .lpProductScene--phone .lpSolutionBadge {
        top: auto;
        bottom: 14px;
        right: 12px;
    }

    .lpProductScene--phone .lpPhoneProofNote {
        right: 4px;
        top: 76px;
        width: 136px;
        max-width: min(136px, calc(100vw - 34px));
        transform: rotate(2deg);
    }

    .lpProductScene--phone .lpPhoneProofNote span {
        min-height: 46px;
        padding: 8px 9px;
        font-size: 0.68rem;
        line-height: 1.22;
    }

    .lpPremiumVisual--dataResolve .lpDataFragments {
        left: 14px;
        top: 56px;
    }

    .lpPremiumVisual--dataResolve .lpDataConsole {
        inset: 112px 14px 14px auto;
        width: 74%;
        animation: none;
    }

    .lpPremiumVisual--dataResolve .lpDataConsole__line {
        animation: none;
    }

    .lpPremiumVisual--dataResolve .lpSolutionBadge {
        right: 18px;
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowSceneTrack,
    .lpPaperPile,
    .lpWorkflowSystem--icons,
    .lpSystemTile,
    .lpProblemStack,
    .lpScanLine,
    .lpSolutionBadge,
    .lpPhoneProblemRail,
    .lpDataFragments,
    .lpPremiumVisual--dataResolve .lpDataConsole,
    .lpPremiumVisual--dataResolve .lpDataConsole__line {
        animation: none !important;
    }
}

/* ===== Tangled workflow card ===== */
.lpWorkflowBoard--resolve {
    inset: 54px 28px 40px;
    display: block;
    overflow: hidden;
    border-color: rgba(134, 183, 255, 0.16);
    background: linear-gradient(135deg, rgba(14, 16, 20, 0.98), rgba(6, 9, 11, 0.98));
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpWorkflowSceneTrack {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 200%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    animation: lpWorkflowCameraSlide 12s cubic-bezier(.66, 0, .22, 1) infinite;
}

.lpWorkflowScene {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 34px;
}

.lpPaperPile {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 300px;
    transform-origin: center;
    animation: lpWorkflowPaperFocus 12s ease-in-out infinite;
}

.lpMessyPaper {
    position: absolute;
    display: block;
    width: 136px;
    height: 178px;
    padding: 23px 17px;
    border: 1px solid rgba(15, 20, 28, 0.14);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 248, 233, 0.97), rgba(243, 236, 217, 0.96));
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34);
}

.lpMessyPaper::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 28px;
    height: 28px;
    border-left: 1px solid rgba(15, 20, 28, 0.12);
    border-bottom: 1px solid rgba(15, 20, 28, 0.12);
    border-radius: 0 10px 0 8px;
    background: rgba(211, 176, 106, 0.24);
}

.lpMessyPaper i,
.lpMessyPaper b,
.lpMessyPaper em {
    display: block;
    height: 9px;
    margin-bottom: 13px;
    border-radius: 99px;
    background: rgba(19, 29, 42, 0.18);
}

.lpMessyPaper i {
    width: 78%;
    background: rgba(211, 176, 106, 0.54);
}

.lpMessyPaper b {
    width: 92%;
}

.lpMessyPaper em {
    width: 56%;
}

.lpMessyPaper--one {
    left: 54px;
    top: 28px;
    transform: rotate(-16deg);
}

.lpMessyPaper--two {
    left: 154px;
    top: 0;
    transform: rotate(10deg);
}

.lpMessyPaper--three {
    left: 108px;
    top: 108px;
    transform: rotate(-6deg);
}

.lpMessyPaper--four {
    left: 226px;
    top: 88px;
    transform: rotate(15deg);
}

.lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
    position: relative;
    inset: auto;
    z-index: 3;
    width: min(460px, 92%);
    min-height: 396px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(118px, auto);
    gap: 12px;
    border: 1px solid rgba(134, 183, 255, 0.26);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(14, 18, 22, 0.98), rgba(5, 8, 10, 0.98));
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform-origin: center;
    animation: lpWorkflowSystemSettle 12s cubic-bezier(.22, 1, .36, 1) infinite;
}

.lpSystemTile {
    min-height: 118px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(134, 183, 255, 0.86);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(15, 21, 25, 0.94), rgba(8, 12, 15, 0.98));
    color: rgba(134, 183, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.72;
    transform: translateY(12px);
    animation: lpWorkflowTileSettle 12s ease-in-out infinite;
}

.lpSystemTile:nth-child(2) {
    animation-delay: .12s;
}

.lpSystemTile:nth-child(3) {
    animation-delay: .22s;
}

.lpSystemTile:nth-child(4) {
    animation-delay: .32s;
}

.lpSystemTile--chart {
    grid-column: 1 / -1;
    min-height: 152px;
    padding: 18px 20px;
}

.lpWorkflowIcon {
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lpIconStroke {
    fill: none;
    stroke: currentColor;
}

.lpIconGoldStroke {
    fill: none;
    stroke: rgba(211, 176, 106, 0.94);
}

.lpIconBlueFill {
    fill: rgba(134, 183, 255, 0.95);
    stroke: none;
}

.lpIconGoldFill {
    fill: rgba(211, 176, 106, 0.94);
    stroke: none;
}

.lpWorkflowChart {
    width: 100%;
    height: 112px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lpChartAxis {
    stroke: rgba(134, 183, 255, 0.74);
    stroke-width: 5;
}

.lpChartBar {
    fill: rgba(134, 183, 255, 0.72);
    stroke: none;
}

.lpChartCap {
    fill: rgba(211, 176, 106, 0.92);
    stroke: none;
}

.lpChartTrend {
    stroke: rgba(211, 176, 106, 0.94);
    stroke-width: 5;
}

.lpChartMark {
    fill: rgba(134, 183, 255, 0.9);
    stroke: none;
}

@keyframes lpWorkflowCameraSlide {
    0%, 46% {
        transform: translateX(0);
    }

    62%, 86% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes lpWorkflowPaperFocus {
    0%, 46%, 100% {
        opacity: 1;
        transform: rotate(-2deg) scale(1);
        filter: saturate(1);
    }

    62%, 86% {
        opacity: 0.18;
        transform: rotate(0deg) scale(0.86);
        filter: saturate(.72);
    }
}

@keyframes lpWorkflowSystemSettle {
    0%, 54%, 100% {
        opacity: 0.28;
        transform: translateX(26px) scale(.98);
    }

    66%, 86% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes lpWorkflowTileSettle {
    0%, 60%, 100% {
        opacity: 0.58;
        transform: translateY(12px);
    }

    70%, 86% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 760px) {
    .lpWorkflowBoard--resolve {
        inset: 48px 14px 34px;
    }

    .lpWorkflowScene {
        padding: 20px;
    }

    .lpPaperPile {
        width: 320px;
        height: 238px;
    }

    .lpMessyPaper {
        width: 92px;
        height: 120px;
        padding: 16px 12px;
    }

    .lpMessyPaper i,
    .lpMessyPaper b,
    .lpMessyPaper em {
        height: 7px;
        margin-bottom: 9px;
    }

    .lpMessyPaper--one {
        left: 40px;
        top: 28px;
    }

    .lpMessyPaper--two {
        left: 116px;
        top: 8px;
    }

    .lpMessyPaper--three {
        left: 92px;
        top: 90px;
    }

    .lpMessyPaper--four {
        left: 176px;
        top: 72px;
    }

    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(310px, 96%);
        min-height: 326px;
        padding: 16px;
        gap: 10px;
        grid-auto-rows: minmax(88px, auto);
    }

    .lpSystemTile {
        min-height: 88px;
        border-width: 2px;
        border-radius: 14px;
    }

    .lpSystemTile--chart {
        min-height: 116px;
        padding: 14px;
    }

    .lpWorkflowIcon {
        width: 42px;
        height: 42px;
    }

    .lpWorkflowChart {
        height: 88px;
    }

    .lpWorkflowSceneTrack,
    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        animation: none !important;
    }

    .lpWorkflowSceneTrack {
        transform: translateX(0);
    }

    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowSceneTrack {
        width: 100%;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
        animation: none !important;
    }

    .lpWorkflowScene {
        padding: 0;
    }

    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .lpPaperPile {
        width: min(210px, 100%);
        height: 210px;
    }

    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(320px, 100%);
        min-height: 300px;
    }
}

/* ===== Workflow motion field ===== */
.lpWorkflowFeature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    align-items: center;
    gap: clamp(34px, 5vw, 74px);
    min-height: 560px;
    padding: 12px 8px 24px;
    overflow: hidden;
}

.lpWorkflowFeature::before {
    content: "";
    position: absolute;
    left: min(33%, 360px);
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(211, 176, 106, 0.42), rgba(134, 183, 255, 0.42), transparent);
    opacity: 0.62;
    transform: translateY(-50%);
    pointer-events: none;
}

.lpWorkflowFeature__copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 16px;
    max-width: 480px;
    min-height: 390px;
    padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
}

.lpWorkflowFeature__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(211, 176, 106, 0.96), rgba(134, 183, 255, 0.28));
}

.lpWorkflowFeature__copy h3 {
    margin: 0;
    max-width: 11.5ch;
    color: rgba(247, 250, 255, 0.96);
    font-size: clamp(2.35rem, 4.4vw, 4.5rem);
    line-height: 0.96;
    font-weight: 950;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpWorkflowFeature__copy p {
    max-width: 57ch;
    margin: 0;
    color: rgba(224, 229, 229, 0.73);
    font-size: 1rem;
    line-height: 1.72;
}

.lpWorkflowSplit {
    display: grid;
    gap: 10px;
    margin-top: 2px;
}

.lpWorkflowSplit span {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    color: rgba(224, 229, 229, 0.68);
    font-size: 0.86rem;
    line-height: 1.45;
}

.lpWorkflowSplit span::before {
    content: "";
    position: absolute;
    left: 72px;
    right: 0;
    top: 0.74em;
    height: 1px;
    background: linear-gradient(90deg, rgba(211, 176, 106, 0.34), rgba(134, 183, 255, 0.18), transparent);
    transform: translateX(-100%);
}

.lpWorkflowSplit span + span {
    color: rgba(225, 240, 255, 0.82);
}

.lpWorkflowSplit strong {
    color: rgba(246, 220, 160, 0.94);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.lpWorkflowVisual {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
}

.lpWorkflowVisual::before {
    content: "";
    position: absolute;
    inset: 8% 0 5%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity: 0.42;
    pointer-events: none;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve {
    inset: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lpWorkflowVisual .lpWorkflowScene {
    padding: clamp(18px, 4vw, 44px);
}

.lpWorkflowVisual .lpWorkflowSceneCard {
    position: absolute;
    z-index: 6;
    width: min(260px, calc(100% - 68px));
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(232, 178, 89, 0.34);
    border-radius: 8px;
    background: rgba(17, 14, 8, 0.86);
    color: rgba(246, 220, 160, 0.98);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1.24;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.lpWorkflowVisual .lpWorkflowSceneCard--messy {
    left: clamp(18px, 5vw, 42px);
    top: clamp(16px, 4vw, 34px);
    transform: rotate(-2deg);
}

.lpWorkflowVisual .lpWorkflowSceneCard--system {
    right: clamp(18px, 5vw, 42px);
    top: clamp(16px, 4vw, 34px);
    border-color: rgba(134, 183, 255, 0.42);
    color: rgba(215, 242, 255, 0.98);
    background: rgba(8, 24, 35, 0.86);
    transform: rotate(2deg);
}

.lpWorkflowVisual .lpWorkflowScene--messy::after,
.lpWorkflowVisual .lpWorkflowScene--system::after {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 12%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(211, 176, 106, 0.4), rgba(134, 183, 255, 0.34), transparent);
    opacity: 0.7;
}

.lpWorkflowVisual .lpPaperPile {
    width: min(470px, 96%);
    height: 330px;
}

.lpWorkflowVisual .lpMessyPaper {
    border-color: rgba(15, 20, 28, 0.1);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(211, 176, 106, 0.08);
}

.lpWorkflowVisual .lpMessyPaper--one {
    left: 12%;
    top: 11%;
}

.lpWorkflowVisual .lpMessyPaper--two {
    left: 38%;
    top: 2%;
}

.lpWorkflowVisual .lpMessyPaper--three {
    left: 28%;
    top: 39%;
}

.lpWorkflowVisual .lpMessyPaper--four {
    left: 58%;
    top: 31%;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
    position: relative;
    width: min(560px, 96%);
    min-height: 300px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform-origin: center;
    animation: lpWorkflowSystemSettle 12s cubic-bezier(.22, 1, .36, 1) infinite;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::before {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    top: 50%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(211, 176, 106, 0.8), rgba(134, 183, 255, 0.72), rgba(211, 176, 106, 0.54));
    opacity: 0.78;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::after {
    content: "";
    position: absolute;
    right: 9%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(211, 176, 106, 0.7);
    border-right: 2px solid rgba(211, 176, 106, 0.7);
    opacity: 0.86;
    transform: translateY(-50%) rotate(45deg);
}

.lpWorkflowVisual .lpSystemTile {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: auto;
    height: 132px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(134, 183, 255, 0.95);
    opacity: 0.72;
    transform: translateY(12px);
    animation: lpWorkflowTileSettle 12s ease-in-out infinite;
}

.lpWorkflowVisual .lpSystemTile:nth-child(1) {
    grid-column: 1;
}

.lpWorkflowVisual .lpSystemTile:nth-child(2) {
    grid-column: 2;
    animation-delay: .12s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(3) {
    grid-column: 3;
    animation-delay: .22s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(4) {
    grid-column: 4;
    animation-delay: .32s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(4)::after {
    content: none;
}

.lpWorkflowVisual .lpSystemTile:not(.lpSystemTile--chart)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: rgba(211, 176, 106, 0.92);
    box-shadow: 0 0 0 7px rgba(211, 176, 106, 0.09), 0 0 22px rgba(211, 176, 106, 0.24);
    transform: translateX(-50%);
}

.lpWorkflowVisual .lpWorkflowIcon {
    width: 78px;
    height: 78px;
    padding: 14px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.13), transparent 36%),
        radial-gradient(circle, rgba(134, 183, 255, 0.18), rgba(5, 8, 10, 0.78) 70%);
    box-shadow: 0 0 0 1px rgba(134, 183, 255, 0.28), 0 18px 34px rgba(0, 0, 0, 0.28);
}

.lpWorkflowVisual .lpWorkflowChart {
    width: min(100%, 300px);
    height: 128px;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34));
}

@media (max-width: 1020px) {
    .lpWorkflowFeature {
        grid-template-columns: 1fr;
        gap: 22px;
        min-height: 0;
        padding-inline: 0;
    }

    .lpWorkflowFeature::before {
        left: 0;
        right: 0;
        top: 44%;
    }

    .lpWorkflowFeature__copy {
        max-width: 720px;
        min-height: 0;
    }

    .lpWorkflowFeature__copy h3 {
        max-width: 15ch;
    }

    .lpWorkflowVisual {
        min-height: 470px;
    }
}

@media (max-width: 760px) {
    .lpWorkflowFeature {
        gap: 18px;
    }

    .lpWorkflowFeature::before {
        opacity: 0.32;
    }

    .lpWorkflowFeature__copy {
        padding-left: 22px;
    }

    .lpWorkflowFeature__copy h3 {
        font-size: 2.2rem;
        line-height: 1.04;
    }

    .lpWorkflowSplit span {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
    }

    .lpWorkflowVisual {
        min-height: 360px;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard {
        width: min(190px, calc(100% - 30px));
        min-height: 46px;
        padding: 8px 10px;
        font-size: 0.66rem;
        line-height: 1.2;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard--messy {
        left: 16px;
        top: 16px;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard--system {
        right: 16px;
        top: 16px;
    }

    .lpWorkflowVisual .lpWorkflowSceneTrack {
        animation: lpWorkflowCameraSlide 12s cubic-bezier(.66, 0, .22, 1) infinite !important;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        animation: none !important;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .lpWorkflowVisual .lpPaperPile {
        width: min(330px, 96%);
        height: 250px;
    }

    .lpWorkflowVisual .lpMessyPaper {
        width: 94px;
        height: 124px;
        padding: 16px 12px;
    }

    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(330px, 98%);
        min-height: 190px;
        padding: 0 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lpWorkflowVisual .lpSystemTile {
        width: auto;
        height: 104px;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(1) {
        grid-column: 1;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(2) {
        grid-column: 2;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(3) {
        grid-column: 3;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(4) {
        grid-column: 4;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(4)::after {
        content: none;
    }

    .lpWorkflowVisual .lpSystemTile:not(.lpSystemTile--chart)::before {
        bottom: 10px;
        width: 10px;
        height: 10px;
    }

    .lpWorkflowVisual .lpWorkflowIcon {
        width: 54px;
        height: 54px;
        padding: 10px;
    }

    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::after {
        right: 7%;
        width: 8px;
        height: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowVisual .lpWorkflowSceneTrack {
        width: 100%;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        transform: none;
        animation: none !important;
    }

    .lpWorkflowVisual .lpWorkflowScene {
        padding: 0;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }
}

/* ===== Open story steps ===== */
.lpStoryStep {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    align-items: center;
    gap: clamp(34px, 5vw, 74px);
    min-height: 560px;
    padding: 12px 8px 24px;
    overflow: hidden;
}

.lpStoryStep::before {
    content: "";
    position: absolute;
    left: min(33%, 360px);
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(211, 176, 106, 0.34), rgba(134, 183, 255, 0.34), transparent);
    opacity: 0.56;
    transform: translateY(-50%);
    pointer-events: none;
}

.lpStoryStep--reverse {
    grid-template-columns: minmax(420px, 1.22fr) minmax(280px, 0.78fr);
}

.lpStoryStep--reverse::before {
    left: 8%;
    right: min(33%, 360px);
    background: linear-gradient(90deg, transparent, rgba(134, 183, 255, 0.34), rgba(211, 176, 106, 0.34));
}

.lpStoryStep--reverse .lpStoryStep__copy {
    order: 2;
    justify-self: end;
    justify-items: end;
    padding: clamp(8px, 2vw, 18px) 28px clamp(8px, 2vw, 18px) 0;
    text-align: right;
}

.lpStoryStep--reverse .lpProductScene,
.lpStoryStep--reverse .lpPremiumVisual {
    order: 1;
}

.lpStoryStep__copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 16px;
    max-width: 500px;
    min-height: 390px;
    padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
}

.lpStoryStep__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(211, 176, 106, 0.96), rgba(134, 183, 255, 0.28));
}

.lpStoryStep--reverse .lpStoryStep__copy::before {
    right: 0;
    left: auto;
}

.lpStoryStep__copy h3 {
    margin: 0;
    max-width: 11.5ch;
    color: rgba(247, 250, 255, 0.96);
    font-size: clamp(2.35rem, 4.1vw, 4.05rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpStoryStep--data .lpStoryStep__copy h3 {
    max-width: 12.5ch;
}

.lpStoryStep__copy p {
    max-width: 58ch;
    margin: 0;
    color: rgba(224, 229, 229, 0.73);
    font-size: 1rem;
    line-height: 1.72;
}

.lpStoryStep .lpWorkflowSplit {
    margin-top: 2px;
}

.lpStoryStep .lpProductScene,
.lpStoryStep .lpPremiumVisual--dataResolve,
.lpStoryStep .lpPremiumVisual--analyticsResolve {
    position: relative;
    z-index: 2;
    min-height: 520px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-size: auto;
    box-shadow: none;
    overflow: visible;
}

.lpStoryStep .lpProductScene::before,
.lpStoryStep .lpPremiumVisual--dataResolve::before,
.lpStoryStep .lpPremiumVisual--analyticsResolve::before {
    content: "";
    position: absolute;
    inset: 8% 0 5%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity: 0.42;
    pointer-events: none;
}

.lpStoryStep .lpProductScene .lpPremiumPreview {
    width: min(100%, 600px);
    min-height: 350px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpStoryStep .lpProductScene .lpYakogakuWindow {
    height: 330px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.lpStoryStep--site .lpProductScene .lpPremiumPreview {
    width: min(100%, 660px);
    min-height: 390px;
}

.lpStoryStep--site .lpProductScene .lpYakogakuWindow {
    height: 368px;
}

.lpStoryStep .lpPremiumPhoneStage {
    min-height: 450px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpStoryStep .lpPremiumPhoneStage .lpPhonePreview {
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.34));
}

.lpStoryStep .lpPremiumVisual--dataResolve .lpDataConsole {
    inset: 74px 44px 62px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.lpStoryStep .lpSceneLabels {
    left: 44px;
    right: 44px;
    top: 44px;
}

.lpStoryStep .lpProductScene--phone {
    min-height: 540px;
}

.lpStoryStep .lpProductScene--phone .lpPremiumPhoneStage {
    min-height: 500px;
}

@media (max-width: 1020px) {
    .lpStoryStep,
    .lpStoryStep--reverse {
        grid-template-columns: 1fr;
        gap: 22px;
        min-height: 0;
        padding-inline: 0;
    }

    .lpStoryStep::before,
    .lpStoryStep--reverse::before {
        left: 0;
        right: 0;
        top: 44%;
    }

    .lpStoryStep--reverse .lpStoryStep__copy,
    .lpStoryStep--reverse .lpProductScene,
    .lpStoryStep--reverse .lpPremiumVisual {
        order: initial;
    }

    .lpStoryStep__copy {
        max-width: 720px;
        min-height: 0;
    }

    .lpStoryStep--reverse .lpStoryStep__copy {
        justify-self: start;
        justify-items: start;
        padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
        text-align: left;
    }

    .lpStoryStep--reverse .lpStoryStep__copy::before {
        right: auto;
        left: 0;
    }

    .lpStoryStep__copy h3 {
        max-width: 15ch;
    }
}

@media (max-width: 760px) {
    .lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story {
        width: min(100%, 330px);
        min-height: 250px;
        transform: translateY(50px);
    }

    .lpDataProofCard {
        left: 10px;
        top: 18px;
        width: min(230px, calc(100% - 20px));
        min-height: 58px;
        padding: 10px 12px;
        font-size: 0.72rem;
        line-height: 1.22;
        transform: rotate(-1.5deg);
    }

    .lpStoryStep {
        gap: 18px;
    }

    .lpStoryStep::before {
        opacity: 0.32;
    }

    .lpStoryStep__copy {
        padding-left: 22px;
    }

    .lpStoryStep__copy h3 {
        font-size: 2.2rem;
        line-height: 1.04;
    }

    .lpStoryStep .lpProductScene,
    .lpStoryStep .lpPremiumVisual--dataResolve,
    .lpStoryStep .lpPremiumVisual--analyticsResolve {
        min-height: 360px;
    }

    .lpStoryStep .lpPremiumVisual--analyticsResolve {
        min-height: 430px;
    }

    .lpStoryStep .lpProductScene .lpPremiumPreview {
        min-height: 250px;
    }

    .lpStoryStep .lpProductScene .lpYakogakuWindow {
        height: 250px;
    }

    .lpStoryStep--site .lpProductScene .lpYakogakuWindow {
        height: 320px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__top {
        grid-template-columns: auto minmax(0, 1fr);
        height: 36px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__right,
    .lpYakogakuWindow--pc .lpYakogakuWindow__navText {
        display: none;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__nav {
        justify-self: end;
        gap: 12px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__navButton {
        min-height: 24px;
        font-size: 7.5px;
    }

    .lpYakogakuWindow--pc .lpYakogakuMini {
        padding: 18px 18px 48px;
    }

    .lpYakogakuWindow--pc .lpYakogakuMini__hub {
        width: min(290px, 86%);
    }

    .lpYakogakuWindow--pc .lpYakogakuMini h4 {
        font-size: 25px;
    }

    .lpStoryStep .lpPremiumPhoneStage {
        min-height: 410px;
    }

    .lpStoryStep .lpProductScene--phone {
        min-height: 450px;
    }

    .lpStoryStep .lpProductScene--phone .lpPremiumPhoneStage {
        min-height: 430px;
    }

    .lpStoryStep .lpPremiumVisual--dataResolve .lpDataConsole {
        inset: 54px 10px 34px;
    }

    .lpStoryStep .lpSceneLabels {
        left: 10px;
        right: 10px;
        top: 16px;
    }
}

/* ===== Site proof note ===== */
.lpProductScene--site .lpProblemStack {
    left: 28px;
    top: 12px;
    gap: 0;
    opacity: 1;
    transform: rotate(-2deg);
    animation: none !important;
}

.lpProductScene--site .lpProblemStack span {
    width: 220px;
    max-width: min(220px, calc(100vw - 96px));
    min-height: 44px;
    padding: 10px 12px;
    white-space: normal;
    line-height: 1.24;
}

.lpProductScene--site .lpProblemStack span:nth-child(n) {
    margin-left: 0;
}

@media (max-width: 760px) {
    .lpProductScene--site .lpProblemStack {
        left: 10px;
        top: -28px;
    }

    .lpProductScene--site .lpProblemStack span {
        width: 168px;
        max-width: min(168px, calc(100vw - 48px));
        min-height: 38px;
        padding: 8px 9px;
        font-size: 0.68rem;
        line-height: 1.22;
    }
}