/* ==========================================================================
   Landing page — dark / sky-gradient theme. Scoped to body.landing so inner
   pages (About, Contact, ...) keep welcome.css styling.
   Fonts: Inter + Instrument Serif (italic accents)
   ========================================================================== */

.landing {
    --bg: #050607;
    --panel: rgba(255,255,255,0.06);
    --edge: rgba(255,255,255,0.14);
    --txt: #fff;
    --txt-2: rgba(255,255,255,0.62);
    --lime: #8fe04a;
    --spring: cubic-bezier(.34,1.56,.64,1);
    --serif: 'Instrument Serif', 'Times New Roman', serif;
    background: var(--bg);
    color: var(--txt);
    font-family: 'Inter', 'Archivo', system-ui, sans-serif;
}
.landing em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.lp-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; }

/* Header: transparent over the hero, glass nav pill ------------------------ */
.landing .site-header { background: transparent; border-bottom: 0; }
.landing .site-header.scrolled,
.landing .site-header.menu-open { background: rgba(5,6,7,0.72); border-bottom: 1px solid var(--edge); box-shadow: none; }
.landing .brand, .landing .brand:hover { color: #fff; }
.landing .nav-links { flex: none; margin: 0 auto; gap: 2px; padding: 5px; background: rgba(255,255,255,0.12); border-radius: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.landing .nav-link { color: rgba(255,255,255,0.85); padding: 8px 15px; border-radius: 8px; }
.landing .nav-link:hover, .landing .nav-link.is-active { color: #fff; background: rgba(255,255,255,0.14); }
.landing .link-plain { color: #fff; }
.landing .link-plain:hover { color: var(--lime); }
.landing .nav-actions .btn-dark { background: #fff; color: var(--ink); border-radius: 10px; }
.landing .nav-actions .btn-dark:hover { background: var(--lime); color: var(--ink); }
.landing .nav-burger { background: rgba(255,255,255,0.12); border-color: var(--edge); }
.landing .nav-burger span { background: #fff; }
.landing .mobile-menu { background: rgba(5,6,7,0.96); }
.landing .mobile-menu.open { border-top-color: var(--edge); }
.landing .mobile-menu a { color: #fff; border-bottom-color: var(--edge); }
.landing .mobile-menu .btn-outline { background: transparent; color: #fff; border-color: var(--edge); }
.landing .mobile-menu .btn-dark { background: #fff; color: var(--ink); }

/* Buttons / tags ----------------------------------------------------------- */
.lp-btn, .landing .nav-actions .btn { position: relative; overflow: hidden; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .9s var(--spring), background 160ms ease, color 160ms ease; will-change: transform; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 10px; font-size: 15px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.lp-btn.is-magnet, .landing .nav-actions .btn.is-magnet { transition: transform .18s ease-out, background 160ms ease, color 160ms ease; }
.lp-btn::after, .landing .nav-actions .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.lp-btn:hover::after, .landing .nav-actions .btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.lp-btn-dark { background: #050607; color: #fff; }
.lp-btn-dark:hover { background: #15191c; color: #fff; }
.lp-btn-glass { background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lp-btn-glass:hover { background: rgba(255,255,255,0.3); color: #fff; }
.lp-btn-light { background: #fff; color: #050607; }
.lp-btn-light:hover { background: var(--lime); color: #050607; }
.lp-btn-outline { border-color: var(--edge); color: #fff; }
.lp-btn-outline:hover { border-color: #fff; color: #fff; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.lp-actions-left { justify-content: flex-start; }

.lp-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(143,224,74,0.45); border-radius: 8px; font-size: 12px; color: #d9f5c0; background: rgba(143,224,74,0.06); }
.lp-tag-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--lime); }
.lp-tag-glass { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lp-tag-glass .lp-tag-dot { border-color: #fff; }

/* Sections / headings ------------------------------------------------------ */
.lp-section { padding: clamp(56px, 8vw, 110px) 0; }
.lp-section-tight { padding: clamp(32px, 5vw, 64px) 0; }
.lp-title { margin: 16px 0 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; font-weight: 500; letter-spacing: -0.035em; }
.lp-title em { font-size: 1.1em; }
.lp-title-center { text-align: center; }
.lp-note { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--txt-2); }
.lp-note-block { margin-top: 20px; }
.lp-note-center { margin: 18px auto 0; text-align: center; color: rgba(255,255,255,0.8); }
.lp-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.lp-head-split .lp-note { text-align: right; }
.lp-fine { margin-top: 14px; font-size: 12px; color: var(--txt-2); }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-split-rev > :first-child { order: 2; }
.lp-app { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* Hero --------------------------------------------------------------------- */
.lp-hero { position: relative; min-height: max(820px, min(100vh, 960px)); margin: 12px 12px 0; border-radius: 22px 22px 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 150px 0 0; background: #1d4f82; isolation: isolate; }
.lp-hero-sky { position: absolute; inset: -4% 0 0; z-index: -2; transform: translate3d(0, calc(var(--hp, 0) * 70px), 0) scale(calc(1 + var(--hp, 0) * 0.12)); will-change: transform;
    background:
        radial-gradient(ellipse 60% 22% at 25% 38%, rgba(255,255,255,0.45), transparent 70%),
        radial-gradient(ellipse 50% 18% at 78% 30%, rgba(255,255,255,0.3), transparent 70%),
        radial-gradient(ellipse 120% 28% at 50% 78%, rgba(120,150,60,0.75), transparent 72%),
        linear-gradient(180deg, #2c6aa8 0%, #5a9bd0 38%, #a7cde6 62%, #4d6a3a 80%, #050607 100%); }
.lp-hero-bolt { position: absolute; z-index: -1; left: 50%; bottom: 17%; width: clamp(80px, 9vw, 120px); aspect-ratio: 120/200; transform: translateX(-50%); opacity: 0.9; translate: 0 calc(var(--hp, 0) * -160px); animation: lp-float 5s ease-in-out infinite, lp-glow 3.2s ease-in-out infinite; }
.lp-hero-content { text-align: center; margin-bottom: 200px; transform: translate3d(0, calc(var(--hp, 0) * -60px), 0); opacity: calc(1 - var(--hp, 0) * 1.6); }
.lp-hero-title { margin: 22px 0 0; font-size: clamp(42px, 7vw, 88px); line-height: 1; font-weight: 500; letter-spacing: -0.04em; text-shadow: 0 2px 40px rgba(10,40,80,0.25); }
.lp-hero-title em { font-size: 1.1em; }
.lp-hero-lead { margin: 24px auto 0; max-width: 56ch; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: rgba(255,255,255,0.88); }

/* Platform cards ----------------------------------------------------------- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.lp-card { position: relative; min-height: 460px; padding: 22px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--edge); }
.lp-card-1 { background: radial-gradient(circle at 20% 90%, #6b5a43, transparent 55%), linear-gradient(165deg, #6e8891, #33463f); }
.lp-card-2 { background: radial-gradient(circle at 80% 90%, #7c4f36, transparent 55%), linear-gradient(165deg, #8ab0c4, #425b4a); }
.lp-card-3 { background: radial-gradient(circle at 20% 100%, #3d5a4c, transparent 55%), linear-gradient(165deg, #9db7c6, #4b6074); }
.lp-card-copy { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.lp-card-copy strong { color: #fff; font-weight: 600; }
.lp-glass { padding: 20px; border-radius: 14px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lp-glass-light { background: rgba(255,255,255,0.88); color: #162014; border-color: #fff; }
.lp-glass-title { text-align: center; font-size: 20px; letter-spacing: -0.02em; }
.lp-glass hr { border: 0; border-top: 1px solid rgba(255,255,255,0.3); margin: 14px 0; }
.lp-ask { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 14px; margin-top: 36px; }
.lp-ava, .lp-ava { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e9d3b4; color: #3a2a14; font-size: 10px; font-weight: 600; flex: none; }
.lp-answer { display: flex; gap: 10px; margin-top: 18px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.9); }
.lp-spark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #0b0d0e; flex: none; font-size: 12px; }
.lp-ask-bar { margin-top: 22px; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,0.25); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); }
.lp-big { font-family: var(--serif); font-style: italic; font-size: 34px; text-align: center; line-height: 1; }
.lp-big span { font-size: 22px; }
.lp-chart { display: block; width: 100%; height: 130px; margin-top: 6px; }
.lp-chart-label { margin-top: 10px; font-size: 12px; text-align: center; color: #4c5b49; }
.lp-tree { background: rgba(255,255,255,0.14); }
.lp-pill { display: inline-block; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.35); font-size: 15px; }
.lp-branch { margin: 18px 0 0 14px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.45); display: grid; gap: 14px; }
.lp-leaf { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.3); }
.lp-leaf em { display: block; font-size: 16px; }
.lp-leaf span { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 7px; background: #fff; color: #1b2529; font-size: 12.5px; }

/* Steps -------------------------------------------------------------------- */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.lp-step { padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--edge); transition: border-color 160ms ease; }
.lp-step:hover { border-color: rgba(143,224,74,0.6); }
.lp-step span { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--lime); }
.lp-step h3 { margin: 22px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.lp-step p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--txt-2); }

/* Find a charger ----------------------------------------------------------- */
.lp-stations { display: grid; gap: 10px; margin: 30px 0; }
.lp-station { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--edge); }
.lp-station > div { flex: 1; min-width: 0; }
.lp-station strong { display: block; font-size: 15px; font-weight: 500; }
.lp-station small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--txt-2); }
.lp-station.is-busy strong { color: rgba(255,255,255,0.6); }
.lp-dist { font-size: 12.5px; color: var(--txt-2); }
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b7480; flex: none; display: block; }
.lp-dot.on { background: var(--lime); box-shadow: 0 0 0 4px rgba(143,224,74,0.18); }
.lp-map { position: relative; aspect-ratio: 5/4; border-radius: 20px; overflow: hidden; border: 1px solid var(--edge); background: linear-gradient(160deg, #1a2a2d, #0b1012); background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(160deg, #1a2a2d, #0b1012); background-size: 36px 36px, 36px 36px, auto; }
.lp-map-road { position: absolute; background: rgba(255,255,255,0.09); }
.lp-map-road-h { left: 0; right: 0; top: 38%; height: 12px; }
.lp-map-road-v { top: 0; bottom: 0; left: 56%; width: 12px; }
.lp-map-block { position: absolute; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.lp-map-pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #6b7480; transform: translate(-50%, -50%); }
.lp-map-pin-on { width: 16px; height: 16px; background: var(--lime); animation: cme-pulse 2.6s ease-out infinite; }
.lp-map-tip { position: absolute; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lp-map-tip strong { display: block; font-size: 13px; font-weight: 500; }
.lp-map-tip small { color: var(--lime); font-size: 11.5px; }
.lp-map-foot { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,0.45); font-size: 12px; color: var(--txt-2); }
.lp-map-foot span:last-child { color: var(--lime); }

/* Insights dashboard ------------------------------------------------------- */
.lp-features { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.lp-features li { display: flex; gap: 14px; }
.lp-fico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--panel); border: 1px solid var(--edge); color: var(--lime); flex: none; font-size: 15px; }
.lp-features strong { display: block; font-size: 14.5px; font-weight: 500; }
.lp-features small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--txt-2); }
/* Stats -------------------------------------------------------------------- */
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.lp-stats > div { padding: 12px; }
.lp-stats b { display: block; font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; letter-spacing: -0.03em; }
.lp-stats span { display: block; margin-top: 4px; font-size: 13px; color: var(--txt-2); }

/* Product shots ------------------------------------------------------------ */
.lp-shot { position: relative; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--edge); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); background: #11161a; }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot-biz .lp-biz-stats { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 18px; border-radius: 14px; background: rgba(5,6,7,0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lp-biz-stats b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.lp-biz-stats span { font-size: 12px; color: rgba(255,255,255,0.7); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; }
.lp-chips span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel); font-size: 13.5px; }

/* Why us mosaic ------------------------------------------------------------ */
.lp-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(210px, auto); gap: 14px; margin-top: 48px; }
.lp-tile { margin: 0; padding: 20px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--edge); }
.lp-tile span { margin-bottom: auto; font-family: var(--serif); font-style: italic; font-size: 26px; opacity: 0.85; }
.lp-tile h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.lp-tile p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.lp-tile-purple { background: linear-gradient(160deg, #6c3be0, #8b5bf0 60%, #3d2a8a); }
.lp-tile-gold { background: linear-gradient(160deg, #a9792b, #7e6a3a); }
.lp-tile-orange { background: linear-gradient(160deg, #a35a2a, #b97a3a 50%, #3b6a3a); }
.lp-tile-blue { background: linear-gradient(160deg, #3d7a9a, #5b8fb0 60%, #7a8a5a); }
.lp-tile-photo { grid-row: span 2; justify-content: space-between; background: radial-gradient(circle at 50% 18%, #6fbf8f, transparent 50%), linear-gradient(180deg, #1f5a3a, #0f3a22); }
.lp-tile-photo p { margin: 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; color: #fff; }
.lp-tile-photo footer strong { display: block; font-size: 14px; font-weight: 500; }
.lp-tile-photo footer small { font-size: 12px; color: rgba(255,255,255,0.7); }

/* CTA ---------------------------------------------------------------------- */
.lp-cta { position: relative; overflow: hidden; margin: 0 12px; border-radius: 22px 22px 0 0; padding: clamp(64px, 9vw, 120px) 0 clamp(150px, 18vw, 240px); background: linear-gradient(180deg, #3f78b8 0%, #8fbbe0 55%, #b9d6ea 100%); }
.lp-cta-hills { position: absolute; inset: auto 0 0 0; height: 55%; background:
    linear-gradient(180deg, transparent 55%, #050607 98%),
    radial-gradient(ellipse 70% 100% at 18% 100%, #3d6a3f 0 55%, transparent 56%),
    radial-gradient(ellipse 80% 90% at 70% 100%, #2c5330 0 55%, transparent 56%); }
.lp-cta-inner { text-align: center; }
.lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 48px; font-size: 12.5px; color: rgba(255,255,255,0.88); }

/* Footer: black, matches landing ------------------------------------------- */
.landing .site-footer { background: var(--bg); margin-top: 0; }
.landing .footer-grid { max-width: 1240px; }


/* Motion ------------------------------------------------------------------- */
@supports (transition-timing-function: linear(0, 1)) { .landing { --spring: linear(0, 0.186, 0.392, 0.594, 0.775, 0.925, 1.038, 1.117, 1.162, 1.181, 1.177, 1.159, 1.132, 1.101, 1.07, 1.041, 1.017, 0.998, 0.985, 0.976, 0.973, 0.972, 0.975, 0.979, 0.983, 0.988, 0.993, 0.997, 1, 1.002, 1.003, 1.004, 1.004, 1.004, 1.003, 1.003, 1); } }
@keyframes lp-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-16px); } }
@keyframes lp-glow { 0%, 100% { filter: drop-shadow(0 0 30px rgba(160,255,200,0.4)); } 50% { filter: drop-shadow(0 0 60px rgba(160,255,200,0.85)); } }
@keyframes lp-rise { from { opacity: 0; translate: 0 36px; } }
@keyframes lp-heading { from { opacity: 0; translate: 0 26px; filter: blur(10px); } }

/* Staggered children */
.reveal-init:not(.is-visible) [data-stagger] > * { opacity: 0; }
.is-visible [data-stagger] > * { animation: lp-rise .9s cubic-bezier(.16,.84,.24,1) both; animation-delay: calc(var(--i, 0) * 100ms + 150ms); }
.is-visible .lp-title, .is-visible .lp-tag { animation: lp-heading .9s cubic-bezier(.16,.84,.24,1) both; }
.is-visible .lp-title { animation-delay: .08s; }

/* 3D tilt cards: transform and highlight position are driven from landing.js */
.lp-tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--spring), border-color .2s ease; will-change: transform; }
.lp-tilt.is-tilting { transition: transform .12s ease-out, border-color .2s ease; }
.lp-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(circle 240px at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.3), rgba(255,255,255,0.06) 60%, transparent 100%);
    -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
    -webkit-mask-image: radial-gradient(circle 240px at var(--gx, 50%) var(--gy, 50%), #000, transparent 100%); mask-image: radial-gradient(circle 240px at var(--gx, 50%) var(--gy, 50%), #000, transparent 100%); }
.lp-tilt.is-tilting::after { opacity: 1; }
.lp-station { transition: transform .3s ease, border-color .3s ease; }
.lp-station:hover { transform: translateX(8px); border-color: rgba(143,224,74,0.55); }
.lp-chips span { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.lp-chips span:hover { background: rgba(143,224,74,0.12); border-color: var(--lime); transform: translateY(-2px); }
.lp-shot img { transform: scale(1.08); will-change: transform; }

/* Scroll progress */
.lp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Scrollytelling: pinned charger -------------------------------------------- */
.lp-story { --sbg: #0e1114; position: relative; height: 420vh; margin: 0 12px; border-radius: 22px; overflow: clip; background: var(--sbg); color: #fff; transition: color .45s ease; }
.lp-story.is-ice { color: #0b1b29; }
.lp-story-stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; padding: 90px clamp(24px, 6vw, 96px) 40px; }
.lp-story-glow { position: absolute; left: 30%; top: 50%; width: 70vmin; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(0.5 + var(--sp, 0) * 0.9)); background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 68%); opacity: calc(var(--sp, 0) * 0.9); pointer-events: none; }
.lp-story-obj { position: relative; display: grid; place-items: center; height: 100%; max-height: 520px; transform: scale(var(--s, 1)); }
.lp-scene { perspective: 1100px; }
.lp-obj-yaw, .lp-obj-spin { transform-style: preserve-3d; }
.lp-obj-yaw { position: relative; width: 150px; height: 280px; transform: rotateX(-8deg) rotateY(-32deg); }
.lp-obj-spin.is-spinning { animation: lp-spin 1.9s cubic-bezier(.65, 0, .35, 1); }
@keyframes lp-spin { to { transform: rotateY(360deg); } }
.lp-face { position: absolute; backface-visibility: hidden; }
.lp-front, .lp-back { width: 150px; height: 280px; }
.lp-left, .lp-right { width: 64px; height: 280px; left: calc(50% - 32px); }
.lp-top, .lp-bottom { width: 150px; height: 64px; top: calc(50% - 32px); }
.lp-front { transform: translateZ(32px); background: #f3f6f8; border-radius: 6px; }
.lp-back { transform: rotateY(180deg) translateZ(32px); background: #dfe5e9; }
.lp-right { transform: rotateY(90deg) translateZ(75px); background: linear-gradient(90deg, #e7ecef, #c3ccd2); }
.lp-left { transform: rotateY(-90deg) translateZ(75px); background: linear-gradient(90deg, #b3bdc4, #d9e0e4); }
.lp-top { transform: rotateX(90deg) translateZ(140px); background: #fff; }
.lp-bottom { transform: rotateX(-90deg) translateZ(140px); background: #8a959c; }
.lp-front::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; background: linear-gradient(160deg, #1b2226, #080b0d); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.lp-ring { position: absolute; top: 46px; left: 50%; width: 92px; aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; }
.lp-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--pct, 0) * 1%), rgba(255,255,255,0.12) 0); -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); filter: drop-shadow(0 0 8px rgba(143,224,74,0.7)); }
.lp-ring b { position: relative; color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.lp-front .lp-brand { position: absolute; left: 0; right: 0; bottom: 74px; text-align: center; color: rgba(255,255,255,0.55); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.lp-led { position: absolute; left: 50%; bottom: 34px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.lp-obj-shadow { position: absolute; left: 50%; bottom: 8%; width: 230px; height: 34px; margin-left: -115px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%); filter: blur(6px); }
.lp-story-text { position: relative; height: 300px; max-width: 440px; }
.lp-story-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; will-change: transform, opacity; }
.lp-story-step > span { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--lime); transition: color .45s ease; }
.lp-story.is-ice .lp-story-step > span { color: #2f7d1a; }
.lp-story-step h3 { margin: 12px 0 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; }
.lp-story-step p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; opacity: 0.72; }
.lp-story-step .lp-btn { align-self: flex-start; margin-top: 24px; background: #fff; color: #050607; }
.lp-story.is-ice .lp-story-step .lp-btn { background: #050607; color: #fff; }
.lp-story-dots { position: absolute; right: clamp(14px, 2.4vw, 32px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-story-dots li { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.25; transition: opacity .3s ease, height .3s ease; }
.lp-story-dots li.on { opacity: 1; height: 22px; border-radius: 6px; }

@media (max-width: 860px) {
    .lp-story-stage { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; padding: 80px 24px 24px; gap: 0; }
    .lp-story-obj { --s: 0.62; max-height: none; }
    .lp-story-glow { left: 50%; top: 30%; }
    .lp-story-text { height: 100%; max-width: none; }
    .lp-story-step { justify-content: flex-start; }
}
@media (max-width: 620px) { .lp-story { margin: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
    .lp-hero-bolt { animation: none; }
    .lp-story { height: auto; background: #0e1114; }
    .lp-story-stage { position: static; height: auto; display: block; padding-bottom: 64px; }
    .lp-story-text { height: auto; max-width: none; }
    .lp-story-step { position: static; opacity: 1; padding: 24px 0; }
    .lp-story-obj, .lp-story-glow, .lp-story-dots { display: none; }
    .lp-tilt, .lp-btn { transform: none !important; }
}


/* Responsive --------------------------------------------------------------- */
@media (max-width: 1060px) {
    .lp-cards, .lp-mosaic { grid-template-columns: repeat(2, 1fr); }
    .lp-steps { grid-template-columns: repeat(2, 1fr); }
    .lp-tile-photo { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 860px) {
    .lp-split, .lp-app { grid-template-columns: 1fr; }
    .lp-split-rev > :first-child { order: 0; }
    .lp-head-split { flex-direction: column; align-items: flex-start; gap: 16px; }
    .lp-head-split .lp-note { text-align: left; }
    .lp-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .lp-container { padding: 0 16px; }
    .lp-hero { margin: 8px 8px 0; padding-top: 110px; min-height: 0; }
    .lp-hero-content { margin-bottom: 170px; }
    .lp-hero-bolt { bottom: 12%; }
    .lp-cta { margin: 0 8px; }
    .lp-cards, .lp-mosaic, .lp-steps { grid-template-columns: 1fr; }
    .lp-tile-photo { grid-column: auto; }
    .lp-actions .lp-btn { width: 100%; }
    .lp-card { min-height: 0; }
}