.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 68px; background: rgba(7,7,26,0.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(124,58,237,0.14); } .lp-nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; } .lp-logo-box { width: 38px; height: 38px; background: var(--grad); border-radius: 10px; display: flex; align-items:center; justify-content:center; font-weight: 800; font-size: 17px; color:#fff; box-shadow: 0 4px 20px rgba(124,58,237,0.45); } .lp-nav-name { font-size:17px; font-weight:700; color:var(--text); } .lp-nav-links { display:flex; gap:32px; align-items:center; } .lp-nav-links a { color:var(--text-muted); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s; } .lp-nav-links a:hover { color:var(--text); } .lp-nav-actions { display:flex; gap:10px; align-items:center; } .lp-hero { min-height: 100vh; display: flex; flex-direction:column; align-items:center; justify-content:center; text-align: center; padding: 120px 24px 80px; position: relative; overflow:hidden; } .lp-hero-bg { position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.22) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(79,70,229,0.12) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(6,182,212,0.08) 0%, transparent 60%); } .lp-hero-grid { position:absolute; inset:0; z-index:0; background-image: linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 100%); } .lp-hero-inner { position:relative; z-index:1; max-width:820px; } .lp-badge { display: inline-flex; align-items:center; gap:8px; background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3); border-radius: 30px; padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--primary-light); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 28px; } .lp-badge-dot { width:6px; height:6px; border-radius:50%; background: var(--primary-light); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.7); } } .lp-hero h1 { font-size: clamp(36px,6vw,72px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 20px; } .lp-hero p { font-size: clamp(15px,2vw,18px); color: var(--text-muted); max-width: 600px; margin: 0 auto 36px; line-height: 1.7; } .lp-hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .lp-stats { display: flex; justify-content:center; flex-wrap:wrap; gap:16px; padding: 28px 24px; background: rgba(15,15,42,0.7); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); backdrop-filter: blur(10px); } .lp-stat-pill { display: flex; align-items:center; gap:10px; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.18); border-radius: 30px; padding: 10px 20px; } .lp-stat-num { font-size:20px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .lp-stat-lbl { font-size:12px; color:var(--text-muted); } .lp-section { padding:80px 48px; max-width:1200px; margin:0 auto; } .lp-section-head { text-align:center; margin-bottom:56px; } .lp-section-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-light); margin-bottom:12px; } .lp-section-head h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.02em; margin-bottom:12px; } .lp-section-head p { color:var(--text-muted); font-size:16px; max-width:540px; margin:0 auto; } .lp-feature-grid { min-width:0; } .lp-feature-grid > [class*="col-"] { display:flex; min-width:0; } .lp-feature-card { width:100%; min-width:0; height:100%; display:flex; flex-direction:column; background: linear-gradient(150deg, rgba(18,17,49,.98), rgba(12,12,34,.98)); border: 1px solid rgba(124,58,237,.22); border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); transition: transform .25s, border-color .25s, box-shadow .25s; position: relative; overflow:hidden; box-shadow: 0 12px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025); } .lp-feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--grad); opacity:0; transition: opacity .25s; } .lp-feature-card:hover { transform:translateY(-4px); border-color:rgba(124,58,237,0.4); box-shadow:0 16px 48px rgba(124,58,237,0.15); } .lp-feature-card:hover::before { opacity:1; } .lp-feature-icon { width:54px; height:54px; flex:0 0 54px; background: linear-gradient(145deg, rgba(124,58,237,.22), rgba(79,70,229,.10)); border: 1px solid rgba(167,139,250,.25); border-radius: 16px; display: flex; align-items:center; justify-content:center; color:var(--primary-light); font-size:23px; margin-bottom:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(76,29,149,.14); } .lp-feature-icon i { display:block; line-height:1; font-size:23px; color:var(--primary-light); } .lp-inline-icon { display:block; width:25px; height:25px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--primary-light); } .lp-cta-icon { width:44px; height:44px; margin:0 auto; stroke-width:1.7; filter:drop-shadow(0 4px 12px rgba(124,58,237,.35)); } .lp-feature-card h3 { font-size:clamp(15px,1.25vw,17px); font-weight:750; line-height:1.4; margin-bottom:9px; letter-spacing:-.015em; } .lp-feature-card p { flex:1; margin:0; font-size:14px; color:var(--text-muted); line-height:1.75; overflow-wrap:anywhere; word-break:normal; } .lp-steps { position:relative; min-width:0; } .lp-steps > [class*="col-"] { min-width:0; display:flex; } .lp-step-card { width:100%; min-width:0; height:100%; } .lp-steps::before { content:''; position:absolute; top:40px; left:calc(16.67% + 24px); right:calc(16.67% + 24px); height:1px; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); z-index:0; } .lp-step { width:100%; text-align:center; padding:26px 18px 24px; position:relative; z-index:1; border-radius:18px; border:1px solid rgba(124,58,237,.16); background:linear-gradient(160deg,rgba(18,17,49,.72),rgba(12,12,34,.45)); } .lp-step-num { width:56px; height:56px; background: var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; margin:0 auto 16px; box-shadow: 0 8px 30px rgba(124,58,237,0.4); } .lp-step h3 { font-size:15px; font-weight:700; margin-bottom:8px; } .lp-step p { margin:0; font-size:14px; color:var(--text-muted); line-height:1.7; } .lp-cta { padding: 80px 24px; text-align: center; } .lp-cta-card { display: inline-block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 64px 80px; max-width: 660px; position: relative; overflow:hidden; } .lp-cta-card::before { content:''; position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.14) 0%, transparent 70%); } .lp-cta-card > * { position:relative; z-index:1; } .lp-cta-card h2 { font-size:32px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px; } .lp-cta-card p { color:var(--text-muted); font-size:15px; margin-bottom:32px; line-height:1.6; } .lp-footer { padding: 28px 48px; border-top: 1px solid var(--border-light); display: flex; align-items:center; justify-content:space-between; font-size: 13px; color: var(--text-dim); } .lp-footer a { color:var(--text-muted); text-decoration:none; transition:color .2s; } .lp-footer a:hover { color:var(--text); } .lp-footer-links { display:flex; gap:24px; } @media(max-width:768px) { .lp-nav { padding:0 20px; } .lp-nav-links { display:none; } .lp-section { padding:60px 20px; } .lp-cta-card { padding:40px 24px; } .lp-footer { flex-direction:column; gap:12px; text-align:center; } .lp-steps::before { display:none; } } .lp-nav { box-shadow: 0 10px 38px rgba(0,0,0,.18); border-bottom-color: rgba(167,139,250,.18); } .lp-logo-box { overflow:hidden; flex:0 0 auto; } .lp-logo-box .brand-mark-img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .lp-hero { isolation:isolate; } .lp-hero-inner { width:min(100%, 900px); } .lp-badge { padding:9px 17px; background:rgba(15,12,38,.72); border-color:rgba(167,139,250,.42); box-shadow:0 10px 34px rgba(76,29,149,.22), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .lp-hero h1 { font-size:clamp(38px, 6.8vw, 76px); line-height:1.06; letter-spacing:-.045em; text-wrap:balance; text-shadow:0 8px 34px rgba(0,0,0,.2); } .lp-hero h1 .grad-text { filter:drop-shadow(0 5px 24px rgba(124,58,237,.18)); } .lp-hero p { max-width:640px; text-wrap:pretty; } .lp-hero-cta .btn { min-height:48px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .lp-hero-cta .btn:hover { transform:translateY(-2px); } .lp-hero-cta .btn-primary { box-shadow:0 12px 32px rgba(124,58,237,.27); } .lp-nav { gap:14px; padding-left:clamp(14px,4vw,48px); padding-right:clamp(14px,4vw,48px); } .lp-nav-brand { min-width:0; flex:0 1 auto; overflow:hidden; } .lp-nav-name { min-width:0; max-width:min(34vw,280px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lp-nav-links { gap:clamp(16px,2.4vw,32px); } .lp-nav-actions { flex:0 0 auto; } .lp-hero { min-height:100vh; min-height:100svh; } .lp-hero-inner { min-width:0; } .lp-hero h1 { max-width:100%; overflow-wrap:normal; } .lp-hero h1 .lp-nowrap { white-space:nowrap; } .lp-hero-cta .btn { min-width:0; white-space:normal; } .lp-stats { gap:12px; } .lp-stat-pill { max-width:100%; min-width:0; } .lp-section { width:100%; min-width:0; } .lp-section-head h2 { line-height:1.15; text-wrap:balance; } .lp-section-head p { line-height:1.7; } .lp-feature-card:hover { transform:translateY(-4px); border-color:rgba(167,139,250,.48); box-shadow:0 18px 44px rgba(76,29,149,.2), inset 0 1px 0 rgba(255,255,255,.04); } .lp-feature-card::after { content:""; position:absolute; width:150px; height:150px; right:-95px; top:-100px; border-radius:50%; background:rgba(124,58,237,.12); filter:blur(5px); pointer-events:none; } .lp-cta { padding:clamp(56px,7vw,88px) 20px; } .lp-cta-card { display:block; width:min(100%,700px); margin:0 auto; padding:clamp(32px,6vw,64px); box-shadow:0 22px 65px rgba(0,0,0,.2); } .lp-cta-card h2 { line-height:1.15; text-wrap:balance; } .lp-cta-card .btn { white-space:normal; justify-content:center; } .lp-footer { gap:18px; flex-wrap:wrap; } .lp-footer > span { min-width:0; overflow-wrap:anywhere; } .lp-footer-links { flex-wrap:wrap; justify-content:center; } @media(max-width:480px) { .lp-nav { height:62px; padding:0 12px; gap:8px; } .lp-nav-name { font-size:14px; max-width:26vw; } .lp-nav .btn-sm { padding:7px 9px; font-size:11px; } .lp-nav-actions { gap:6px; } .lp-logo-box { width:35px; height:35px; } .lp-nav-brand { gap:8px; } .lp-hero { padding:102px 18px 62px; min-height:92svh; } .lp-badge { max-width:100%; font-size:10px; letter-spacing:.035em; padding:8px 11px; gap:7px; } .lp-hero h1 { font-size:clamp(32px, 9.4vw, 48px); line-height:1.09; } .lp-hero p { font-size:15px; line-height:1.7; margin-bottom:28px; } .lp-hero-cta { width:100%; gap:10px; } .lp-hero-cta .btn { width:100%; justify-content:center; padding:13px 16px; } .lp-stats { padding:22px 14px; gap:9px; } .lp-stat-pill { padding:9px 12px; gap:7px; } .lp-stat-num { font-size:17px; } .lp-stat-lbl { font-size:11px; } .lp-section { padding:52px 18px; } .lp-section-head { margin-bottom:28px; } .lp-feature-card { border-radius:17px; padding:22px; } .lp-feature-icon { margin-bottom:16px; } .lp-steps::before { display:none; } .lp-step { padding:22px 18px; } .lp-footer { padding:26px 18px; } .lp-footer-links { gap:16px; } } @media(max-width:360px) { .lp-nav-name { display:none; } .lp-nav .btn-sm { padding:7px 8px; } .lp-hero { padding-left:14px; padding-right:14px; } .lp-hero h1 { font-size:32px; } .lp-badge { font-size:9px; } .lp-section { padding-left:14px; padding-right:14px; } .lp-feature-card { padding:19px; } }