/* ISP Pay BD — Premium Landing Page */ /* Fonts are loaded via + in home.php — an @import here would chain a render-blocking request. */ /* ═══════════════════════════════════════════════════════════════════════ "OPERATOR'S CONSOLE" redesign — Fiber-Ink token system. The page carries itself like the network-operations console an ISP owner already lives in. Color is FUNCTIONAL: online-green = paid/reconciled, amber = grace, red = expired, signal-teal = live data, vermilion = CTAs only. Token NAMES are unchanged from the legacy navy/orange system so every downstream rule recolors coherently; only the VALUES + a few new tokens change. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Midnight-violet system — ONE background #0c0118 everywhere (owner's pick): no light sections, no white cards. ONE azure accent; green = paid/online status only. */ --lp-primary-900: #0c0118; /* THE background — body + every section */ --lp-primary-850: #100322; /* barely-lifted (dark-section gradient top) */ --lp-primary-800: #1a0b38; /* raised panel / dark buttons */ --lp-primary-600: #4a2a8f; /* mid violet — dark-button hover, mid accents */ --lp-primary-400: #2E8BFF; /* azure — lighter accents */ /* Primary identity accent = azure, used sparingly (~10% of the page). */ --lp-accent: #2E8BFF; /* azure — eyebrows/icons/highlights */ --lp-accent-hover: #1D6FE8; /* Bright azure for eyebrows/links/icons on the dark canvas. */ --lp-accent-text: #7FB2FF; --lp-cyan: #5AB0FF; /* brighter azure (focus rings, live data) */ --lp-gold: #FFB020; /* amber — grace period */ --lp-success: #22C55E; --lp-danger: #E5484D; --lp-danger-soft: #FF8A8A; --lp-surface-dark: #100322; --lp-surface-light: #0c0118; /* every "light" section now shares the one dark bg */ --lp-surface: #180a30; /* lifted card surface on the dark canvas */ /* Soft tinted badge wash — azure. */ --lp-accent-soft: linear-gradient(135deg, rgba(46, 139, 255, 0.15), rgba(90, 176, 255, 0.12)); --lp-text: #FFFFFF; --lp-text-muted: rgba(223, 214, 245, 0.66); --lp-text-dark: #F1ECFF; --lp-text-secondary: #A99FC6; --lp-border: rgba(160, 140, 220, 0.12); --lp-border-light: rgba(160, 140, 220, 0.20); --lp-radius-sm: 8px; --lp-radius-md: 16px; --lp-radius-lg: 24px; --lp-radius-xl: 32px; --lp-shadow: 0 4px 20px rgba(0, 0, 0, 0.40); --lp-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); --lp-ease: cubic-bezier(0.16, 1, 0.3, 1); --lp-duration-fast: 0.15s; --lp-duration-base: 0.3s; --lp-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --lp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Data/utility face — ৳ amounts, ref IDs, uptime %, timestamps, eyebrows. IBM Plex Mono if ever self-hosted, else a robust system-mono stack. */ --lp-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; --lp-nav-h: 72px; --lp-container: 1280px; /* ── Semantic tokens for the console layer ── */ --lp-online: #22C55E; /* status green — paid / online / reconciled ONLY */ --lp-online-soft: rgba(34, 197, 94, 0.14); --lp-signal: #4DA3FF; /* live/streaming data — azure family */ --lp-amber: #FFB020; --lp-offline: #FF6B6B; --lp-action: #f75803; /* CTA vermilion (reserved for primary buttons + interaction states) */ --lp-action-hover: #d24b03; --lp-action-text: #FFFFFF; --lp-ink-panel: #140529; /* console panel bg */ --lp-ink-raised: #20103f; /* raised row inside a panel */ --lp-ink-line: rgba(46, 139, 255, 0.16); /* hairline on ink — faint azure */ --lp-mono-dim: rgba(223, 214, 245, 0.50); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The `hidden` attribute must always win over any component's `display` rule — otherwise the EN/BN language spans, the extra pricing tiers, and every other [hidden] toggle (PAYG hint, savings CTA) render permanently visible/duplicated, since author rules like `.lp-hero__title-line { display: block }` beat the user-agent's `[hidden] { display: none }` regardless of selector specificity. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--lp-nav-h) + 16px); /* Reserve the scrollbar gutter permanently — otherwise "Show more" (features, pricing) growing the page past the viewport height makes a scrollbar appear mid-interaction, shifting the entire page sideways by its width. */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body.lp-body { font-family: var(--lp-font-body); background: var(--lp-primary-900); color: var(--lp-text); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } .lp-skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--lp-accent); color: var(--lp-primary-900); border-radius: var(--lp-radius-sm); font-weight: 700; text-decoration: none; } .lp-skip-link:focus { top: 16px; } .lp-container { width: min(100% - 32px, var(--lp-container)); margin-inline: auto; } /* ── Nav ── */ .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--lp-nav-h); display: flex; align-items: center; /* backdrop-filter stays applied permanently (invisible over a transparent background) — transitioning it forces full-width blur repaints mid-scroll. */ background: rgba(0, 12, 38, 0); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease); } .lp-nav.is-scrolled { background: rgba(0, 12, 38, 0.85); border-bottom: 1px solid var(--lp-border); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); } .lp-nav__inner { display: flex; align-items: center; justify-content: space-between; width: min(100% - 32px, var(--lp-container)); margin-inline: auto; } .lp-nav__logo img { width: 44px; height: 44px; object-fit: contain; } .lp-nav__brand, .lp-footer__brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; } .lp-brand-logo-img { display: block; flex-shrink: 0; } .lp-brand-logo-img--full { height: 44px; width: auto; max-width: min(240px, 42vw); object-fit: contain; border-radius: 8px; } .lp-brand-logo-img--mark { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; background: #fff; padding: 5px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); } .lp-phone-frame__app-icon { width: auto; height: 34px; max-width: 132px; margin: 0 auto 8px; object-fit: contain; display: block; border-radius: 6px; } .lp-phone-frame__app-icon--mark { width: 44px; height: 44px; max-width: 44px; padding: 5px; background: #fff; border-radius: 12px; } .lp-nav__brand-text { display: flex; flex-direction: column; line-height: 1.2; } .lp-nav__brand-name { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; } .lp-nav__brand-tag { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.88); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .lp-btn--sm { padding: 10px 18px; font-size: 0.875rem; } .lp-nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; } .lp-nav__links a { color: var(--lp-text-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color var(--lp-duration-base) var(--lp-ease); } .lp-nav__links a:hover, .lp-nav__links a.is-active { color: #fff; } .lp-nav__actions { display: flex; align-items: center; gap: 12px; } .lp-nav__toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; border-radius: var(--lp-radius-sm); color: #fff; font-size: 1.5rem; cursor: pointer; padding: 8px; transition: background var(--lp-duration-base) var(--lp-ease), transform var(--lp-duration-fast) var(--lp-ease); } .lp-nav__toggle:hover { background: rgba(255, 255, 255, 0.08); } .lp-nav__toggle:active { transform: scale(0.9); } /* Buttons */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--lp-radius-sm); font-family: var(--lp-font-body); font-size: 0.9375rem; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s var(--lp-ease), box-shadow 0.2s, background 0.2s, border-color 0.2s; white-space: nowrap; } .lp-btn:focus-visible { outline: 2px solid var(--lp-action); outline-offset: 2px; } /* Press feedback — every button "compresses" on click, not just lifts on hover. */ .lp-btn:active { transform: scale(0.97); transition-duration: var(--lp-duration-fast); } /* Shared focus ring for every interactive element that previously had none. */ .lp-faq__question:focus-visible, .lp-product__tab:focus-visible, .lp-pricing-model__btn:focus-visible, .lp-pricing-toggle__switch:focus-visible, .lp-nav__links a:focus-visible, .lp-nav__toggle:focus-visible, .lp-footer__col a:focus-visible, .lp-mobile-menu a:focus-visible, .lp-mobile-menu__close:focus-visible, .lp-testimonials-dots button:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; border-radius: 4px; } /* CTAs are the ONE place vermilion appears — the single "action" color, kept distinct from the green identity accent so a click target always reads the same. */ .lp-btn--primary { background: var(--lp-action); color: var(--lp-action-text); font-weight: 700; letter-spacing: 0.01em; } .lp-btn--primary:hover { background: var(--lp-action-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(247, 88, 3, 0.38); } .lp-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); } .lp-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); } .lp-btn--dark { background: var(--lp-primary-800); color: #fff; } .lp-btn--dark:hover { background: var(--lp-primary-600); } .lp-btn--lg { padding: 14px 32px; font-size: 1rem; } .lp-btn--block { width: 100%; } /* ── Hero ── */ .lp-hero { position: relative; min-height: 100vh; min-height: 100svh; /* mobile URL-bar-aware viewport; falls back to 100vh */ display: flex; align-items: center; padding: calc(var(--lp-nav-h) + 40px) 0 80px; overflow: hidden; } .lp-hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(46, 139, 255, 0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(46, 139, 255, 0.08) 0%, transparent 50%), linear-gradient(180deg, var(--lp-primary-900) 0%, var(--lp-primary-800) 50%, var(--lp-primary-850) 100%); z-index: 0; } .lp-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .lp-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--lp-border); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--lp-text-muted); margin-bottom: 24px; } .lp-hero__badge-dot { width: 8px; height: 8px; background: var(--lp-success); border-radius: 50%; animation: lp-pulse 2s infinite; } @keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .lp-hero__title { font-family: var(--lp-font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.12; margin-bottom: 20px; } .lp-hero__title-line { display: block; color: #fff; } .lp-hero__title-accent { display: block; margin-top: 14px; font-size: clamp(1.125rem, 2.2vw, 1.55rem); font-weight: 700; line-height: 1.35; /* Azure payoff line — single-accent, NOT azure→green (green is status only). */ background: linear-gradient(90deg, var(--lp-accent), var(--lp-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-hero__title .lp-gradient-cyan { background: linear-gradient(90deg, var(--lp-primary-400), var(--lp-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-hero__title .lp-gradient-gold { background: linear-gradient(90deg, var(--lp-gold), #F6E05E); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-hero__desc { font-size: 1.125rem; color: var(--lp-text-muted); max-width: 520px; margin-bottom: 32px; } .lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .lp-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; } .lp-hero__pill { padding: 6px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--lp-border); border-radius: 999px; font-size: 0.8125rem; color: var(--lp-text-muted); } .lp-hero__visual { position: relative; display: flex; justify-content: center; } .lp-hero__laptop { width: 100%; max-width: 560px; animation: lp-float 6s ease-in-out infinite; } @keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .lp-hero__laptop img { width: 100%; height: auto; /* No drop-shadow here — the browser frame already carries a box-shadow and its overflow:hidden clipped this one anyway (pure wasted paint). */ } .lp-hero__float-card { position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); padding: 10px 16px; border-radius: var(--lp-radius-md); box-shadow: var(--lp-shadow-lg); display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--lp-text-dark); animation: lp-float 5s ease-in-out infinite; } .lp-hero__float-card i { color: var(--lp-primary-400); } .lp-hero__float-card--1 { top: 12%; left: -8%; animation-delay: 0s; } .lp-hero__float-card--2 { top: 55%; right: -4%; animation-delay: 1s; } .lp-hero__float-card--3 { bottom: 8%; left: 10%; animation-delay: 2s; } /* ── Sections shared ── */ .lp-section { padding: 96px 0; position: relative; } .lp-section--light { background: var(--lp-surface-light); color: var(--lp-text-dark); } .lp-section--dark { background: linear-gradient(180deg, var(--lp-primary-850) 0%, var(--lp-primary-900) 100%); } /* Left-anchored editorial header (was centered on every section — the "AI template" through-line). Eyebrow → display title → supporting line, all left-aligned. */ .lp-section__header { max-width: 62ch; margin: 0 0 clamp(40px, 5vw, 56px); } /* Console "system tag" eyebrow — monospace + a live status dot, so every section header reads like a labelled readout on an operations console. */ .lp-section__label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lp-font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-accent); margin-bottom: 14px; } .lp-section__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-online); box-shadow: 0 0 0 3px var(--lp-online-soft); flex-shrink: 0; } /* Darker green on the light "paper" surface — bright green fails WCAG AA there. */ .lp-section--light .lp-section__label { color: var(--lp-accent-text); } .lp-section__title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .lp-section__desc { font-size: 1.0625rem; color: var(--lp-text-muted); } .lp-section--light .lp-section__title { color: var(--lp-text-dark); } .lp-section--light .lp-section__desc { color: var(--lp-text-secondary); } .lp-section--light .lp-timeline__title { color: var(--lp-text-dark); } .lp-section--light .lp-timeline__desc { color: var(--lp-text-secondary); } .lp-section--light .lp-timeline__circle { background: var(--lp-surface); box-shadow: var(--lp-shadow); } .lp-section--light .lp-split__desc { color: var(--lp-text-secondary); } .lp-section--light .lp-check-list li { color: var(--lp-text-secondary); } /* Scroll reveal */ .lp-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease); } .lp-reveal.is-visible { opacity: 1; transform: translateY(0); } .lp-reveal-delay-1 { transition-delay: 0.1s; } .lp-reveal-delay-2 { transition-delay: 0.2s; } .lp-reveal-delay-3 { transition-delay: 0.3s; } /* ── Marquee (shared by Our Partners) ── */ .lp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .lp-marquee__inner { display: flex; gap: 48px; width: max-content; animation: lp-marquee 40s linear infinite; } .lp-marquee:hover .lp-marquee__inner { animation-play-state: paused; } @keyframes lp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .lp-marquee__item { flex-shrink: 0; width: 120px; height: 48px; display: flex; align-items: center; justify-content: center; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; } .lp-marquee__item:hover { opacity: 1; filter: grayscale(0); } .lp-marquee__item img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ── Our Partners ── */ .lp-partners__header { text-align: center; margin-bottom: 40px; } .lp-partners__title { display: inline-block; font-family: var(--lp-font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; padding-bottom: 14px; border-bottom: 3px solid var(--lp-accent); } .lp-marquee__item--partner { width: 220px; height: 160px; background: #fff; border-radius: var(--lp-radius-md); padding: 24px; opacity: 1; filter: none; box-shadow: var(--lp-shadow); } /* ── Stats ── */ .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .lp-stat { min-width: 0; text-align: center; padding: 32px 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); transition: transform 0.3s var(--lp-ease), border-color 0.3s; } .lp-stat:hover { transform: translateY(-4px); border-color: rgba(46, 139, 255, 0.3); } .lp-stat__icon { width: 48px; height: 48px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(46, 139, 255, 0.12); border-radius: var(--lp-radius-md); color: var(--lp-cyan); font-size: 1.25rem; } .lp-stat__value { font-family: var(--lp-font-mono); font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: 8px; color: #F5F8FF; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: break-word; } .lp-stat__label { font-size: 0.9375rem; color: var(--lp-text-muted); } /* ── Benefits (bento — one wide network tile + two supporting; elevation, no border) ── */ .lp-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .lp-benefit { padding: 32px 28px; background: var(--lp-surface); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s; } .lp-benefit--wide { grid-column: 1 / -1; } .lp-benefit:hover { transform: translateY(-6px); box-shadow: var(--lp-shadow-lg); } .lp-benefit__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(46, 139, 255, 0.1); border-radius: var(--lp-radius-md); color: var(--lp-accent-text); font-size: 1.5rem; margin-bottom: 20px; } .lp-benefit__title { font-family: var(--lp-font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: var(--lp-text-dark); letter-spacing: -0.01em; } .lp-benefit--wide .lp-benefit__title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); } .lp-benefit--wide .lp-benefit__desc { max-width: 60ch; } .lp-benefit__desc { font-size: 0.9375rem; color: var(--lp-text-secondary); line-height: 1.7; } .lp-benefit__strip { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(11, 27, 58, 0.10); } .lp-benefit__stat { font-family: var(--lp-font-mono); font-size: 0.82rem; color: var(--lp-text-secondary); display: inline-flex; align-items: center; gap: 8px; } .lp-benefit__stat b { color: var(--lp-text-dark); font-weight: 600; } @media (max-width: 720px) { .lp-benefits { grid-template-columns: 1fr; } } /* ── Roles & permissions ── */ .lp-roles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .lp-roles-card { padding: 28px 22px; background: var(--lp-surface); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); border: 1px solid var(--lp-border-light); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s; } .lp-roles-card:hover { transform: translateY(-6px); box-shadow: var(--lp-shadow-lg); } .lp-roles-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--lp-accent-soft); border-radius: var(--lp-radius-md); color: var(--lp-accent); font-size: 1.25rem; margin-bottom: 16px; } .lp-roles-card h3 { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; color: var(--lp-text-dark); } .lp-roles-card p { font-size: 0.875rem; color: var(--lp-text-secondary); line-height: 1.6; } .lp-roles-note { text-align: center; font-size: 0.875rem; color: var(--lp-text-secondary); margin-top: 28px; } .lp-roles-note strong { color: var(--lp-text-dark); } /* ── Product tabs ── */ /* Single centred stack: segmented pill tabs → browser mockup → carousel → bullets. (Was a 280px sidebar grid fighting a later pill-bar ruleset — the two merged into vertical pills in a stray column. One coherent layout now.) */ .lp-product { display: flex; flex-direction: column; align-items: center; gap: 22px; } .lp-product__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--lp-border); border-radius: 999px; } .lp-product__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--lp-text-muted); font-family: var(--lp-font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.2s var(--lp-ease), color 0.2s, box-shadow 0.2s; white-space: nowrap; } .lp-product__tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } .lp-product__tab.is-active { background: var(--lp-accent); color: #fff; box-shadow: 0 6px 16px rgba(46, 139, 255, 0.28); } .lp-product__tab i { color: currentColor; } .lp-product__preview { position: relative; width: 100%; max-width: 880px; border-radius: var(--lp-radius-lg); overflow: hidden; box-shadow: var(--lp-shadow-lg); border: 1px solid var(--lp-border); } .lp-product__preview img { width: 100%; height: auto; display: block; /* Show the whole screenshot at its natural ratio — never crop. */ transition: opacity 0.35s var(--lp-ease), transform 0.35s var(--lp-ease); } .lp-product__preview img.is-swapping { opacity: 0; transform: scale(0.98); } .lp-product__bullets { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.3s var(--lp-ease); } .lp-product__bullets.is-swapping { opacity: 0; } .lp-product__bullet { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--lp-text-muted); } .lp-product__bullet i { color: var(--lp-success); font-size: 0.75rem; } /* ── Product Tour: Website / Mobile switch — cloned from .lp-pricing-model's ruleset (same visual language), renamed so a future pricing-only CSS change can never silently affect this unrelated section. ── */ .lp-showcase-model { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto 32px; } .lp-showcase-model__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 24px; background: rgba(255,255,255,0.04); border: 2px solid var(--lp-border); border-radius: var(--lp-radius-lg); color: var(--lp-text-muted); font-family: var(--lp-font-body); cursor: pointer; transition: border-color 0.35s var(--lp-ease), background 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease); text-align: left; } .lp-showcase-model__btn i { font-size: 1.25rem; color: var(--lp-cyan); margin-bottom: 4px; } .lp-showcase-model__btn span { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; color: #fff; } .lp-showcase-model__btn em { font-style: normal; font-size: 0.8125rem; color: var(--lp-text-muted); } .lp-showcase-model__btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); } .lp-showcase-model__btn.is-active { border-color: var(--lp-accent); background: rgba(46,139,255,0.1); box-shadow: 0 8px 32px rgba(46,139,255,0.15); } .lp-showcase-model__btn.is-active i { color: var(--lp-accent); } .lp-showcase-panel { display: none; animation: lp-panel-in 0.45s var(--lp-ease); } .lp-showcase-panel.is-active { display: block; } /* Gallery prev/next + "01 / 05 · Caption" mono readout, sitting just below the device frame (kept outside .lp-product__preview so it's never clipped by that element's overflow:hidden / rounded corners). */ .lp-showcase-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .lp-showcase-nav.is-hidden { display: none; } .lp-showcase-nav__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lp-border); background: rgba(255,255,255,0.04); color: var(--lp-text-muted); cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, color 0.2s, background 0.2s; } .lp-showcase-nav__btn:hover:not(:disabled) { border-color: var(--lp-accent); color: var(--lp-accent); background: rgba(46,139,255,0.1); } .lp-showcase-nav__btn:disabled { opacity: 0.35; cursor: default; } .lp-showcase-nav__caption { font-family: var(--lp-font-mono); font-size: 0.75rem; color: var(--lp-text-muted); letter-spacing: 0.02em; min-width: 0; text-align: center; } /* Real screenshot filling the phone screen — .lp-phone-frame__screen's base rule (elsewhere on the page it wraps a synthesized app UI, not an ) is left untouched; this is scoped to the showcase mobile panel only. */ .lp-showcase-panel .lp-phone-frame__screen img { width: 100%; display: block; margin-bottom: 0; } @media (max-width: 768px) { .lp-showcase-model { grid-template-columns: 1fr; } } /* ── Features grid ── */ .lp-features-search { max-width: 400px; margin: 0 auto 40px; position: relative; } .lp-features-search input { width: 100%; padding: 14px 20px 14px 48px; border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-md); font-family: var(--lp-font-body); font-size: 0.9375rem; background: var(--lp-surface); color: var(--lp-text-dark); transition: border-color 0.2s, box-shadow 0.2s; } .lp-features-search input:focus { outline: none; border-color: var(--lp-primary-400); box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.15); } .lp-features-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--lp-text-secondary); } .lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .lp-feature { padding: 28px 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%), var(--lp-surface); border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-lg); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s, border-color 0.3s, opacity 0.2s var(--lp-ease); position: relative; overflow: hidden; } /* Accent hairline along the top edge, lit only on hover. */ .lp-feature::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--lp-accent), var(--lp-cyan)); opacity: 0; transition: opacity 0.3s var(--lp-ease); } .lp-feature:hover { transform: translateY(-5px); box-shadow: var(--lp-shadow-lg); border-color: rgba(46, 139, 255, 0.45); } .lp-feature:hover::after { opacity: 1; } .lp-feature:hover .lp-feature__icon { transform: scale(1.06); box-shadow: 0 8px 20px rgba(46, 139, 255, 0.28); } /* Search filtering: fade out first (.is-fading), then drop from the grid. */ .lp-feature.is-fading { opacity: 0; transform: scale(0.96); } .lp-feature.is-hidden { display: none; } .lp-feature__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(46, 139, 255, 0.22), rgba(90, 176, 255, 0.09)); border: 1px solid rgba(46, 139, 255, 0.25); border-radius: 14px; color: var(--lp-accent-text); font-size: 1.25rem; margin-bottom: 18px; transition: transform 0.3s var(--lp-ease), box-shadow 0.3s; } .lp-feature__title { font-family: var(--lp-font-display); font-size: 1.125rem; font-weight: 800; margin-bottom: 14px; color: var(--lp-text-dark); } .lp-feature__list { list-style: none; font-size: 0.85rem; color: var(--lp-text-secondary); display: flex; flex-direction: column; gap: 3px; } .lp-feature__list li { padding: 5px 0 5px 24px; position: relative; line-height: 1.45; } /* CSS-drawn check (no Font Awesome dependency in a pseudo-element). */ .lp-feature__list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 5px; height: 9px; border: solid var(--lp-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .lp-feature__badge { position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; } .lp-feature__badge--new { background: rgba(34, 197, 94, 0.15); color: var(--lp-success); } .lp-feature__badge--popular { background: rgba(46, 139, 255, 0.12); color: var(--lp-accent); } .lp-feature__badge--advanced { background: rgba(46, 139, 255, 0.12); color: var(--lp-cyan); } /* ── Plugins & Addons ── */ .lp-plugins { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .lp-plugin { padding: 24px; background: var(--lp-surface); border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-md); position: relative; transition: transform 0.3s var(--lp-ease), box-shadow 0.3s, border-color 0.3s; } .lp-plugin:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-lg); border-color: rgba(46, 139, 255, 0.4); } .lp-plugin__badge { position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; background: rgba(46, 139, 255, 0.12); color: var(--lp-accent); } .lp-plugin__image { height: 120px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border-radius: var(--lp-radius-sm); margin-bottom: 16px; overflow: hidden; } .lp-plugin__image img { max-width: 100%; max-height: 100%; object-fit: contain; } .lp-plugin__image i { font-size: 2rem; color: var(--lp-text-secondary); opacity: 0.4; } .lp-plugin__title { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; color: var(--lp-text-dark); } .lp-plugin__desc { font-size: 0.8125rem; color: var(--lp-text-secondary); line-height: 1.6; } .lp-plugins__cta { text-align: center; margin-top: 32px; } /* ── Integrations ── */ .lp-integrations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .lp-integration { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 16px; background: var(--lp-surface); border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); transition: transform 0.3s var(--lp-ease), border-color 0.3s, box-shadow 0.3s; } .lp-integration:hover { transform: translateY(-5px); border-color: rgba(46, 139, 255, 0.4); box-shadow: var(--lp-shadow-lg); } .lp-integration:hover .lp-integration__icon { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(0, 0, 0, 0.28); } /* Logo tile: a polished light "app icon" chip (brand logos need a light plate to stay legible), with an inner highlight + soft drop shadow — not a flat white slab. */ .lp-integration__icon { width: 100%; height: 62px; display: flex; align-items: center; justify-content: center; padding: 10px 16px; background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 14px; font-size: 1.5rem; color: var(--lp-primary-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s; } .lp-integration__icon img { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; } .lp-integration__name { font-size: 0.85rem; font-weight: 600; color: var(--lp-text-dark); text-align: center; } /* ── Core rails — the 3 integrations the product is built on, hero-weighted above the secondary grid. Tiering IS the content: it tells a buyer which integrations are load-bearing vs. supporting, instead of one flat wall. ── */ .lp-rails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .lp-rail { position: relative; overflow: hidden; padding: 28px 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%), var(--lp-surface); border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); transition: transform 0.3s var(--lp-ease), border-color 0.3s, box-shadow 0.3s; } /* Accent hairline, lit on hover (matches the feature cards). */ .lp-rail::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--lp-accent), var(--lp-cyan)); opacity: 0; transition: opacity 0.3s var(--lp-ease); } .lp-rail:hover { transform: translateY(-5px); border-color: rgba(46, 139, 255, 0.45); box-shadow: var(--lp-shadow-lg); } .lp-rail:hover::after { opacity: 1; } .lp-rail:hover .lp-rail__icon { transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px rgba(0, 0, 0, 0.3); } .lp-rail__tag { display: inline-block; padding: 5px 12px; background: rgba(46, 139, 255, 0.14); color: var(--lp-cyan); border: 1px solid rgba(46, 139, 255, 0.3); border-radius: 999px; font-family: var(--lp-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 20px; } .lp-rail__icon { width: 100%; max-width: 156px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 12px 18px; background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 14px; margin-bottom: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 12px rgba(0, 0, 0, 0.22); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s; } .lp-rail__icon img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; } .lp-rail__name { font-family: var(--lp-font-display); font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--lp-text-dark); } .lp-rail__desc { font-size: 0.92rem; line-height: 1.6; color: var(--lp-text-secondary); } .lp-integrations__label { font-family: var(--lp-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-text-secondary); margin-bottom: 16px; } /* ── Timeline ── */ .lp-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .lp-timeline::before { content: ''; position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--lp-accent), var(--lp-cyan)); opacity: 0.3; } .lp-timeline__step { text-align: center; padding: 0 16px; position: relative; } .lp-timeline__circle { width: 72px; height: 72px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: var(--lp-primary-800); border: 2px solid var(--lp-accent); border-radius: 50%; font-size: 1.5rem; color: var(--lp-accent); position: relative; z-index: 1; } .lp-timeline__title { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; } .lp-timeline__desc { font-size: 0.875rem; color: var(--lp-text-muted); } /* ── Comparison table ── */ .lp-compare-hint { display: none; align-items: center; gap: 8px; font-family: var(--lp-font-mono); font-size: 0.8125rem; color: var(--lp-text-secondary); margin: 0 0 12px; } .lp-compare-wrap { overflow-x: auto; border-radius: var(--lp-radius-lg); border: 1px solid var(--lp-border-light); background: var(--lp-surface); } .lp-compare { width: 100%; border-collapse: collapse; min-width: 600px; } .lp-compare th, .lp-compare td { padding: 16px 24px; text-align: center; border-bottom: 1px solid var(--lp-border-light); font-size: 0.9375rem; } .lp-compare th { background: var(--lp-primary-800); color: #fff; font-weight: 600; } .lp-compare th:first-child, .lp-compare td:first-child { text-align: left; font-weight: 500; color: var(--lp-text-dark); } .lp-compare td:first-child { background: rgba(255, 255, 255, 0.02); } .lp-compare tbody td { transition: background var(--lp-duration-base) var(--lp-ease); } .lp-compare tbody tr:hover td { background: rgba(46, 139, 255, 0.05); } .lp-compare .lp-check { color: var(--lp-accent); font-size: 1.125rem; } .lp-compare .lp-cross { color: var(--lp-danger); font-size: 1.125rem; } .lp-compare .lp-limited { color: var(--lp-text-secondary); font-size: 0.8125rem; font-style: italic; } /* The winning column physically dominates: azure header, tinted body, lifted sides. */ .lp-compare col.lp-col-us { background: rgba(46, 139, 255, 0.09); } .lp-compare th:nth-child(2) { background: var(--lp-action); color: var(--lp-action-text); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35); } .lp-compare td:nth-child(2) { border-inline: 1px solid rgba(46, 139, 255, 0.25); font-weight: 600; color: var(--lp-text-dark); } .lp-compare tbody tr:last-child td:nth-child(2) { border-bottom: 1px solid rgba(46, 139, 255, 0.25); } /* ── Testimonials ── */ .lp-testimonials { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .lp-testimonial { flex: 1 1 340px; max-width: 400px; padding: 32px 28px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); transition: transform 0.3s var(--lp-ease); } .lp-testimonial:hover { transform: translateY(-4px); } .lp-testimonial__stars { color: var(--lp-gold); margin-bottom: 16px; font-size: 0.875rem; } .lp-testimonial__quote { font-size: 0.9375rem; color: var(--lp-text-muted); line-height: 1.7; margin-bottom: 24px; font-style: italic; } .lp-testimonial__author { display: flex; align-items: center; gap: 12px; } .lp-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-primary-600), var(--lp-cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; } .lp-testimonial__name { font-weight: 600; font-size: 0.9375rem; } .lp-testimonial__role { font-size: 0.8125rem; color: var(--lp-text-muted); } /* ── ROI Calculator ── */ .lp-roi { max-width: 560px; margin: 0 auto; padding: 40px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-xl); position: relative; overflow: hidden; } .lp-roi::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--lp-accent), var(--lp-cyan)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .lp-roi__field { margin-bottom: 24px; } .lp-roi__field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; color: var(--lp-text-muted); } .lp-roi__field input[type="number"] { width: 100%; padding: 12px 16px; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm); background: rgba(0, 0, 0, 0.2); color: #fff; font-family: var(--lp-font-body); font-size: 1rem; } .lp-roi__value { font-family: var(--lp-font-display); font-size: 1.5rem; font-weight: 700; color: var(--lp-cyan); margin-top: 8px; } .lp-roi__result { margin-top: 24px; padding: 24px; background: rgba(34, 197, 94, 0.1); border-radius: var(--lp-radius-md); text-align: center; display: none; } .lp-roi__result.is-visible { display: block; animation: lp-fadeIn 0.5s var(--lp-ease); } @keyframes lp-fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .lp-roi__savings { font-family: var(--lp-font-display); font-size: 2rem; font-weight: 800; color: var(--lp-success); } /* ── Pricing ── */ .lp-pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 48px; } .lp-pricing-toggle__label { font-size: 0.9375rem; font-weight: 600; color: var(--lp-text-muted); } .lp-pricing-toggle__label.is-active { color: #fff; } .lp-pricing-toggle__switch { width: 52px; height: 28px; background: rgba(255, 255, 255, 0.15); border-radius: 999px; border: none; cursor: pointer; position: relative; transition: background 0.3s; } .lp-pricing-toggle__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform 0.3s var(--lp-ease); } .lp-pricing-toggle__switch.is-yearly::after { transform: translateX(24px); } .lp-pricing-toggle__badge { padding: 4px 10px; background: rgba(34, 197, 94, 0.15); color: var(--lp-success); border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .lp-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; } .lp-pricing-card { padding: 32px 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); display: flex; flex-direction: column; transition: transform 0.3s var(--lp-ease), border-color 0.3s, box-shadow 0.3s; } .lp-pricing-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); } /* Featured plan reads as "recommended" via an OPAQUE dark-azure base + a soft azure edge glow — never a solid azure fill (azure stays an accent on the one dark canvas). The base MUST be opaque: the glow (::before) sits behind the card (z-index:-1), so a translucent body lets it flood the whole card blue — the "looks selected" bug. The opaque base confines the glow to the edges. */ .lp-pricing-card--featured { background: linear-gradient(180deg, rgba(46, 139, 255, 0.16), rgba(46, 139, 255, 0.05)), var(--lp-primary-850); border-color: rgba(46, 139, 255, 0.55); /* Glow via box-shadow, NOT a ::before fill: the card carries .lp-reveal (transform: translateY) which makes it a stacking context, so a z-index:-1 pseudo-element can't sit behind the card's own background — it overlays the whole card and floods it azure (the "looks selected" bug). box-shadow can never fill the interior: a crisp azure ring + a soft halo + elevation. */ box-shadow: 0 0 0 1px rgba(46, 139, 255, 0.35), 0 10px 40px rgba(46, 139, 255, 0.22), var(--lp-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .lp-pricing-card--featured:hover { transform: translateY(-4px); } .lp-pricing-card__badge { display: inline-block; padding: 5px 12px; background: rgba(46, 139, 255, 0.14); color: var(--lp-cyan); border: 1px solid rgba(46, 139, 255, 0.3); border-radius: 999px; font-family: var(--lp-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; align-self: flex-start; } .lp-pricing-card__name { font-family: var(--lp-font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; } .lp-pricing-card__users { font-size: 0.875rem; color: var(--lp-text-muted); margin-bottom: 20px; } .lp-pricing-card__price { font-family: var(--lp-font-mono); font-size: 2.4rem; font-weight: 700; line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; transition: transform 0.35s var(--lp-ease); } /* Pulse while the monthly/yearly tween runs (added by landing.js). */ .lp-pricing-card__price.is-updating { transform: scale(1.04); } .lp-pricing-card__price span.lp-pricing-card__unit { font-size: 1rem; font-weight: 500; color: var(--lp-text-muted); background: none; -webkit-background-clip: unset; background-clip: unset; } .lp-pricing-card__features { list-style: none; margin: 24px 0; flex: 1; } .lp-pricing-card__features li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 0.875rem; color: var(--lp-text-muted); } .lp-pricing-card__features .lp-yes { color: var(--lp-success); } .lp-pricing-card__features .lp-no { color: var(--lp-danger); opacity: 0.75; } /* "Show more plans" — reveals Business/Enterprise tiers for larger ISPs */ .lp-pricing-showmore { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 auto 32px; padding: 14px 28px; background: none; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm); color: var(--lp-text-muted); font-family: var(--lp-font-body); font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s; } .lp-pricing-showmore:hover, .lp-pricing-showmore:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); } .lp-pricing-showmore i { font-size: 0.8rem; transition: transform 0.3s var(--lp-ease); } .lp-pricing-showmore.is-expanded i { transform: rotate(180deg); } /* Light-section variant — the base colors assume a dark section background. */ .lp-pricing-showmore--light { margin: 8px auto 32px; color: var(--lp-text-secondary); border-color: var(--lp-border-light); } .lp-pricing-showmore--light:hover, .lp-pricing-showmore--light:focus-visible { color: var(--lp-text-dark); border-color: var(--lp-primary-400); background: rgba(11, 27, 58, 0.04); } .lp-pricing-grid--extra { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; } .lp-pricing-grid--extra .lp-pricing-card { animation: lp-pricing-extra-in 0.45s var(--lp-ease) both; } .lp-pricing-grid--extra .lp-pricing-card:nth-child(1) { animation-delay: 0s; } .lp-pricing-grid--extra .lp-pricing-card:nth-child(2) { animation-delay: 0.08s; } .lp-pricing-grid--extra .lp-pricing-card:nth-child(3) { animation-delay: 0.16s; } .lp-features--extra { margin-top: 20px; } @keyframes lp-pricing-extra-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .lp-pricing-grid--extra .lp-pricing-card { animation: none; } } /* Custom calculator */ .lp-custom-pricing { padding: 48px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-xl); } .lp-custom-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .lp-custom-pricing__slider-wrap { margin: 24px 0; } /* Custom range slider — gradient-filled track (accent -> cyan) with a branded thumb. WebKit fakes the fill via the JS-driven --lp-fill custom property (set in landing.js); Firefox fills natively via ::-moz-range-progress. */ input[type="range"].lp-custom-pricing__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; } input[type="range"].lp-custom-pricing__slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--lp-accent) 0%, var(--lp-cyan) var(--lp-fill, 20%), rgba(255, 255, 255, 0.1) var(--lp-fill, 20%), rgba(255, 255, 255, 0.1) 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } input[type="range"].lp-custom-pricing__slider::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } input[type="range"].lp-custom-pricing__slider::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--lp-accent), var(--lp-cyan)); } input[type="range"].lp-custom-pricing__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-accent), var(--lp-cyan)); border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(46, 139, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.45); cursor: grab; transition: transform 0.15s var(--lp-ease), box-shadow 0.15s var(--lp-ease); } input[type="range"].lp-custom-pricing__slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-accent), var(--lp-cyan)); border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(46, 139, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.45); cursor: grab; transition: transform 0.15s var(--lp-ease), box-shadow 0.15s var(--lp-ease); } /* PAYG-only override: the ROI calculator (roi.php) shares .lp-custom-pricing__slider and keeps its original orange->cyan treatment to match .lp-roi's gradient border; only the PAYG wallet panel drops to single-hue orange for the "one accent owns money" system. Scoped by #lp-panel-payg so specificity wins without touching ROI. */ #lp-panel-payg input[type="range"].lp-custom-pricing__slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--lp-accent) 0%, var(--lp-accent-hover) var(--lp-fill, 20%), rgba(255, 255, 255, 0.1) var(--lp-fill, 20%), rgba(255, 255, 255, 0.1) 100%); } #lp-panel-payg input[type="range"].lp-custom-pricing__slider::-moz-range-progress { background: linear-gradient(to right, var(--lp-accent), var(--lp-accent-hover)); } #lp-panel-payg input[type="range"].lp-custom-pricing__slider::-webkit-slider-thumb { background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-hover)); } #lp-panel-payg input[type="range"].lp-custom-pricing__slider::-moz-range-thumb { background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-hover)); } input[type="range"].lp-custom-pricing__slider:hover::-webkit-slider-thumb, input[type="range"].lp-custom-pricing__slider:hover::-moz-range-thumb { transform: scale(1.15); } input[type="range"].lp-custom-pricing__slider:active::-webkit-slider-thumb, input[type="range"].lp-custom-pricing__slider:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.05); box-shadow: 0 0 0 7px rgba(46, 139, 255, 0.32), 0 3px 10px rgba(0, 0, 0, 0.45); } input[type="range"].lp-custom-pricing__slider:focus-visible { outline: none; } input[type="range"].lp-custom-pricing__slider:focus-visible::-webkit-slider-thumb, input[type="range"].lp-custom-pricing__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(46, 139, 255, 0.55), 0 0 0 8px rgba(46, 139, 255, 0.22); } #lp-panel-payg input[type="range"].lp-custom-pricing__slider:focus-visible::-webkit-slider-thumb, #lp-panel-payg input[type="range"].lp-custom-pricing__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(46, 139, 255, 0.4), 0 0 0 8px rgba(46, 139, 255, 0.16); } @media (prefers-reduced-motion: reduce) { input[type="range"].lp-custom-pricing__slider::-webkit-slider-thumb, input[type="range"].lp-custom-pricing__slider::-moz-range-thumb { transition: none; } } .lp-custom-pricing__formula { font-size: 0.875rem; color: var(--lp-text-muted); margin-bottom: 8px; } .lp-custom-pricing__addons { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .lp-custom-pricing__addon { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--lp-text-muted); cursor: pointer; } .lp-custom-pricing__addon input { accent-color: var(--lp-accent); } /* ── FAQ ── */ .lp-faq { max-width: 720px; margin: 0 auto; } /* Two-column FAQ — first half left, second half right; collapses to one column on narrow screens. Each column's items keep their own accordion behaviour. */ .lp-faq--cols { max-width: 1060px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; } @media (max-width: 768px) { .lp-faq--cols { grid-template-columns: 1fr; max-width: 640px; gap: 0; } } .lp-faq__item { border-bottom: 1px solid var(--lp-border-light); } .lp-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; background: none; border: none; font-family: var(--lp-font-body); font-size: 1rem; font-weight: 600; color: var(--lp-text-dark); cursor: pointer; text-align: left; } .lp-faq__question-text { flex: 1; min-width: 0; /* The .lp-faq column is 720px — most questions fit on one line at that width even after the flex min-width fix, so nothing visibly wrapped. Capping the text column forces genuinely long questions onto a second line instead of running the full container width. */ max-width: 460px; } .lp-faq__question i { flex-shrink: 0; transition: transform 0.3s var(--lp-ease); color: var(--lp-accent); } .lp-faq__item.is-open .lp-faq__question i { transform: rotate(180deg); } /* Grid-rows accordion: accurate timing at any content height, no clip cap (the old max-height:300px silently truncated long answers). Markup: the answer content sits inside an inner
wrapper (see faq.php). */ .lp-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--lp-ease); } .lp-faq__answer > div { overflow: hidden; min-height: 0; } .lp-faq__item.is-open .lp-faq__answer { grid-template-rows: 1fr; } .lp-faq__item.is-open .lp-faq__answer > div { padding-bottom: 20px; } .lp-faq__answer p { font-size: 0.9375rem; color: var(--lp-text-secondary); line-height: 1.7; } /* ── CTA band ── */ .lp-cta-band { padding: 80px 0; background: linear-gradient(135deg, var(--lp-primary-800), var(--lp-primary-600)); text-align: center; position: relative; overflow: hidden; } .lp-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(46, 139, 255, 0.15), transparent 60%); } .lp-cta-band__inner { position: relative; z-index: 1; } .lp-cta-band__title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; margin-bottom: 12px; } .lp-cta-band__desc { font-size: 1.0625rem; color: var(--lp-text-muted); margin-bottom: 32px; } .lp-cta-band__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* ── Contact ── */ .lp-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; } .lp-contact__info { display: flex; flex-direction: column; gap: 20px; } .lp-contact__card { display: flex; gap: 16px; padding: 20px; background: var(--lp-surface); border-radius: var(--lp-radius-md); border: 1px solid var(--lp-border-light); } .lp-contact__card-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(46, 139, 255, 0.12); border-radius: var(--lp-radius-sm); color: var(--lp-accent-text); } .lp-contact__card h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 4px; color: var(--lp-text-dark); } .lp-contact__card p { font-size: 0.875rem; color: var(--lp-text-secondary); } .lp-contact__form { padding: 36px; background: var(--lp-surface); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow-lg); border: 1px solid var(--lp-border-light); } .lp-contact__form h3 { font-family: var(--lp-font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; color: var(--lp-text-dark); } .lp-form-group { margin-bottom: 20px; } .lp-form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; color: var(--lp-text-dark); } .lp-form-group input:not([type="radio"]):not([type="checkbox"]), .lp-form-group textarea, .lp-form-group select { width: 100%; padding: 12px 16px; border: 1px solid var(--lp-border-light); border-radius: var(--lp-radius-sm); background: rgba(255, 255, 255, 0.03); font-family: var(--lp-font-body); font-size: 0.9375rem; color: var(--lp-text-dark); transition: border-color 0.2s, box-shadow 0.2s; } .lp-form-group input::placeholder, .lp-form-group textarea::placeholder { color: var(--lp-text-secondary); opacity: 0.8; } .lp-form-group input:not([type="radio"]):not([type="checkbox"]):focus, .lp-form-group textarea:focus { outline: none; border-color: var(--lp-primary-400); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.12); } .lp-form-group textarea { min-height: 120px; resize: vertical; } .lp-form-radios { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .lp-form-radios label { display: flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 500; font-size: 0.875rem; cursor: pointer; line-height: 1.4; } .lp-form-radios input[type="radio"] { width: auto; flex-shrink: 0; margin: 0; accent-color: var(--lp-accent); } .lp-alert { padding: 12px 16px; border-radius: var(--lp-radius-sm); margin-bottom: 20px; font-size: 0.875rem; } .lp-alert--success { background: #ECFDF3; color: #166534; border: 1px solid #BBF7D0; } .lp-alert--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } /* ── Footer ── */ .lp-footer { background: var(--lp-primary-900); border-top: 1px solid var(--lp-border); padding: 64px 0 32px; } .lp-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .lp-footer__brand p { font-size: 0.875rem; color: var(--lp-text-muted); margin-top: 16px; line-height: 1.7; } .lp-footer__col h4 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; } .lp-footer__col a { display: block; color: var(--lp-text-muted); text-decoration: none; font-size: 0.875rem; padding: 4px 0; transition: color 0.2s; } .lp-footer__col a:hover { color: var(--lp-accent); } .lp-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--lp-border); font-size: 0.8125rem; color: var(--lp-text-muted); flex-wrap: wrap; gap: 16px; } .lp-footer__copy { display: flex; flex-direction: column; gap: 4px; } .lp-footer__dev { font-size: 0.75rem; color: var(--lp-text-muted); opacity: 0.85; } .lp-footer__social { display: flex; gap: 12px; } .lp-footer__social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--lp-text-muted); text-decoration: none; transition: background 0.2s, color 0.2s; } .lp-footer__social a:hover { background: var(--lp-accent); color: var(--lp-primary-900); } .lp-footer__office { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; padding: 28px; margin-bottom: 40px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md); } .lp-footer__office-info h4 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; } .lp-footer__office-info p { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--lp-text-muted); line-height: 1.7; margin: 0 0 10px; } .lp-footer__office-info p i { width: 16px; margin-top: 3px; color: var(--lp-accent); flex-shrink: 0; } .lp-footer__office-info a { color: var(--lp-text-muted); text-decoration: none; transition: color 0.2s; } .lp-footer__office-info a:hover { color: var(--lp-accent); } .lp-footer__office-map iframe { width: 100%; height: 100%; min-height: 200px; border: 0; border-radius: var(--lp-radius-sm); display: block; } .lp-pay-with { text-align: center; padding: 40px 0; background: rgba(0, 0, 0, 0.15); } .lp-pay-with img { max-width: min(100%, 800px); height: auto; opacity: 0.85; } /* Built for a dark section (band tints black) — lighten it when this sits inside a light section instead of washing out to flat gray. */ .lp-section--light .lp-pay-with { background: rgba(11, 27, 58, 0.04); } /* ── Mobile sticky CTA ── */ .lp-mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; padding: 12px 16px; background: rgba(0, 12, 38, 0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--lp-border); transform: translateY(100%); transition: transform 0.4s var(--lp-ease); } .lp-mobile-cta.is-visible { transform: translateY(0); } /* ── Mobile menu overlay ── */ .lp-mobile-menu { display: none; position: fixed; inset: 0; z-index: 1001; background: rgba(0, 12, 38, 0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 24px; opacity: 0; transform: translateY(-12px) scale(0.98); pointer-events: none; transition: opacity var(--lp-duration-base) var(--lp-ease), transform 0.35s var(--lp-ease); } .lp-mobile-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .lp-mobile-menu a { color: #fff; text-decoration: none; font-size: 1.25rem; font-weight: 600; transition: color var(--lp-duration-base) var(--lp-ease); } .lp-mobile-menu a:hover { color: var(--lp-accent); } .lp-mobile-menu__close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; } /* ── Responsive ── */ @media (max-width: 1024px) { .lp-hero__grid { grid-template-columns: 1fr; text-align: center; } .lp-hero__desc { margin-inline: auto; } .lp-hero__ctas, .lp-hero__pills { justify-content: center; } .lp-hero__visual { margin-top: 48px; } .lp-hero__float-card--1 { left: 0; } .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-product { grid-template-columns: 1fr; } .lp-product__tabs { flex-direction: row; flex-wrap: wrap; } .lp-features { grid-template-columns: repeat(2, 1fr); } .lp-roles-grid { grid-template-columns: repeat(2, 1fr); } .lp-timeline { grid-template-columns: repeat(2, 1fr); gap: 32px; } .lp-timeline::before { display: none; } .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); } .lp-pricing-card--featured { transform: none; } .lp-custom-pricing__grid { grid-template-columns: 1fr; } .lp-contact { grid-template-columns: 1fr; } .lp-footer__grid { grid-template-columns: repeat(2, 1fr); } .lp-footer__office { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { /* .lp-mobile-menu duplicates every action here (lang toggle, login/dashboard, start-trial) for mobile — the desktop actions bar must hide completely, not just its outline button, or its remaining Login + Start Free Trial buttons overflow .lp-nav__inner and push .lp-nav__toggle off-screen, making the hamburger itself unreachable. */ .lp-nav__links, .lp-nav__actions { display: none; } .lp-nav__toggle { display: flex; } .lp-mobile-menu { display: flex; } .lp-mobile-cta { display: block; } .lp-body { padding-bottom: 72px; } .lp-section { padding: 64px 0; } .lp-stats { grid-template-columns: 1fr 1fr; } .lp-stat { padding: 24px 16px; } .lp-stat__value { font-size: 1.375rem; } .lp-features { grid-template-columns: 1fr; } .lp-roles-grid { grid-template-columns: 1fr; } .lp-integrations { grid-template-columns: repeat(2, 1fr); } .lp-timeline { grid-template-columns: 1fr; } .lp-pricing-grid { grid-template-columns: 1fr; } .lp-hero__float-card { display: none; } .lp-custom-pricing { padding: 28px 20px; } .lp-footer__grid { grid-template-columns: 1fr; } .lp-nav__brand-text { display: none; } .lp-hero__phone { display: none; } .lp-why-choose__grid { grid-template-columns: 1fr; } .lp-footer__social a { width: 44px; height: 44px; } .lp-footer__office { padding: 20px; } .lp-footer__office-map iframe { min-height: 180px; } } /* ══════════════════════════════════════════ v3 — Premium polish & conversion layer ══════════════════════════════════════════ */ /* Hero orbs & grid */ .lp-hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .lp-hero__orb--1 { width: 480px; height: 480px; top: -10%; right: 10%; background: rgba(46, 139, 255, 0.18); animation: lp-orb-drift 12s ease-in-out infinite; } .lp-hero__orb--2 { width: 360px; height: 360px; bottom: 5%; left: -5%; background: rgba(46, 139, 255, 0.12); animation: lp-orb-drift 15s ease-in-out infinite reverse; } @keyframes lp-orb-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(24px, -24px); } } .lp-hero__grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 70%); } /* Hero trust row */ .lp-hero__trust-row { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 28px; } .lp-hero__trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: rgba(255,255,255,0.85); font-weight: 500; } .lp-hero__trust-item i { color: var(--lp-success); font-size: 0.9375rem; } /* Device stack */ .lp-hero__device-stack { position: relative; width: 100%; max-width: 580px; will-change: transform; /* parallax writes transform every frame while hero is visible */ } .lp-hero__phone { position: absolute; bottom: -5%; right: -2%; width: 130px; z-index: 3; animation: lp-float 5s ease-in-out infinite; animation-delay: 1.5s; } /* Browser frame */ .lp-browser-frame { background: #100322; border-radius: var(--lp-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 32px 64px rgba(0,0,0,0.45); } .lp-browser-frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(0,0,0,0.35); border-bottom: 1px solid rgba(255,255,255,0.06); } .lp-browser-frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); } .lp-browser-frame__bar span:nth-child(1) { background: #FF5F57; } .lp-browser-frame__bar span:nth-child(2) { background: #FFBD2E; } .lp-browser-frame__bar span:nth-child(3) { background: #28CA41; } .lp-browser-frame__url { flex: 1; margin-left: 10px; padding: 4px 12px; background: rgba(255,255,255,0.06); border-radius: 6px; font-size: 0.6875rem; color: rgba(255,255,255,0.45); text-align: center; } .lp-browser-frame img { width: 100%; display: block; } /* Phone frame */ .lp-phone-frame { background: linear-gradient(145deg, #1a0b38, #0c0118); border-radius: 28px; padding: 10px; border: 2px solid rgba(255,255,255,0.12); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .lp-phone-frame--lg { max-width: 280px; margin: 0 auto; border-radius: 36px; padding: 12px; } .lp-phone-frame__notch { width: 80px; height: 6px; background: rgba(255,255,255,0.15); border-radius: 999px; margin: 4px auto 8px; } .lp-phone-frame__screen { background: var(--lp-primary-800); border-radius: 20px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 200px; } .lp-phone-frame__screen img { border-radius: 12px; margin-bottom: 4px; } .lp-phone-frame__screen strong { font-family: var(--lp-font-display); font-size: 0.9375rem; color: #fff; } .lp-phone-frame__screen span { font-size: 0.75rem; color: var(--lp-text-muted); } .lp-phone-frame__screen em { font-style: normal; font-size: 0.6875rem; color: rgba(255,255,255,0.45); margin-top: 4px; } /* Real customer-app screen (replaces the empty grey placeholder bars). */ .lp-phone-frame__screen--app { min-height: 420px; padding: 16px 14px; text-align: left; align-items: stretch; gap: 12px; } /* Real Product Showcase screenshot — fills the frame edge to edge, no inner padding (unlike --app's synthesized mockup, which needs room to lay out). */ .lp-phone-frame__screen--shot { padding: 0; overflow: hidden; } .lp-phone-frame__screen--shot img { width: 100%; height: 100%; display: block; object-fit: cover; } .lp-appui { display: flex; flex-direction: column; gap: 12px; width: 100%; } .lp-appui__head { display: flex; align-items: center; gap: 10px; } .lp-appui__logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,0.08); padding: 3px; } .lp-appui__head strong { display: block; font-family: var(--lp-font-display); font-size: 0.9rem; color: #fff; } .lp-appui__head span { font-size: 0.68rem; color: var(--lp-text-muted); } .lp-appui__balance { background: rgba(46, 139, 255, 0.12); border: 1px solid rgba(46, 139, 255, 0.28); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 3px; } .lp-appui__bal-label { font-family: var(--lp-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-text-muted); } .lp-appui__bal-amt { font-family: var(--lp-font-mono); font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; } .lp-appui__bal-meta { font-family: var(--lp-font-mono); font-size: 0.64rem; color: var(--lp-mono-dim); } .lp-appui__pay { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--lp-action); color: var(--lp-action-text); font-weight: 700; font-size: 0.82rem; } .lp-appui__hist { display: flex; flex-direction: column; gap: 7px; } .lp-appui__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,0.04); font-family: var(--lp-font-mono); font-size: 0.72rem; color: var(--lp-text-muted); } .lp-appui__chip { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; color: var(--lp-online); background: var(--lp-online-soft); } .lp-pricing-transparency { margin-top: 16px; padding: 16px 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); font-size: 0.8125rem; line-height: 1.6; color: var(--lp-text-muted); } .lp-pricing-transparency strong { color: var(--lp-text); } .lp-product--single .lp-product__preview { margin-bottom: 24px; } .lp-btn--shimmer { position: relative; overflow: hidden; } .lp-btn--shimmer::after { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); /* Animate transform, not `left` — `left` invalidates layout every frame, forever. */ transform: translateX(-170%); will-change: transform; animation: lp-shimmer 3s ease-in-out infinite; } @keyframes lp-shimmer { 0% { transform: translateX(-170%); } 50%, 100% { transform: translateX(280%); } } /* Section wave dividers */ .lp-section-wave { position: absolute; bottom: -1px; left: 0; right: 0; height: 64px; background: var(--lp-surface-light); clip-path: ellipse(75% 100% at 50% 100%); } .lp-section-wave--to-light { background: var(--lp-surface-light); } /* Why choose band */ .lp-why-choose { padding: 32px 0; background: var(--lp-surface-light); border-bottom: 1px solid var(--lp-border-light); } .lp-why-choose__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .lp-why-choose__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--lp-surface); border-radius: var(--lp-radius-md); border: 1px solid var(--lp-border-light); transition: transform 0.35s var(--lp-ease), box-shadow 0.35s, border-color 0.35s; } .lp-why-choose__item:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-lg); border-color: rgba(46, 139, 255, 0.25); } .lp-why-choose__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(46,139,255,0.12), rgba(46,139,255,0.1)); border-radius: var(--lp-radius-sm); color: var(--lp-accent); font-size: 1.125rem; } .lp-why-choose__item strong { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--lp-text-dark); margin-bottom: 4px; } .lp-why-choose__item span { font-size: 0.8125rem; color: var(--lp-text-secondary); line-height: 1.5; } /* Split layout */ .lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .lp-split--center { align-items: center; } .lp-split__title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; margin-bottom: 16px; line-height: 1.2; } .lp-split__desc { font-size: 1.0625rem; color: var(--lp-text-muted); margin-bottom: 24px; max-width: 480px; line-height: 1.7; } .lp-check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .lp-check-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--lp-text-muted); } .lp-check-list i { color: var(--lp-success); } /* Stagger reveal children */ .lp-stagger-children .lp-reveal-child { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--lp-ease), transform 0.6s var(--lp-ease); } .lp-stagger-children.is-visible .lp-reveal-child { opacity: 1; transform: translateY(0); } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(1) { transition-delay: 0.05s; } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(2) { transition-delay: 0.1s; } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(3) { transition-delay: 0.15s; } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(4) { transition-delay: 0.2s; } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(5) { transition-delay: 0.25s; } .lp-stagger-children.is-visible .lp-reveal-child:nth-child(6) { transition-delay: 0.3s; } /* Nav link underline */ .lp-nav__links a { position: relative; } .lp-nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--lp-accent); transition: width 0.3s var(--lp-ease); } .lp-nav__links a:hover::after, .lp-nav__links a.is-active::after { width: 100%; } /* Testimonial dots & mobile slide */ .lp-testimonials-dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; } .lp-testimonials-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.25); cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } .lp-testimonials-dots button.is-active { background: var(--lp-accent); transform: scale(1.3); } /* Footer brand link */ .lp-footer__brand-link { margin-bottom: 16px; } .lp-footer__brand-link .lp-brand-logo-img--full { height: 48px; max-width: 260px; } .lp-footer__brand-link .lp-nav__brand-text, .lp-footer__brand-link > span:not(.lp-nav__brand-text) { font-family: var(--lp-font-display); font-size: 1.25rem; font-weight: 800; } /* Pricing scroll snap mobile */ @media (max-width: 768px) { .lp-pricing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .lp-pricing-card { flex: 0 0 85%; scroll-snap-align: center; } .lp-testimonials { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; } .lp-testimonial { flex: 0 0 88%; scroll-snap-align: center; } .lp-testimonials-dots { display: flex; } .lp-split { grid-template-columns: 1fr; } .lp-compare-hint { display: flex; } } @media (min-width: 769px) and (max-width: 1024px) { /* Tablet-only 2-up. Was plain (max-width:1024px), which — being later in the cascade than the phone ".lp-why-choose__grid{1fr}" rule above at equal specificity — silently won on phones too, forcing the "Why Choose" trust band into a cramped 2-column grid on every phone, not just tablets. */ .lp-why-choose__grid { grid-template-columns: repeat(2, 1fr); } } /* Enhanced glass stat cards */ .lp-stat { backdrop-filter: blur(8px); } .lp-stat__value:not([data-count]) { background: linear-gradient(90deg, #fff, var(--lp-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Benefit card top accent */ .lp-benefit { position: relative; overflow: hidden; } .lp-benefit::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lp-accent), var(--lp-cyan)); opacity: 0; transition: opacity 0.3s; } .lp-benefit:hover::before { opacity: 1; } /* Product preview glow */ .lp-product__preview .lp-browser-frame { transition: box-shadow 0.4s var(--lp-ease); } .lp-product__preview:hover .lp-browser-frame { box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 60px rgba(46,139,255,0.08); } /* The featured "glow" lives on the card's box-shadow (see .lp-pricing-card--featured above). A ::before fill is deliberately NOT used: .lp-reveal's transform makes the card a stacking context, so a z-index:-1 pseudo can't go behind the card body and instead floods it azure. Keep position: relative for absolute children. */ .lp-pricing-card--featured { position: relative; } /* Smooth section transitions */ .lp-section { transition: background 0.5s ease; } /* Nav scrolled tighter */ .lp-nav.is-scrolled { height: 64px; } .lp-nav.is-scrolled .lp-brand-logo-img--full { height: 38px; max-width: min(210px, 38vw); } .lp-nav.is-scrolled .lp-brand-logo-img--mark { width: 38px; height: 38px; padding: 4px; } /* ══════════════════════════════════════════ v3.1 — Pricing model tabs + PAYG wallet ══════════════════════════════════════════ */ .lp-pricing-model { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto 48px; } .lp-pricing-model__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 24px; background: rgba(255,255,255,0.04); border: 2px solid var(--lp-border); border-radius: var(--lp-radius-lg); color: var(--lp-text-muted); font-family: var(--lp-font-body); cursor: pointer; /* Explicit property list — `transition: all` silently animates future layout edits. */ transition: border-color 0.35s var(--lp-ease), background 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease); text-align: left; } .lp-pricing-model__btn i { font-size: 1.25rem; color: var(--lp-cyan); margin-bottom: 4px; } .lp-pricing-model__btn span { font-family: var(--lp-font-display); font-size: 1.0625rem; font-weight: 700; color: #fff; } .lp-pricing-model__btn em { font-style: normal; font-size: 0.8125rem; color: var(--lp-text-muted); } .lp-pricing-model__btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); } .lp-pricing-model__btn.is-active { border-color: var(--lp-accent); background: rgba(46,139,255,0.1); box-shadow: 0 8px 32px rgba(46,139,255,0.15); } .lp-pricing-model__btn.is-active i { color: var(--lp-accent); } .lp-pricing-panel { display: none; animation: lp-panel-in 0.45s var(--lp-ease); } .lp-pricing-panel.is-active { display: block; } @keyframes lp-panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .lp-pricing-card__note { font-size: 0.8125rem; color: var(--lp-cyan); margin-bottom: 16px; font-weight: 500; } .lp-pricing-footnote { text-align: center; font-size: 0.9375rem; color: var(--lp-text-muted); margin-top: 24px; } .lp-pricing-footnote a { color: var(--lp-accent); font-weight: 600; text-decoration: none; } .lp-pricing-footnote a:hover { text-decoration: underline; } .lp-pricing-footnote i { margin-right: 6px; color: var(--lp-cyan); } /* PAYG layout — "Vault Card": ambient glow + gradient accents for a premium fintech feel */ .lp-payg { position: relative; } .lp-payg::before { content: ''; position: absolute; inset: -10% -6% auto -6%; height: 480px; z-index: -1; background: radial-gradient(640px 360px at 12% 0%, rgba(46,139,255,.12), transparent 60%), radial-gradient(560px 320px at 88% 8%, rgba(255,255,255,.04), transparent 55%); pointer-events: none; } .lp-payg__steps { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); overflow-x: auto; } .lp-payg__step { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 140px; } .lp-payg__step-num { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--lp-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 2px rgba(46,139,255,.10), 0 3px 8px -2px rgba(46,139,255,.35); color: var(--lp-primary-900); border-radius: 50%; font-size: 0.875rem; font-weight: 800; } .lp-payg__step strong { display: block; font-size: 0.875rem; color: #fff; margin-bottom: 2px; } .lp-payg__step span { font-size: 0.75rem; color: var(--lp-text-muted); line-height: 1.4; } .lp-payg__step-arrow { color: rgba(255,255,255,0.2); flex-shrink: 0; font-size: 0.75rem; } .lp-payg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .lp-payg__config-header h3 { font-family: var(--lp-font-display); font-size: 1.375rem; font-weight: 800; margin-bottom: 8px; } .lp-payg__config-header p { font-size: 0.9375rem; color: var(--lp-text-muted); margin-bottom: 28px; line-height: 1.6; } .lp-payg__field { margin-bottom: 24px; } .lp-payg__field-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .lp-payg__field-top label { font-size: 0.875rem; font-weight: 600; color: var(--lp-text-muted); } .lp-payg__field-top span { font-family: var(--lp-font-display); font-size: 1.125rem; font-weight: 700; color: var(--lp-cyan); display: inline-block; font-variant-numeric: tabular-nums; transition: transform 0.15s var(--lp-ease); } .lp-payg__field-top span.is-updating { transform: scale(1.1); } @media (prefers-reduced-motion: reduce) { .lp-payg__field-top span { transition: none; } .lp-payg__field-top span.is-updating { transform: none; } } .lp-payg__slider-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--lp-text-muted); margin-top: 6px; } .lp-payg__rate-card { padding: 20px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md); margin-bottom: 24px; } .lp-payg__rate-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.875rem; color: var(--lp-text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); } .lp-payg__rate-row:last-child { border-bottom: none; } .lp-payg__rate-row strong { color: #fff; font-weight: 700; } .lp-payg__rate-row strong span { font-size: 0.75rem; font-weight: 500; color: var(--lp-text-muted); } .lp-payg__rate-row--total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--lp-border); border-bottom: none; } .lp-payg__rate-row--total strong { font-family: var(--lp-font-display); font-size: 1.375rem; letter-spacing: -0.01em; color: var(--lp-accent); display: inline-block; font-variant-numeric: tabular-nums; transition: transform var(--lp-duration-fast) var(--lp-ease); } .lp-payg__rate-row--total strong.is-updating { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .lp-payg__rate-row--total strong.is-updating { transform: none; } } .lp-payg__formula { font-size: 0.8125rem; color: var(--lp-text-muted); margin-top: 12px; /* System mono stack — 'IBM Plex Mono' was referenced but never loaded. */ font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace; } /* Breakeven guidance rendered by the PAYG calculator when a fixed plan is cheaper. */ .lp-payg__hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; font-size: 0.8125rem; line-height: 1.5; color: #fff; background: rgba(46, 139, 255, 0.12); border: 1px solid rgba(46, 139, 255, 0.35); border-radius: var(--lp-radius-sm); } .lp-payg__hint i { color: var(--lp-cyan); margin-top: 2px; } .lp-payg__hint strong { color: var(--lp-cyan); } .lp-payg__unit-note { font-size: 0.75rem; color: var(--lp-text-muted); margin-top: 10px; line-height: 1.5; } .lp-payg__unit-note strong { color: rgba(255, 255, 255, 0.9); } .lp-payg__addons-label { font-size: 0.8125rem; font-weight: 600; color: var(--lp-text-muted); margin-bottom: 12px; } .lp-custom-pricing__addon span { margin-left: auto; font-size: 0.8125rem; color: var(--lp-cyan); } /* Months-to-cover picker — segmented control at the top of the configurator. */ .lp-payg__topup { margin-bottom: 26px; } .lp-payg__topup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .lp-payg__topup-head label { font-size: 0.9375rem; font-weight: 700; color: var(--lp-text-dark); } .lp-payg__topup-hint { font-size: 0.75rem; color: var(--lp-text-muted); } .lp-payg__topup-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 5px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border); border-radius: 14px; } .lp-payg__topup-opt { appearance: none; border: 1px solid transparent; background: transparent; color: var(--lp-text-secondary); font-family: var(--lp-font-mono); font-weight: 700; font-size: 1rem; line-height: 1; padding: 13px 4px; border-radius: 10px; cursor: pointer; transition: background 0.2s var(--lp-ease), color 0.2s, border-color 0.2s, box-shadow 0.2s; } .lp-payg__topup-opt span { font-size: 0.7rem; font-weight: 600; opacity: 0.7; margin-left: 2px; } .lp-payg__topup-opt:hover { color: var(--lp-text); background: rgba(255, 255, 255, 0.05); } .lp-payg__topup-opt.is-active { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; box-shadow: 0 6px 16px rgba(46, 139, 255, 0.3); } .lp-payg__topup-opt.is-active span { opacity: 0.85; } .lp-payg__topup-opt:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 2px; } @media (max-width: 420px) { .lp-payg__topup-opt { font-size: 0.9rem; padding: 11px 2px; } } /* Accessible visually-hidden (keeps the backing