:root {
  --webp-dark: #070b14;
  --webp-dark-2: #0b1120;
  --webp-surface: #111827;
  --webp-light: #f7f9fc;
  --webp-soft: #eef3f9;
  --webp-white: #ffffff;
  --webp-ink: #0f172a;
  --webp-muted: #64748b;
  --webp-muted-dark: #9aa7ba;
  --webp-line: #dde5ef;
  --webp-line-dark: rgba(255,255,255,.1);
  --webp-primary: #7dd3fc;
  --webp-primary-2: #5eead4;
  --webp-blue: #60a5fa;
  --webp-max: 1180px;
}

.webp-page { font-family: "Quicksand", sans-serif; background: var(--webp-light); color: var(--webp-ink); overflow: hidden; }
.webp-page *, .webp-page *::before, .webp-page *::after { box-sizing: border-box; }
.webp-container { width: min(calc(100% - 48px), var(--webp-max)); margin: 0 auto; }
.webp-section { padding: 112px 0; }
.webp-light { background: var(--webp-light); }
.webp-soft { background: var(--webp-soft); }
.webp-dark { background: var(--webp-dark); color: #f8fafc; }

.webp-hero { position: relative; min-height: 790px; display: flex; align-items: center; background: var(--webp-dark); color: #f8fafc; isolation: isolate; }
.webp-grid-bg { position:absolute; inset:0; z-index:-3; opacity:.14; background-image: linear-gradient(rgba(148,163,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.7) 62%,transparent 100%); }
.webp-glow { position:absolute; border-radius:999px; filter:blur(80px); z-index:-2; opacity:.18; }
.webp-glow-one { width:420px;height:420px;background:#38bdf8;left:-180px;top:100px; }
.webp-glow-two { width:460px;height:460px;background:#2dd4bf;right:-200px;bottom:0; }
.webp-hero-layout { display:grid; grid-template-columns:.88fr 1.12fr; gap:62px; align-items:center; padding-top:70px; padding-bottom:70px; }
.webp-breadcrumb { display:flex; align-items:center; gap:8px; color:#64748b; font-size:.82rem; margin-bottom:28px; }
.webp-breadcrumb a { color:#7f8ca1; text-decoration:none; }
.webp-breadcrumb svg { width:14px;height:14px; }
.webp-eyebrow,.webp-kicker { display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.75rem; color:#2563eb; }
.webp-eyebrow { color:#9ec5ff; text-transform:none; letter-spacing:.02em; font-size:.88rem; margin-bottom:22px; }
.webp-eyebrow svg { color:var(--webp-primary-2); width:18px;height:18px; }
.webp-hero h1 { margin:0; max-width:660px; font-size:clamp(3.25rem,5.3vw,5.35rem); line-height:.94; letter-spacing:-.055em; font-weight:700; }
.webp-lead { max-width:650px; margin:28px 0 0; color:#aab5c8; line-height:1.82; font-size:1.12rem; font-weight:500; }
.webp-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.webp-btn { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:12px; padding:0 20px; font-weight:700; text-decoration:none; transition:.22s ease; border:1px solid transparent; }
.webp-btn svg { width:18px;height:18px; }
.webp-btn-primary { color:#07111b; background:linear-gradient(135deg,#9bd9ff,#67e8d4); box-shadow:0 14px 36px rgba(56,189,248,.14); }
.webp-btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(56,189,248,.22); }
.webp-btn-secondary { color:#e5edf8; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.035); }
.webp-btn-secondary:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); }
.webp-microproof { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; color:#74849a; font-size:.78rem; }
.webp-microproof span { display:flex;align-items:center;gap:6px; }
.webp-microproof svg { width:15px;height:15px;color:#5eead4; }

.webp-hero-showcase { position:relative; min-width:0; padding:24px 0 38px; }
.webp-browser { overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.12); box-shadow:0 34px 90px rgba(0,0,0,.34); background:#fff; }
.webp-browser-main { transform:perspective(1400px) rotateY(-2deg); }
.webp-browser-bar { height:39px; background:#111827; display:flex; align-items:center; gap:6px; padding:0 13px; color:#77859b; font-size:.7rem; }
.webp-browser-bar > span { width:7px;height:7px;border-radius:50%;background:#475569;flex:0 0 auto; }
.webp-browser-bar > div { margin-left:8px; border:1px solid rgba(255,255,255,.06); background:#0b1220; border-radius:6px; padding:5px 12px; width:55%; overflow:hidden; white-space:nowrap; }
.webp-browser img { width:100%; height:auto; display:block; object-fit:contain; object-position:top center; }
.webp-floating-card { position:absolute; display:flex; gap:11px; align-items:center; padding:12px 15px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(15,23,42,.92); backdrop-filter:blur(16px); box-shadow:0 18px 38px rgba(0,0,0,.25); }
.webp-floating-card svg { width:22px;height:22px;color:#8ec5ff; }
.webp-floating-card strong,.webp-floating-card span { display:block; }
.webp-floating-card strong { font-size:.82rem; color:#eef5ff; }
.webp-floating-card span { margin-top:2px; font-size:.67rem;color:#76859b; }
.webp-float-stock { left:-28px; bottom:0; }
.webp-float-mobile { right:-18px; top:3px; }

.webp-strip { background:#0a101c; color:#7f8ca0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.webp-strip-inner { min-height:82px; display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;font-size:.88rem; }
.webp-strip-inner svg { width:14px;height:14px;color:#415069; }
.webp-strip-inner strong { color:#dce7f5; }

.webp-section-heading { max-width:790px; margin-bottom:50px; }
.webp-heading-center { text-align:center; margin-left:auto; margin-right:auto; }
.webp-kicker { margin-bottom:15px; }
.webp-kicker-dark { color:#80b9ff; }
.webp-section-heading h2,.webp-copy h2,.webp-compare-copy h2,.webp-seo-copy h2,.webp-faq-intro h2,.webp-final h2 { margin:0; font-size:clamp(2.15rem,3.5vw,3.65rem); line-height:1.04; letter-spacing:-.04em; }
.webp-section-heading p,.webp-copy > p,.webp-compare-copy > p,.webp-seo-copy > p,.webp-faq-intro > p,.webp-final p { margin:20px 0 0; font-size:1.04rem; line-height:1.8; color:var(--webp-muted); }
.webp-dark .webp-copy > p,.webp-dark .webp-seo-copy > p { color:var(--webp-muted-dark); }

.webp-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:14px; align-items:center; }
.webp-flow-card { position:relative; min-height:260px; padding:28px; border:1px solid var(--webp-line); border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(15,23,42,.035); }
.webp-flow-num { position:absolute;top:22px;right:22px;color:#cbd5e1;font-size:.78rem;font-weight:700;letter-spacing:.12em; }
.webp-flow-card > svg { width:28px;height:28px;color:#2563eb;margin-bottom:42px; }
.webp-flow-card h3 { margin:0;font-size:1.18rem;letter-spacing:-.02em; }
.webp-flow-card p { margin:12px 0 0;color:var(--webp-muted);line-height:1.7;font-size:.9rem; }
.webp-flow-arrow { color:#94a3b8; }
.webp-flow-arrow svg { width:20px;height:20px; }

.webp-product-section { position:relative; }
.webp-split { display:grid;grid-template-columns:.86fr 1.14fr;gap:76px;align-items:center; }
.webp-checks { margin-top:30px; display:grid; gap:17px; }
.webp-checks > div { display:flex;gap:11px;color:#a8b4c7;line-height:1.6;font-size:.91rem; }
.webp-checks svg { width:19px;height:19px;color:#5eead4;flex:0 0 auto;margin-top:2px; }
.webp-checks strong { color:#eef4fc; }
.webp-showcase-stack { position:relative; padding:20px 0 28px; }
.webp-browser-secondary { border-color:rgba(255,255,255,.09); }
.webp-design-switch { position:absolute;right:-18px;bottom:0;display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.11);background:#111827;box-shadow:0 20px 40px rgba(0,0,0,.24); }
.webp-design-switch svg { color:#8ec5ff;width:22px;height:22px; }
.webp-design-switch strong,.webp-design-switch span { display:block; }
.webp-design-switch strong { font-size:.83rem; }
.webp-design-switch span { margin-top:2px;font-size:.67rem;color:#7f8ca0; }

.webp-feature-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.webp-feature { min-height:245px;padding:27px;border:1px solid var(--webp-line);border-radius:18px;background:#fff;transition:.22s ease; }
.webp-feature:hover { transform:translateY(-4px);box-shadow:0 20px 42px rgba(15,23,42,.07);border-color:#c9d7e8; }
.webp-icon { width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#eff6ff;border:1px solid #dbeafe;color:#2563eb;margin-bottom:34px; }
.webp-icon svg { width:22px;height:22px; }
.webp-feature h3 { margin:0;font-size:1.1rem;letter-spacing:-.02em; }
.webp-feature p { margin:11px 0 0;color:var(--webp-muted);font-size:.87rem;line-height:1.7; }

.webp-compare-grid { display:grid;grid-template-columns:.76fr 1.24fr;gap:64px;align-items:center; }
.webp-text-link { display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:#1d4ed8;font-weight:700;text-decoration:none;font-size:.9rem; }
.webp-text-link svg { width:17px;height:17px;transition:.2s; }
.webp-text-link:hover svg { transform:translateX(3px); }
.webp-compare-table { border:1px solid #d9e2ee;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 18px 45px rgba(15,23,42,.05); }
.webp-compare-row { display:grid;grid-template-columns:1.2fr .8fr .8fr;align-items:center;gap:12px;min-height:66px;padding:0 24px;border-bottom:1px solid #e8edf4;color:#64748b;font-size:.86rem; }
.webp-compare-row:last-child { border-bottom:0; }
.webp-compare-row > span:first-child { color:#1e293b;font-weight:650; }
.webp-compare-head { background:#f8fafc;min-height:58px; }
.webp-compare-head strong:last-child { color:#1d4ed8; }
.webp-positive { display:flex;align-items:center;gap:6px;color:#08775d;font-weight:700; }
.webp-positive svg { width:15px;height:15px; }
.webp-negative { color:#94a3b8; }

.webp-seo-section { position:relative; }
.webp-seo-layout { display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:center; }
.webp-note { display:flex;gap:10px;padding:15px 17px;margin-top:24px!important;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);font-size:.8rem!important;color:#8190a6!important; }
.webp-note svg { width:18px;height:18px;flex:0 0 auto;color:#7dd3fc; }
.webp-seo-cards { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.webp-seo-cards > div { min-height:180px;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025); }
.webp-seo-cards svg { width:25px;height:25px;color:#7eb7ff;margin-bottom:28px; }
.webp-seo-cards strong,.webp-seo-cards span { display:block; }
.webp-seo-cards strong { font-size:1rem; }
.webp-seo-cards span { margin-top:8px;color:#8290a5;font-size:.82rem;line-height:1.6; }

.webp-audience { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.webp-audience article { padding:28px;border-radius:18px;background:#fff;border:1px solid var(--webp-line); }
.webp-audience svg { width:25px;height:25px;color:#2563eb;margin-bottom:32px; }
.webp-audience h3 { margin:0;font-size:1.02rem; }
.webp-audience p { margin:10px 0 0;color:var(--webp-muted);font-size:.84rem;line-height:1.65; }

.webp-faq-section { background:#fff;padding:112px 0; }
.webp-faq-layout { display:grid;grid-template-columns:.72fr 1.28fr;gap:76px;align-items:start; }
.webp-faq-list { border-top:1px solid #dce4ee; }
.webp-faq-list details { border-bottom:1px solid #dce4ee; }
.webp-faq-list summary { min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-weight:700;color:#142033;font-size:.98rem; }
.webp-faq-list summary::-webkit-details-marker { display:none; }
.webp-faq-list summary svg { width:18px;height:18px;color:#64748b;flex:0 0 auto;transition:.2s; }
.webp-faq-list details[open] summary svg { transform:rotate(45deg); }
.webp-faq-list details p { padding:0 36px 24px 0;margin:0;color:#64748b;line-height:1.75;font-size:.9rem; }

.webp-final { background:#070b14;padding:0 0 110px;color:#f8fafc; }
.webp-final-box { border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:56px 60px;background:linear-gradient(135deg,rgba(59,130,246,.09),rgba(45,212,191,.045));display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center; }
.webp-final h2 { max-width:740px;font-size:clamp(2rem,3.2vw,3.2rem); }
.webp-final p { color:#8d9aaf;max-width:720px; }
.webp-final-actions { display:flex;flex-direction:column;gap:10px;min-width:190px; }

.reveal { opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1;transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1;transform:none;transition:none; }
  .webp-btn,.webp-feature,.webp-text-link svg { transition:none; }
}

@media (max-width: 1080px) {
  .webp-hero-layout,.webp-split,.webp-seo-layout { gap:42px; }
  .webp-hero-layout { grid-template-columns:1fr 1fr; }
  .webp-feature-grid,.webp-audience { grid-template-columns:repeat(2,1fr); }
  .webp-flow { grid-template-columns:1fr 1fr; }
  .webp-flow-arrow { display:none; }
}

@media (max-width: 820px) {
  .webp-container { width:min(calc(100% - 32px),var(--webp-max)); }
  .webp-section,.webp-faq-section { padding:82px 0; }
  .webp-hero { min-height:auto; }
  .webp-hero-layout { grid-template-columns:1fr;padding-top:74px;padding-bottom:85px;gap:56px; }
  .webp-hero h1 { font-size:clamp(3rem,11vw,4.7rem);max-width:700px; }
  .webp-hero-showcase { width:94%;margin:0 auto; }
  .webp-split,.webp-compare-grid,.webp-seo-layout,.webp-faq-layout { grid-template-columns:1fr;gap:48px; }
  .webp-product-section .webp-copy { max-width:680px; }
  .webp-flow { grid-template-columns:1fr 1fr; }
  .webp-final-box { grid-template-columns:1fr;padding:46px 38px; }
  .webp-final-actions { flex-direction:row;min-width:0;flex-wrap:wrap; }
}

@media (max-width: 580px) {
  .webp-container { width:min(calc(100% - 24px),var(--webp-max)); }
  .webp-section,.webp-faq-section { padding:68px 0; }
  .webp-hero-layout { padding-top:54px;padding-bottom:70px; }
  .webp-hero h1 { font-size:clamp(2.65rem,14vw,4rem);line-height:.96; }
  .webp-lead { font-size:1rem;line-height:1.72; }
  .webp-actions { flex-direction:column; }
  .webp-btn { width:100%; }
  .webp-microproof { gap:10px 15px; }
  .webp-hero-showcase { width:100%;padding-bottom:58px; }
  .webp-browser-main { transform:none; }
  .webp-browser { border-radius:13px; }
  .webp-browser-bar { height:31px;padding:0 9px; }
  .webp-float-stock { left:8px;bottom:5px; }
  .webp-float-mobile { right:8px;top:-24px; }
  .webp-strip-inner { padding:17px 0;gap:8px;font-size:.76rem; }
  .webp-strip-inner svg { width:11px;height:11px; }
  .webp-section-heading { margin-bottom:36px; }
  .webp-section-heading h2,.webp-copy h2,.webp-compare-copy h2,.webp-seo-copy h2,.webp-faq-intro h2,.webp-final h2 { font-size:clamp(2rem,10vw,2.85rem); }
  .webp-flow,.webp-feature-grid,.webp-seo-cards,.webp-audience { grid-template-columns:1fr; }
  .webp-flow-card { min-height:220px; }
  .webp-flow-card > svg { margin-bottom:32px; }
  .webp-design-switch { position:relative;right:auto;bottom:auto;margin-top:12px; }
  .webp-compare-table { overflow-x:auto; }
  .webp-compare-row { min-width:620px; }
  .webp-final { padding-bottom:72px; }
  .webp-final-box { padding:36px 25px; }
  .webp-final-actions { flex-direction:column; }
}