/* Clean shared layout for SEO landing pages. Page-specific image variables are set on . */ :root { --seo-bg: #fafafa; --seo-panel: #ffffff; --seo-ink: #09090b; --seo-muted: #52525b; --seo-border: #e4e4e7; --seo-accent: #9d59e1; --seo-hero-image: url("https://images.unsplash.com/photo-1670529776180-60e4132ab90c?auto=format&fit=crop&w=1800&q=85"); --seo-section-image-a: url("https://images.pexels.com/photos/169193/pexels-photo-169193.jpeg?auto=compress&cs=tinysrgb&w=1200"); --seo-section-image-b: url("https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1200&q=85"); } * { box-sizing: border-box; } body { background: var(--seo-bg) !important; color: var(--seo-ink) !important; } main { overflow: hidden; } .container { width: 100%; max-width: 1200px !important; margin: 0 auto !important; padding-left: clamp(18px, 4vw, 60px) !important; padding-right: clamp(18px, 4vw, 60px) !important; } .hero { position: relative !important; min-height: clamp(520px, 68vw, 700px); display: flex; align-items: flex-end; overflow: hidden; padding: 124px 0 72px !important; background: linear-gradient(to bottom, rgba(9, 9, 11, 0.28), rgba(9, 9, 11, 0.86)), var(--seo-hero-image) center / cover no-repeat !important; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 480px at 10% 18%, rgba(157, 89, 225, 0.18), transparent 62%), linear-gradient(90deg, rgba(9, 9, 11, 0.72), rgba(9, 9, 11, 0.42) 52%, rgba(9, 9, 11, 0.2)); pointer-events: none; z-index: 0; } .hero::after { display: none !important; } .hero .container { position: relative; z-index: 1; max-width: 1200px !important; } .hero h1 { max-width: 850px; margin: 0 0 20px !important; color: #ffffff !important; font-size: clamp(2.35rem, 5vw, 4.35rem) !important; font-weight: 700 !important; letter-spacing: -0.045em !important; line-height: 1.05 !important; text-wrap: balance; } .hero .lead { max-width: 680px !important; margin: 0 !important; color: rgba(255, 255, 255, 0.78) !important; font-size: clamp(1rem, 1.35vw, 1.13rem) !important; line-height: 1.75 !important; } .hero .cta, .cta { display: flex !important; flex-wrap: wrap; gap: 14px !important; margin-top: 30px !important; } .hero .btn, .hero .btn-primary, .hero .btn-ghost { display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px; padding: 13px 28px !important; border-radius: 999px !important; line-height: 1 !important; } .hero .btn-primary { background: var(--seo-accent) !important; color: #ffffff !important; border: 1px solid rgba(157, 89, 225, 0.25) !important; } .hero .btn-ghost { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.26) !important; } .section { padding: clamp(52px, 7vw, 78px) 0 !important; background: var(--seo-panel) !important; border-top: 1px solid var(--seo-border); } .section:nth-of-type(odd) { background: var(--seo-bg) !important; } .section > .container { max-width: 1200px !important; } .section h2 { color: var(--seo-ink) !important; font-size: clamp(1.65rem, 3vw, 2.45rem) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.2 !important; margin: 0 0 18px !important; } .section p, .section li, td { color: var(--seo-muted) !important; font-size: 1.01rem; line-height: 1.78 !important; } .toc { max-width: 920px; margin: 0 !important; padding: 22px 0 0 !important; border: 0 !important; border-top: 1px solid var(--seo-border) !important; border-radius: 0 !important; background: transparent !important; } .toc h2 { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--seo-accent) !important; margin-bottom: 14px !important; } .toc a { display: inline-flex !important; margin: 0 18px 10px 0; padding: 0 !important; border: 0 !important; color: var(--seo-muted) !important; background: transparent !important; font-size: 0.95rem; font-weight: 600 !important; } .toc a:hover { color: var(--seo-accent) !important; } .section > .container > .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: clamp(30px, 5vw, 72px); align-items: center; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .section > .container > .card::after { content: ""; display: block; min-height: clamp(260px, 30vw, 390px); border-radius: 20px; background: linear-gradient(to bottom, rgba(9, 9, 11, 0.03), rgba(9, 9, 11, 0.22)), var(--seo-section-image-a) center / cover no-repeat; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .section:nth-of-type(odd) > .container > .card::after { order: -1; } .card h2, .card h3 { color: var(--seo-ink) !important; } .card h3 { font-size: 1.12rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 0 0 10px !important; } .card p { margin: 0 0 16px !important; } .card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0 !important; } .grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } .section:nth-of-type(2) > .container.grid::before { content: ""; grid-column: 1 / -1; display: block; min-height: clamp(250px, 30vw, 380px); margin-bottom: 10px; border-radius: 20px; background: linear-gradient(to bottom, rgba(9, 9, 11, 0.03), rgba(9, 9, 11, 0.2)), var(--seo-section-image-b) center / cover no-repeat; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .grid .card { min-height: 0 !important; padding: 30px 26px !important; border: 1px solid var(--seo-border) !important; border-radius: 16px !important; background: var(--seo-panel) !important; box-shadow: none !important; } .comparison { overflow-x: auto; border: 1px solid var(--seo-border) !important; border-radius: 16px !important; background: var(--seo-panel) !important; box-shadow: none !important; } table { width: 100%; border-collapse: collapse; } th, td { padding: 18px 20px !important; border-bottom: 1px solid var(--seo-border) !important; vertical-align: top; } th { background: #f4f4f5 !important; color: var(--seo-ink) !important; font-size: 0.9rem !important; } .links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .links a { padding: 16px 18px !important; border: 1px solid var(--seo-border) !important; border-radius: 12px !important; background: var(--seo-panel) !important; color: var(--seo-ink) !important; font-weight: 600 !important; } .links a:hover { background: rgba(157, 89, 225, 0.05) !important; border-color: rgba(157, 89, 225, 0.26) !important; color: var(--seo-accent) !important; } footer { background: #09090b !important; color: rgba(255, 255, 255, 0.45) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } @media (max-width: 960px) { .hero { min-height: 560px; padding: 112px 0 58px !important; } .section > .container > .card { grid-template-columns: 1fr; gap: 28px; } .section > .container > .card::after, .section:nth-of-type(odd) > .container > .card::after { order: 0; } .grid, .links { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .hero { min-height: 520px; padding: 98px 0 46px !important; } .section { padding: 46px 0 !important; } .grid .card { padding: 24px 20px !important; } th, td { padding: 14px 16px !important; } }