/* ── Design Tokens ── */ :root { --bg: #171b1a; --surface: #1e2423; --surface-2: #27353d; --brand: #ff922e; --brand-hover: #ff4c24; --brand-tert: rgba(255,146,46,0.15); --white: #ffffff; --text-body: rgba(255,255,255,0.65); --text-muted: rgba(255,255,255,0.35); --border-subtle: rgba(255,255,255,0.06); --border-med: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.20); --success: #a4f76b; --on-brand: #000000; --brand-glow: rgba(255,146,46,0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill:100px; --max-w: 1200px; --sec-pad: 120px; --sec-pad-mob: 64px; --gutter: 24px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--white); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } /* ── Grain noise overlay (perf-safe; no mix-blend-mode) ── */ .noise { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' fill='white' opacity='0.6'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.05; pointer-events: none; z-index: 9998; } .skip-link { position: absolute; top: -100%; left: 16px; background: var(--brand); color: var(--on-brand); padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 700; z-index: 200; } .skip-link:focus { top: 16px; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* ── Font — loaded via Google Fonts CDN in each page's ── */ /* ── Typography ── */ .display { font-size: clamp(56px, 8vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.0; } h1, .h1 { font-size: clamp(48px, 6vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } h2, .h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } h3, .h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .body-lg { font-size: 18px; font-weight: 400; color: var(--text-body); line-height: 1.65; } .body { font-size: 16px; font-weight: 400; color: var(--text-body); line-height: 1.65; } .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .muted { color: var(--text-muted); } /* ── Layout ── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: var(--sec-pad); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-hover); box-shadow: 0 4px 24px rgba(255,146,46,0.35); } .btn-ghost { border: 1px solid var(--border-strong); color: var(--white); } .btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); } /* ── Store Badges ── */ .store-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); font-size: 14px; font-weight: 600; transition: border-color 0.2s; } .store-badge:hover { border-color: rgba(255,255,255,0.5); } .store-badge svg { flex-shrink: 0; } /* ── Cards ── */ .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px; } /* ── Scroll Reveal ── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── Nav ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: background-color 0.2s ease, padding 0.2s ease; } .nav.scrolled { background: rgba(23,27,26,0.95); padding: 14px 0; border-bottom: 1px solid var(--border-subtle); } @supports (backdrop-filter: blur(8px)) { .nav.scrolled { background: rgba(23,27,26,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; } .nav-logo img { display: block; height: 44px; width: auto; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--text-body); transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--white); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .nav-mobile-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 101; flex-direction: column; align-items: center; justify-content: center; gap: 40px; } .nav-mobile-overlay.open { display: flex; } .nav-mobile-overlay a { font-size: 28px; font-weight: 700; } /* ── Hero ── */ .hero-ambient { position: absolute; right: -200px; bottom: -200px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(255,146,46,0.10) 0%, rgba(255,146,46,0.03) 45%, transparent 65%); pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } .hero-display { font-size: clamp(64px, 12vw, 160px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.88; color: var(--white); } .hero-body { position: relative; } /* ── Checklist ── */ .check-list { display: flex; flex-direction: column; gap: 12px; } .check-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-body); } .check-list li .check-icon { color: var(--brand); flex-shrink: 0; } .check-list li .x-icon { color: var(--text-muted); flex-shrink: 0; } /* ── FAQ Accordion ── */ .faq-item { border-bottom: 1px solid var(--border-subtle); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 17px; font-weight: 600; color: var(--white); text-align: left; gap: 16px; } .faq-question .faq-icon { transition: transform 0.3s; flex-shrink: 0; color: var(--text-muted); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-item.open .faq-answer { max-height: 2000px; } .faq-answer p { padding-bottom: 24px; color: var(--text-body); font-size: 16px; line-height: 1.7; } /* ── Comparison Table ── */ .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border-subtle); } .compare-table th { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .compare-table td:first-child { color: var(--text-body); } .compare-table td:not(:first-child) { text-align: center; } .compare-table .check { color: var(--brand); } .compare-table .dash { color: var(--text-muted); } /* ── Proof bar ── */ .proof-bar { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 18px 0; } .proof-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text-muted); } .proof-stars { color: var(--brand); } .proof-dot { opacity: 0.3; } /* ── Visual Showcase ── */ .showcase { padding-block: var(--sec-pad); position: relative; overflow: hidden; } .showcase-header { margin-bottom: 24px; display: flex; align-items: center; gap: 16px; } .showcase-header::before { content: ''; display: block; width: 24px; height: 1.5px; background: var(--brand); } .showcase-label-text { color: var(--text-muted); } .showcase-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--white); } .showcase-strip { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--gutter) 24px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: center; } .showcase-strip::-webkit-scrollbar { display: none; } .showcase-frame { flex-shrink: 0; width: 200px; aspect-ratio: 9/16; background: var(--surface-2); border-radius: 20px; overflow: hidden; border: 1px solid var(--border-subtle); transition: transform 0.3s, box-shadow 0.3s; } .showcase-frame:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .showcase-frame--wide { width: 300px; } .showcase-frame img { width: 100%; height: 100%; object-fit: cover; } .showcase-edge { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2; } .showcase-edge--left { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .showcase-edge--right { right: 0; background: linear-gradient(to left, var(--bg), transparent); } /* ── Features ── */ .section-header { margin-bottom: 72px; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .feature-card { display: flex; flex-direction: column; gap: 14px; padding: 40px 40px 40px 0; border-top: 1px solid var(--border-subtle); position: relative; overflow: hidden; } .feature-card:nth-child(3n+2), .feature-card:nth-child(3n+3) { padding-left: 40px; border-left: 1px solid var(--border-subtle); } .feature-num { position: absolute; top: 16px; right: -4px; font-size: clamp(64px, 8vw, 96px); font-weight: 900; color: rgba(255,255,255,0.03); letter-spacing: -0.05em; line-height: 1; user-select: none; pointer-events: none; } .feature-icon { color: var(--brand); } .feature-card h3 { font-size: 20px; } .feature-card .body { font-size: 15px; } /* ── Line length control for body text ── */ .split-col .body, .compare-panel .body, .feature-card .body { max-width: 42ch; } /* ── Audience Split ── */ .split-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 80px; align-items: start; } .split-divider { background: var(--border-subtle); align-self: stretch; } .split-col .check-list li { font-size: 15px; } .split-col .check-list .check-icon { color: var(--brand); font-style: normal; font-size: 10px; } /* ── Price Comparison ── */ .compare-panels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; } .compare-panel { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 48px; } .compare-app-list { display: flex; flex-direction: column; gap: 18px; } .compare-app-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-body); } .compare-app-list li span:last-child { margin-left: auto; } .compare-app-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); flex-shrink: 0; } .compare-price { color: var(--text-muted); font-size: 14px; } .compare-total { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-subtle); } .compare-total-price { font-size: 26px; font-weight: 700; } .compare-total--bad .compare-total-price { color: var(--text-muted); } .compare-badge { background: var(--brand); color: var(--on-brand); border-radius: 50%; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .compare-badge strong { font-size: 15px; display: block; } /* ── Testimonials ── */ .testimonials-header { margin-bottom: 72px; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .testimonial-card { padding: 48px 40px 48px 0; border-top: 1px solid var(--border-subtle); transition: border-color 0.2s; } .testimonial-card:hover { border-color: var(--brand); } .testimonial-card:not(:nth-child(3n+1)) { padding-left: 40px; border-left: 1px solid var(--border-subtle); } .testimonial-card:nth-child(n+4) { border-top: 1px solid var(--border-subtle); } .testimonial-quote { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--white); font-style: italic; margin-bottom: 28px; } .testimonial-meta { display: flex; align-items: center; gap: 12px; } .testimonial-stars { color: var(--brand); font-size: 13px; } .testimonial-name { font-size: 13px; } /* ── Pricing ── */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin-inline: auto; } .pricing-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 48px; } .pricing-card--featured { border: 1.5px solid var(--brand); box-shadow: 0 0 48px var(--brand-glow), 0 0 0 1px rgba(255,146,46,0.05); } .pricing-price { font-size: 44px; font-weight: 800; margin-top: 8px; letter-spacing: -0.03em; } .pricing-price .label { font-size: 14px; font-weight: 400; color: var(--text-muted); } .best-value-badge { background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .check-list .check-icon { color: var(--brand); font-size: 14px; } /* ── Blog Preview ── */ .blog-preview-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .blog-card { display: flex; flex-direction: column; } .blog-card-img { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; background: var(--surface-2); } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .blog-card:hover .blog-card-img img { transform: scale(1.04); } .blog-card-body { flex: 1; } /* ── CTA Banner ── */ .cta-banner { background: var(--brand); padding-block: var(--sec-pad); position: relative; overflow: hidden; } .cta-banner-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,0.12) 0%, transparent 65%); pointer-events: none; } .store-badge--dark { border-color: rgba(0,0,0,0.2); color: var(--on-brand); } .store-badge--dark:hover { border-color: rgba(0,0,0,0.5); } /* ── Footer ── */ .footer { border-top: 1px solid var(--border-subtle); padding-top: 72px; padding-bottom: 0; } .footer-main { display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start; padding-bottom: 72px; } .footer-logo-link { display: inline-block; } .footer-logo-link img { display: block; } .footer-tagline { font-size: 15px; font-weight: 700; color: var(--white); margin-top: 16px; margin-bottom: 10px; } .footer-desc { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.65; margin-bottom: 20px; } .footer-badges { display: flex; gap: 10px; flex-wrap: wrap; } .footer-store-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-med); font-size: 12px; font-weight: 600; color: var(--white); transition: border-color 0.2s; } .footer-store-badge:hover { border-color: rgba(255,255,255,0.4); } .footer-rating { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 12px; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s; line-height: 1.4; } .footer-col ul a:hover { color: rgba(255,255,255,0.7); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.4); } /* ── Responsive ── */ @media (max-width: 1200px) { :root { --max-w: 960px; } } @media (max-width: 768px) { section { padding-block: var(--sec-pad-mob); } .nav-links, .nav .btn { display: none; } .nav-hamburger { display: flex; } .features-grid { grid-template-columns: 1fr; } .feature-card { padding: 32px 0; border-left: none !important; padding-left: 0 !important; } .split-grid { grid-template-columns: 1fr; gap: 48px; } .split-divider { display: none; } .compare-panels { grid-template-columns: 1fr; } .compare-badge { margin-inline: auto; } .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 36px 0; border-left: none !important; padding-left: 0 !important; } .pricing-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr; gap: 48px; } .footer-cols { grid-template-columns: 1fr; gap: 36px; } .footer-badges { flex-direction: row; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } .blog-preview-header { flex-direction: column; align-items: flex-start; gap: 12px; } .showcase-edge { display: none; } } @media (min-width: 769px) and (max-width: 1100px) { .footer-main { grid-template-columns: 1fr; gap: 48px; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 40px; } } @media (min-width: 769px) and (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } .feature-card:nth-child(3n+2), .feature-card:nth-child(3n+3) { padding-left: 0; border-left: none; } .feature-card:nth-child(2n) { padding-left: 40px; border-left: 1px solid var(--border-subtle); } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn, .nav, .faq-answer, .showcase-frame { transition: none; } } /* ── Performance: skip off-screen rendering ── */ .feature-block, .use-cases-section, .workflow-section, .content-system-section, .faq-list, .testimonials, .audience-split, .price-compare, .pricing-teaser, .blog-preview, .cta-banner, .showcase, .problem-section, .comparison-section, .vs-table-section, .wedge-section, .switch-section { content-visibility: auto; contain-intrinsic-size: 1px 800px; } /* Hint compositor on heavy elements */ .hero-ambient, .noise { will-change: transform; transform: translateZ(0); }