:root { --bg: hsl(20 14% 4%); --fg: hsl(30 20% 96%); --card: hsl(20 14% 7%); --muted: hsl(30 8% 65%); --border: hsl(20 14% 14%); --secondary: hsl(20 14% 10%); --primary: hsl(18 100% 55%); --primary-foreground: hsl(0 0% 8%); --primary-glow: hsl(25 100% 60%); --shadow-glow: 0 0 40px hsl(18 100% 55% / .5), inset 0 1px 0 hsl(0 0% 100% / .2); --shadow-mockup: 0 60px 120px -30px hsl(18 100% 50% / .5), 0 0 100px hsl(18 100% 55% / .3); --radius: 1.25rem; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: hidden; background: var(--bg); } body { background: var(--bg); color: var(--fg); font-family: 'Sora', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; min-height: 100vh; position: relative; overflow-x: hidden; width: 100%; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .accent { color: var(--primary); } .muted { color: var(--muted); } .text-glow { text-shadow: 0 0 60px hsl(18 100% 55% / .6); } .btn-glow { box-shadow: var(--shadow-glow); } .icon { width: 1rem; height: 1rem; } .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .glow { position: absolute; border-radius: 9999px; filter: blur(80px); } .glow-1 { top: 0; right: 0; width: 60vw; height: 60vw; opacity: .5; background: radial-gradient(circle, hsl(18 100% 55% / .45), transparent 60%); animation: glowPulse 8s ease-in-out infinite; } .glow-2 { bottom: 0; left: 0; width: 50vw; height: 50vw; opacity: .3; background: radial-gradient(circle, hsl(28 100% 50% / .35), transparent 60%); animation: glowPulse 10s ease-in-out infinite reverse; } @media (max-width: 768px) { .glow-1, .glow-2 { filter: blur(40px); animation: none; } } @keyframes glowPulse { 0%, 100% { transform: scale(1) translate(0,0); opacity: .5; } 50% { transform: scale(1.15) translate(-2%, 2%); opacity: .75; } } .particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .particle { position: absolute; width: 4px; height: 4px; border-radius: 9999px; background: var(--primary); box-shadow: 0 0 12px hsl(18 100% 55% / .9), 0 0 24px hsl(18 100% 55% / .5); opacity: 0; animation: floatUp linear infinite; will-change: transform; } @keyframes floatUp { 0% { transform: translateY(110vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } } .grid-bg { background-image: linear-gradient(hsl(0 0% 100% / .04) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .04) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%); } @media (max-width: 768px) { .grid-bg { -webkit-mask-image: none; mask-image: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; font-weight: 600; transition: all .3s ease; white-space: nowrap; position: relative; overflow: hidden; } .btn-sm { padding: .5rem 1.1rem; font-size: .85rem; } .btn-lg { padding: 0 1.75rem; height: 3.25rem; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: var(--primary-foreground); box-shadow: var(--shadow-glow); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / .35) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s ease; } .btn-primary:hover::before { transform: translateX(100%); } .btn-primary:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.1); box-shadow: 0 0 60px hsl(18 100% 55% / .8), inset 0 1px 0 hsl(0 0% 100% / .25); } .btn-primary:active { transform: translateY(-1px) scale(1); } .nav { position: relative; z-index: 30; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; } .brand { display: flex; align-items: center; gap: .6rem; transition: transform .3s ease; } .brand:hover { transform: scale(1.04); } .brand-logo { width: 2.5rem; height: 2.5rem; border-radius: 9999px; box-shadow: var(--shadow-glow); object-fit: cover; animation: logoSpin 20s linear infinite; } @media (max-width: 768px) { .brand-logo { animation: none; } } @keyframes logoSpin { to { transform: rotate(360deg); } } .brand-name { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.25rem; } .hero { position: relative; z-index: 10; padding-top: 1rem; } .author-chip { display: inline-flex; align-items: center; gap: .75rem; background: hsl(20 14% 7% / .9); border: 1px solid var(--border); border-radius: 9999px; padding: .25rem 1.25rem .25rem .25rem; margin: 0 auto 2rem; position: relative; left: 50%; transform: translateX(-50%); transition: all .3s ease; } @media (min-width: 769px) { .author-chip { backdrop-filter: blur(20px); } } .author-chip:hover { border-color: hsl(18 100% 55% / .5); box-shadow: 0 0 30px hsl(18 100% 55% / .25); transform: translateX(-50%) translateY(-2px); } .author-avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; box-shadow: 0 0 15px hsl(18 100% 55% / .5); } .author-name { font-size: .75rem; font-weight: 600; line-height: 1.1; } .author-handle { font-size: .75rem; color: var(--muted); line-height: 1.1; } .hero-grid { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; padding-bottom: 5rem; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 5fr 7fr; gap: 3rem; } } .hero-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: .85; letter-spacing: -.04em; } .hero-title .accent { background: linear-gradient(120deg, hsl(18 100% 55%), hsl(35 100% 65%), hsl(18 100% 55%)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 4s linear infinite; } @media (max-width: 768px) { .hero-title .accent { animation: none; background-position: 0 center; } } @keyframes gradientShift { to { background-position: 200% center; } } .hero-desc { margin-top: 1.5rem; max-width: 28rem; color: var(--muted); line-height: 1.6; } .hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; } .stats-card { margin-top: 2.5rem; display: inline-flex; align-items: center; gap: 1.5rem; background: hsl(20 14% 7% / .9); border: 1px solid var(--border); border-radius: 1rem; padding: .75rem 1.25rem; transition: all .3s ease; } @media (min-width: 769px) { .stats-card { backdrop-filter: blur(20px); } } .stats-card:hover { border-color: hsl(18 100% 55% / .4); transform: translateY(-3px); box-shadow: 0 10px 40px -10px hsl(18 100% 55% / .35); } .stat { display: flex; align-items: center; gap: .5rem; font-size: .9rem; transition: transform .25s ease; } .stat:hover { transform: scale(1.1); } .stat .heart, .stat .star { color: var(--primary); animation: heartBeat 2.5s ease-in-out infinite; } .stat .star { animation-delay: .8s; } @media (max-width: 768px) { .stat .heart, .stat .star { animation: none; } } @keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } } .hero-right { position: relative; } .mockup-stage { position: relative; } .mockup { position: relative; border-radius: 2rem; overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-mockup); } .mockup::after { content: ''; position: absolute; inset: -2px; border-radius: 2rem; padding: 2px; background: linear-gradient(120deg, hsl(18 100% 55% / .8), transparent 40%, transparent 60%, hsl(25 100% 60% / .8)); background-size: 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: borderShift 6s linear infinite; opacity: .8; } @media (max-width: 768px) { .mockup::after { animation: none; } } @keyframes borderShift { to { background-position: 200% 200%; } } .mockup-bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: hsl(20 14% 10% / .6); position: relative; z-index: 2; } .mockup-bar span { width: .6rem; height: .6rem; border-radius: 9999px; display: inline-block; } .dot-red { background: hsl(0 84% 60% / .6); } .dot-yellow { background: hsl(18 100% 55% / .6); } .dot-gray { background: hsl(30 8% 65% / .4); } .mockup-url { width: auto !important; height: auto !important; background: none !important; margin-left: .75rem; font-size: .65rem; color: var(--muted); } .carousel { position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, hsl(18 100% 55% / .12), transparent 60%), radial-gradient(ellipse at 70% 80%, hsl(25 100% 60% / .1), transparent 60%), var(--bg); z-index: 2; padding: 1.25rem 0; } .carousel::before { content: ''; position: absolute; top: 0; bottom: 0; left: -20%; width: 30%; background: linear-gradient(90deg, transparent, hsl(18 100% 55% / .08), transparent); animation: scanLine 6s ease-in-out infinite; pointer-events: none; z-index: 1; } @media (max-width: 768px) { .carousel::before { display: none; } } @keyframes scanLine { 0%, 100% { transform: translateX(0); opacity: 0; } 50% { transform: translateX(400%); opacity: 1; } } .carousel::after { content: ''; position: absolute; inset: .75rem; border: 1px solid transparent; border-image: linear-gradient(135deg, hsl(18 100% 55% / .5), transparent 30%, transparent 70%, hsl(25 100% 60% / .5)) 1; pointer-events: none; z-index: 3; animation: cornerPulse 3s ease-in-out infinite; } @media (max-width: 768px) { .carousel::after { animation: none; opacity: .4; } } @keyframes cornerPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } .carousel-track { display: flex; transition: transform .7s cubic-bezier(.65,.05,.36,1); position: relative; z-index: 2; } .slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 320px; padding: 1rem; position: relative; perspective: 1200px; } .slide img { max-width: 92%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: .75rem; box-shadow: 0 20px 60px -10px hsl(0 0% 0% / .7), 0 0 0 1px hsl(18 100% 55% / .15), 0 0 50px hsl(18 100% 55% / .25); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, filter .6s ease; animation: slideFloat 5s ease-in-out infinite; filter: saturate(1.05); position: relative; z-index: 2; will-change: transform; } @media (max-width: 768px) { .slide img { animation: none; } } @keyframes slideFloat { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-10px) rotateY(2deg); } } .slide:hover img { transform: translateY(-10px) scale(1.04) rotateY(-3deg); box-shadow: 0 40px 90px -10px hsl(0 0% 0% / .9), 0 0 0 1px hsl(18 100% 55% / .5), 0 0 90px hsl(18 100% 55% / .55); filter: saturate(1.2) brightness(1.05); } .slide::before { content: ''; position: absolute; width: 70%; height: 70%; background: radial-gradient(ellipse, hsl(18 100% 55% / .35), transparent 65%); filter: blur(50px); z-index: 1; opacity: .6; animation: haloPulse 4s ease-in-out infinite; } @media (max-width: 768px) { .slide::before { display: none; } } @keyframes haloPulse { 0%, 100% { opacity: .4; transform: scale(.95); } 50% { opacity: .8; transform: scale(1.1); } } .slide.is-active img { animation: slideFloat 5s ease-in-out infinite, shineIn .9s ease-out; } @media (max-width: 768px) { .slide.is-active img { animation: shineIn .9s ease-out; } } @keyframes shineIn { 0% { filter: brightness(1.5) saturate(1.4); transform: scale(.96); } 100% { filter: saturate(1.05); transform: scale(1); } } @media (max-width: 640px) { .slide { height: 220px; padding: .5rem; } .slide img { max-width: 95%; } } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: hsl(20 14% 7% / .9); border: 1px solid hsl(18 100% 55% / .25); color: var(--fg); display: flex; align-items: center; justify-content: center; z-index: 10; transition: all .3s ease; opacity: .9; box-shadow: 0 8px 24px hsl(0 0% 0% / .5); } @media (min-width: 769px) { .carousel-arrow { backdrop-filter: blur(10px); } } .carousel-arrow svg { width: 1.25rem; height: 1.25rem; transition: transform .3s ease; } .carousel-arrow:hover { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: var(--primary-foreground); border-color: var(--primary); opacity: 1; box-shadow: var(--shadow-glow); transform: translateY(-50%) scale(1.15); } .carousel-prev:hover svg { transform: translateX(-3px); } .carousel-next:hover svg { transform: translateX(3px); } .carousel-prev { left: .75rem; } .carousel-next { right: .75rem; } @media (max-width: 480px) { .carousel-arrow { width: 2.25rem; height: 2.25rem; } .carousel-arrow svg { width: 1rem; height: 1rem; } } .dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; } .dot-btn { height: 6px; width: 8px; border-radius: 9999px; background: var(--border); transition: all .4s cubic-bezier(.65,.05,.36,1); } .dot-btn.is-active { width: 40px; background: linear-gradient(90deg, var(--primary), var(--primary-glow)); box-shadow: 0 0 20px hsl(18 100% 55% / .7); } .chip { position: absolute; z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: .6rem 1rem; box-shadow: 0 20px 50px -10px hsl(0 0% 0% / .6); display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; transition: border-color .3s ease; } .chip .spark { color: var(--primary); animation: sparkle 2s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .5; transform: scale(1.3) rotate(180deg); } } .chip-1 { top: -1rem; left: -1rem; } .chip-2 { top: 2rem; right: -.5rem; background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: var(--primary-foreground); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; animation: float 8s ease-in-out infinite, pulseRing 2s ease-in-out infinite; animation-delay: .5s, 0s; } @keyframes pulseRing { 0%, 100% { box-shadow: 0 20px 50px -10px hsl(0 0% 0% / .6), 0 0 20px hsl(18 100% 55% / .5); } 50% { box-shadow: 0 20px 50px -10px hsl(0 0% 0% / .6), 0 0 50px hsl(18 100% 55% / 1); } } .chip-3 { bottom: -.5rem; left: 3rem; } .chip-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; } .chip-label { font-size: .55rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); } @media (max-width: 768px) { .chip { display: none; } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-20px) rotate(var(--r, 0deg)); } } .float-slow { animation: float 6s ease-in-out infinite; } .float-slower { animation: float 8s ease-in-out infinite; } .chip-1 { --r: -6deg; } .chip-2 { --r: 8deg; } .chip-3 { --r: 4deg; animation-delay: 1s; } .marquee-section { position: relative; z-index: 10; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: hsl(20 14% 7% / .6); padding: 2rem 0; overflow: hidden; } @media (min-width: 769px) { .marquee-section { backdrop-filter: blur(8px); } } .marquee { width: 100%; overflow: hidden; } .marquee-track { display: inline-flex; gap: 3rem; align-items: center; white-space: nowrap; font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.75rem, 4vw, 3rem); animation: marquee 30s linear infinite; } .marquee-track span:not(.accent) { transition: color .3s ease; } .marquee-track:hover span:not(.accent) { color: var(--primary); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cta-section { position: relative; z-index: 10; padding: 6rem 0; } .cta-card { position: relative; overflow: hidden; border-radius: 2rem; border: 1px solid hsl(18 100% 55% / .4); background: linear-gradient(135deg, hsl(18 100% 55% / .15), var(--card) 60%); padding: 5rem 2.5rem; text-align: center; box-shadow: var(--shadow-mockup); transition: transform .4s ease, box-shadow .4s ease; } .cta-card:hover { transform: translateY(-6px); box-shadow: 0 80px 140px -30px hsl(18 100% 50% / .65), 0 0 120px hsl(18 100% 55% / .4); } .cta-glow { position: absolute; top: -5rem; right: -5rem; width: 20rem; height: 20rem; border-radius: 9999px; filter: blur(80px); opacity: .6; background: radial-gradient(circle, hsl(18 100% 55% / .6), transparent 60%); animation: ctaGlowMove 12s ease-in-out infinite; } @media (max-width: 768px) { .cta-glow { animation: none; filter: blur(50px); opacity: .4; } } @keyframes ctaGlowMove { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30%, 20%) scale(1.3); } } .cta-inner { position: relative; } .eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .4em; color: var(--primary); margin-bottom: 1.5rem; } .cta-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: .9; letter-spacing: -.04em; max-width: 48rem; margin: 0 auto; } .cta-title .accent { background: linear-gradient(120deg, hsl(18 100% 55%), hsl(35 100% 65%), hsl(18 100% 55%)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 4s linear infinite; } @media (max-width: 768px) { .cta-title .accent { animation: none; background-position: 0 center; } } .cta-desc { margin-top: 1.5rem; max-width: 32rem; margin-left: auto; margin-right: auto; color: var(--muted); } .cta-inner .btn { margin-top: 2.5rem; } .footer { position: relative; z-index: 10; border-top: 1px solid var(--border); padding: 2.5rem 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); } @media (min-width: 768px) { .footer-inner { flex-direction: row; } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 640px) { .container { padding: 0 1rem; } .cta-card { padding: 3rem 1.5rem; } }