in the JSX rather than in this file. Both are * declared below so the page stands on its own with no build step -- which is * the whole point of it being static. */ :root { --font-geist: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } /* The third thing the Next build was providing and this file never declared: * Tailwind's preflight, which sets border-box on everything. Without it every * `width: 100%` that also has padding overflows its parent -- which it did, * measurably: the signup card came out 369px wide inside a 311px column and * the Google button was clipped off the right edge of a 375px screen. */ *, *::before, *::after { box-sizing: border-box; } /* The Next layout set the font on ; this file only ever set it per * section, so anything not inside one fell back to the browser's serif. */ body { margin: 0; background: #0a0a0a; font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; } .page { position: relative; min-height: 100vh; padding-left: 1.5rem; padding-right: 1.5rem; color: #fff; overflow: hidden; background: radial-gradient(circle at 75% 45%, rgba(74, 222, 128, 0.13), transparent 27rem), #0a0a0a; } .brand { position: absolute; left: 0; right: 0; top: 2rem; text-align: center; text-transform: uppercase; letter-spacing: 0.22em; font-family: var(--font-geist), sans-serif; font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 700; } .hero { display: grid; width: min(100%, 1080px); min-height: 100vh; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: clamp(3rem, 9vw, 8rem); margin: 0 auto; padding: 7rem 0 4rem; } .copy { display: flex; align-items: flex-start; flex-direction: column; gap: 2rem; } .copy h1 { max-width: 720px; margin: 0; font-family: var(--font-geist), sans-serif; font-size: clamp(3.2rem, 7vw, 6.6rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.065em; } .moneyWithGraph { display: inline-flex; align-items: center; gap: 0.16em; color: #4ade80; white-space: nowrap; } .heroMiniGraph { width: clamp(4.8rem, 8vw, 7.2rem); height: 0.62em; overflow: visible; transform: translateY(0.03em); } .heroMiniGraphArea { fill: url("#hero-revenue-area"); opacity: 0; animation: heroGraphArea 3.8s 0.45s ease-out infinite; } .heroMiniGraphLine { fill: none; stroke: #4ade80; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; filter: drop-shadow(0 0 7px rgba(74, 222, 128, 0.72)); animation: heroGraphDraw 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .heroMiniGraphPoint { fill: #bbf7d0; stroke: #16a34a; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px #4ade80); animation: heroGraphPoint 3.8s ease-in-out infinite; } .cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.65rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 35px rgba(0, 0, 0, 0.28); color: #fff; padding: 0.85rem 1.4rem; backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); font-family: var(--font-geist), sans-serif; font-size: 0.9rem; font-weight: 650; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .cta::before { position: absolute; inset: 1px 16% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent); content: ""; } .cta::after { position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient( from var(--flare-angle), transparent 0deg, transparent 275deg, rgba(74, 222, 128, 0.2) 305deg, #4ade80 330deg, #bbf7d0 342deg, transparent 360deg ); padding: 1.5px; content: ""; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: moneyFlare 2.6s linear infinite; } .cta:hover { border-color: rgba(134, 239, 172, 0.55); background: linear-gradient(135deg, rgba(255, 255, 255, 0.27), rgba(74, 222, 128, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 16px 42px rgba(34, 197, 94, 0.16); transform: translateY(-2px); } .phone { position: relative; min-height: 620px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 3rem; background: linear-gradient(160deg, #191919, #0e0e0e 65%); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 6px #050505; padding: 5.3rem 1.15rem 1.15rem; font-family: var(--font-geist), sans-serif; } .phoneTop { position: absolute; inset: 1.2rem 1.7rem auto; display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, 0.72); font-size: 0.68rem; font-weight: 650; } .island { width: 5.4rem; height: 1.65rem; border-radius: 999px; background: #000; } .phoneGlow { position: absolute; inset: 5rem auto auto 50%; width: 12rem; height: 12rem; border-radius: 50%; background: rgba(74, 222, 128, 0.13); filter: blur(45px); transform: translateX(-50%); } .phoneLabel, .total { position: relative; margin: 0; text-align: center; } .totalRow { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.65rem; } .phoneLabel { color: rgba(255, 255, 255, 0.48); font-size: 0.76rem; font-weight: 550; } .total { margin-top: 0.35rem; font-size: 2.75rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.06em; animation: revenueBump 720ms cubic-bezier(0.2, 0.9, 0.3, 1); } .revenueTrend { display: grid; width: 1.7rem; height: 1.7rem; margin-top: 0.35rem; place-items: center; color: #4ade80; } .revenueTrend svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; } .notifications { position: relative; display: grid; gap: 0.75rem; margin-top: 1.3rem; } .notification { display: flex; align-items: center; gap: 0.8rem; min-height: 4.9rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1.25rem; background: rgba(42, 42, 42, 0.88); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.26); padding: 0.85rem; opacity: 0; transform: translateY(22px) scale(0.96); backdrop-filter: blur(16px); } .notificationVisible { animation: notificationEnter 620ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards; } .appIcon { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border-radius: 0.9rem; background: #4ade80; color: #052e16; font-size: 1.2rem; font-weight: 800; } .notificationCopy { min-width: 0; flex: 1; } .notificationCopy div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .notificationCopy strong { font-size: 0.83rem; } .notificationCopy span { color: rgba(255, 255, 255, 0.38); font-size: 0.66rem; } .notificationCopy p { overflow: hidden; margin: 0.2rem 0 0; color: rgba(255, 255, 255, 0.64); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .followersSection { display: grid; width: min(100%, 1180px); min-height: 100vh; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 7rem 0; } .followersSection h2 { margin: 0; font-family: var(--font-geist), sans-serif; font-size: clamp(3rem, 6vw, 6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.065em; } .sectionCopy { position: relative; z-index: 2; } .eyebrow { margin: 0 0 1.25rem; color: #4ade80; font-family: var(--font-geist), sans-serif; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.22em; text-transform: uppercase; } .visualCard { position: relative; overflow: hidden; min-height: 31rem; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 2rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)), rgba(15, 15, 15, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 35px 90px rgba(0, 0, 0, 0.32); padding: 1.35rem; font-family: var(--font-geist), sans-serif; backdrop-filter: blur(22px); } .visualCard::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(to bottom, #000, transparent 88%); pointer-events: none; } .visualCardHeader { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, 0.48); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; } .liveLabel { display: inline-flex; align-items: center; gap: 0.45rem; color: #86efac; } .liveLabel i, .liveNow > i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: livePulse 1.8s ease-out infinite; } .audienceVisual { min-height: 33rem; } .audienceVisual::after { position: absolute; inset: 15% 10%; border-radius: 50%; background: rgba(74, 222, 128, 0.13); content: ""; filter: blur(60px); } .audienceOrbit { position: absolute; inset: 4rem 1rem 5.5rem; z-index: 2; } .orbitRing { position: absolute; inset: 13% 12%; border: 1px solid rgba(74, 222, 128, 0.16); border-radius: 50%; animation: orbitBreathe 4s ease-in-out infinite; } .orbitRing:nth-of-type(2) { inset: 27% 27%; border-color: rgba(255, 255, 255, 0.1); animation-delay: -2s; } .appCore { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; justify-items: center; gap: 0.55rem; transform: translate(-50%, -50%); } .appCore span { display: grid; width: 5.4rem; height: 5.4rem; place-items: center; border: 1px solid rgba(187, 247, 208, 0.55); border-radius: 1.5rem; background: linear-gradient(145deg, #86efac, #22c55e); box-shadow: 0 0 50px rgba(74, 222, 128, 0.38); color: #052e16; font-size: 2rem; font-weight: 850; } .appCore small { color: rgba(255, 255, 255, 0.52); font-size: 0.65rem; } .avatar { position: absolute; z-index: 4; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: linear-gradient(145deg, #313131, #171717); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38); color: rgba(255, 255, 255, 0.8); font-size: 0.76rem; font-weight: 750; animation: avatarFloat 4s ease-in-out infinite; } .avatar:nth-child(1) { top: 7%; left: 12%; } .avatar:nth-child(2) { top: 5%; right: 13%; animation-delay: -1.2s; } .avatar:nth-child(3) { top: 44%; left: 1%; animation-delay: -2.4s; } .avatar:nth-child(4) { top: 42%; right: 0; animation-delay: -0.7s; } .avatar:nth-child(5) { bottom: 2%; left: 17%; animation-delay: -3s; } .avatar:nth-child(6) { right: 17%; bottom: 2%; animation-delay: -1.8s; } .audiencePayment { position: absolute; right: 1.35rem; bottom: 1.35rem; left: 1.35rem; z-index: 4; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(74, 222, 128, 0.25); border-radius: 1.15rem; background: rgba(19, 42, 28, 0.74); box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28); padding: 1rem 1.15rem; animation: paymentRise 4.8s ease-in-out infinite; } .audiencePayment span { color: rgba(255, 255, 255, 0.62); font-size: 0.76rem; } .audiencePayment strong { color: #86efac; font-size: 1rem; } .buildSection { position: relative; overflow: hidden; } .buildSection::before { position: absolute; width: min(70vw, 48rem); height: min(70vw, 48rem); border-radius: 50%; background: rgba(74, 222, 128, 0.12); content: ""; filter: blur(110px); pointer-events: none; } .buildSection h2 { position: relative; } .builderVisual { padding: 1.5rem; } .builderPercent { color: #86efac; } .builderProgress { position: relative; z-index: 2; height: 0.3rem; overflow: hidden; margin: 1.3rem 0 2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .builderProgress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16a34a, #86efac); box-shadow: 0 0 16px rgba(74, 222, 128, 0.65); transform-origin: left; animation: progressBuild 5s ease-in-out infinite; } .builderSteps { position: relative; z-index: 2; display: grid; gap: 0.7rem; } .builderSteps > div { display: grid; grid-template-columns: 2rem 2.5rem 1fr; grid-template-rows: auto auto; align-items: center; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 1.15rem; background: rgba(255, 255, 255, 0.035); padding: 0.85rem; opacity: 0.42; animation: stepActivate 5s ease-in-out infinite; } .builderSteps > div:nth-child(2) { animation-delay: 0.55s; } .builderSteps > div:nth-child(3) { animation-delay: 1.1s; } .builderSteps span { grid-row: 1 / 3; color: rgba(255, 255, 255, 0.26); font-size: 0.65rem; } .builderSteps i { grid-row: 1 / 3; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: rgba(74, 222, 128, 0.12); color: #86efac; font-size: 0.7rem; font-style: normal; } .builderSteps strong { font-size: 0.82rem; } .builderSteps small { margin-top: 0.22rem; color: rgba(255, 255, 255, 0.42); font-size: 0.65rem; } .builderReady { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.2rem; border-radius: 1rem; background: #4ade80; box-shadow: 0 16px 45px rgba(34, 197, 94, 0.18); color: #052e16; padding: 0.9rem; font-size: 0.78rem; font-weight: 800; animation: readyGlow 5s ease-in-out infinite; } .noReviewSection { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.035)); } .launchVisual { padding: 0; } .launchTopbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.4rem; height: 3.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09); padding: 0 1.15rem; } .launchTopbar i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .launchTopbar span { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.38); font-size: 0.65rem; } .reviewQueue { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 1.35rem; border: 1px solid rgba(248, 113, 113, 0.18); border-radius: 1rem; background: rgba(127, 29, 29, 0.1); padding: 1rem; color: rgba(255, 255, 255, 0.42); } .reviewQueue span { font-size: 0.72rem; } .reviewQueue strong { font-size: 0.76rem; font-weight: 600; } .reviewQueue i { position: absolute; top: 50%; right: 0.8rem; left: 0.8rem; height: 1px; background: rgba(248, 113, 113, 0.65); transform: rotate(-4deg) scaleX(0); animation: crossOut 4.5s ease-in-out infinite; } .launchTrack { position: relative; z-index: 2; display: grid; gap: 0; margin: 2.2rem 2rem 1.5rem; } .launchTrack > div { display: flex; align-items: center; gap: 0.8rem; color: rgba(255, 255, 255, 0.56); font-size: 0.74rem; } .launchTrack > div i { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(74, 222, 128, 0.28); border-radius: 50%; background: rgba(74, 222, 128, 0.1); color: #86efac; font-size: 0.7rem; font-style: normal; } .launchTrack > b { width: 1px; height: 2rem; margin-left: 1rem; background: linear-gradient(#4ade80, rgba(74, 222, 128, 0.12)); transform-origin: top; animation: trackFill 4.5s ease-in-out infinite; } .launchTrack .launchActive { color: #fff; font-weight: 700; } .launchActive i { box-shadow: 0 0 24px rgba(74, 222, 128, 0.38); } .liveNow { position: absolute; right: 1.35rem; bottom: 1.35rem; left: 1.35rem; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 1.1rem; background: rgba(19, 42, 28, 0.82); padding: 1rem; } .liveNow span { color: #86efac; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; } .liveNow strong { color: rgba(255, 255, 255, 0.68); font-size: 0.7rem; } .revenueSection h2 { text-shadow: 0 0 80px rgba(74, 222, 128, 0.2); } .splitVisual { min-height: 32rem; padding: 1.5rem; } .splitRow { position: relative; z-index: 2; margin-top: 2.1rem; } .splitRow > div:first-child { display: flex; align-items: baseline; justify-content: space-between; } .splitRow span { color: rgba(255, 255, 255, 0.58); font-size: 0.76rem; } .splitRow strong { font-size: 1.8rem; letter-spacing: -0.05em; } .splitRow small { display: block; margin-top: 0.55rem; color: rgba(255, 255, 255, 0.32); font-size: 0.62rem; } .splitBar { height: 0.72rem; overflow: hidden; margin-top: 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); } .splitBar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; } .appleRow .splitBar i { width: 70%; background: rgba(255, 255, 255, 0.3); } .supastaxRow .splitBar i { width: 100%; background: linear-gradient(90deg, #16a34a, #86efac); box-shadow: 0 0 18px rgba(74, 222, 128, 0.5); animation: revenueFill 4s ease-in-out infinite; } .supastaxRow strong { color: #86efac; } .moneyBack { position: absolute; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; z-index: 2; display: flex; align-items: center; gap: 0.85rem; border: 1px solid rgba(74, 222, 128, 0.24); border-radius: 1.15rem; background: rgba(74, 222, 128, 0.08); padding: 0.9rem 1rem; animation: moneyBackBump 4s ease-in-out infinite; } .moneyBack > span { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 50%; background: #4ade80; color: #052e16; font-size: 1.2rem; font-weight: 900; } .moneyBack div { display: flex; flex: 1; align-items: baseline; justify-content: space-between; } .moneyBack small { color: rgba(255, 255, 255, 0.52); font-size: 0.66rem; } .moneyBack strong { color: #86efac; font-size: 1.1rem; } .nicheSection { background: radial-gradient(circle at center, rgba(74, 222, 128, 0.07), transparent 48%); } .nicheVisual { min-height: 35rem; } .nicheBeam { position: absolute; top: 42%; left: 50%; z-index: 0; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(74, 222, 128, 0.13); filter: blur(65px); transform: translate(-50%, -50%); } .nichePhone { position: absolute; top: 50%; left: 50%; z-index: 2; width: 12.2rem; height: 24rem; overflow: hidden; border: 5px solid #050505; border-radius: 2.3rem; background: #151515; box-shadow: 0 28px 65px rgba(0, 0, 0, 0.5), 0 0 45px rgba(74, 222, 128, 0.12); padding: 1.35rem 0.8rem; transform: translate(-50%, -50%) rotate(-3deg); animation: phoneHover 5s ease-in-out infinite; } .nichePhoneTop { display: flex; align-items: center; justify-content: space-between; color: #86efac; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.12em; } .nichePhoneTop i { width: 1.6rem; height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); } .nicheHeroArt { display: flex; align-items: flex-end; height: 9.4rem; margin-top: 1rem; border-radius: 1.2rem; background: radial-gradient(circle at 70% 25%, rgba(187, 247, 208, 0.65), transparent 18%), linear-gradient(145deg, #14532d, #052e16 70%); padding: 0.9rem; } .nicheHeroArt span { font-size: 1.05rem; font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; } .nicheTiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.65rem; } .nicheTiles i { height: 3.1rem; border-radius: 0.65rem; background: rgba(255, 255, 255, 0.08); } .nicheTiles i:nth-child(2) { background: rgba(74, 222, 128, 0.16); } .nichePhone > small { display: block; margin-top: 1rem; color: rgba(255, 255, 255, 0.35); font-size: 0.52rem; text-align: center; } .nicheTag { position: absolute; z-index: 4; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(28, 28, 28, 0.88); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.72); padding: 0.65rem 0.9rem; font-size: 0.66rem; font-weight: 650; animation: tagFloat 4s ease-in-out infinite; } .nicheTag:nth-child(1) { top: 15%; left: 6%; } .nicheTag:nth-child(2) { top: 12%; right: 5%; animation-delay: -1.1s; } .nicheTag:nth-child(3) { top: 45%; left: 1%; animation-delay: -2.2s; } .nicheTag:nth-child(4) { top: 47%; right: 0; animation-delay: -0.5s; } .nicheTag:nth-child(5) { bottom: 12%; left: 5%; animation-delay: -3s; } .nicheTag:nth-child(6) { right: 5%; bottom: 10%; animation-delay: -1.7s; } .finalCtaSection { grid-template-columns: 1fr; min-height: 105vh; overflow: hidden; background: radial-gradient(circle at 50% 58%, rgba(74, 222, 128, 0.17), transparent 38%); } .finalCtaContent { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44rem; flex-direction: column; gap: 2.5rem; text-align: center; } .finalCtaContent h2 { position: relative; z-index: 2; max-width: 950px; } .finalCtaContent > .eyebrow, .finalCtaContent > .cta { position: relative; z-index: 2; } .finalGraph { position: absolute; right: -10vw; bottom: 2rem; left: -10vw; height: 19rem; opacity: 0.75; pointer-events: none; } .finalGraph svg { width: 100%; height: 100%; overflow: visible; } .finalGraphArea { fill: rgba(74, 222, 128, 0.07); } .finalGraphLine { fill: none; stroke: #4ade80; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 9px rgba(74, 222, 128, 0.65)); animation: finalGraphDraw 5s ease-in-out infinite; } .faqSection { display: grid; width: min(100%, 1080px); grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 9vw, 8rem); margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 9rem 0 11rem; font-family: var(--font-geist), sans-serif; } .faqHeader p { margin: 0 0 1rem; color: #4ade80; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; } .faqHeader h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.055em; } .faqList { border-top: 1px solid rgba(255, 255, 255, 0.16); } .faqItem { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: transparent; transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease; } .faqItem:hover, .faqItem[open] { border-color: rgba(74, 222, 128, 0.28); background: linear-gradient(90deg, rgba(74, 222, 128, 0.055), transparent 72%); box-shadow: inset 2px 0 0 rgba(74, 222, 128, 0.55); } .faqItem summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.65rem 1rem; cursor: pointer; font-size: 1.05rem; font-weight: 600; list-style: none; } .faqItem summary::-webkit-details-marker { display: none; } .faqItem summary span { color: #4ade80; font-size: 1.5rem; font-weight: 400; transition: transform 180ms ease; } .faqItem[open] summary span { transform: rotate(45deg); } .faqItem > p { max-width: 38rem; margin: -0.35rem 1rem 1.75rem; color: rgba(255, 255, 255, 0.62); font-size: 0.98rem; line-height: 1.65; } .faqItem[open] > p { animation: faqAnswerIn 280ms ease-out both; } @keyframes notificationEnter { from { opacity: 0; transform: translateY(22px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes revenueBump { 0% { color: #4ade80; text-shadow: 0 0 22px rgba(74, 222, 128, 0.6); transform: translateY(8px); } 100% { color: #fff; text-shadow: none; transform: translateY(0); } } @property --flare-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes moneyFlare { to { --flare-angle: 360deg; } } @keyframes heroGraphDraw { 0%, 8% { stroke-dashoffset: 1; } 58%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } } @keyframes heroGraphArea { 0%, 20%, 100% { opacity: 0; } 58%, 88% { opacity: 1; } } @keyframes heroGraphPoint { 0%, 52%, 100% { opacity: 0; transform: scale(0.5); } 64%, 78% { opacity: 1; transform: scale(1.35); } 88% { opacity: 0.72; transform: scale(1); } } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } } @keyframes orbitBreathe { 0%, 100% { opacity: 0.45; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } } @keyframes avatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes paymentRise { 0%, 12%, 100% { opacity: 0; transform: translateY(16px) scale(0.97); } 24%, 82% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes progressBuild { 0%, 8% { transform: scaleX(0.05); } 70%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0.05); } } @keyframes stepActivate { 0%, 12%, 100% { opacity: 0.4; border-color: rgba(255, 255, 255, 0.09); transform: translateX(0); } 32%, 78% { opacity: 1; border-color: rgba(74, 222, 128, 0.28); transform: translateX(4px); } } @keyframes readyGlow { 0%, 50%, 100% { opacity: 0.5; transform: translateY(5px); box-shadow: 0 16px 45px rgba(34, 197, 94, 0.08); } 68%, 88% { opacity: 1; transform: translateY(0); box-shadow: 0 16px 45px rgba(34, 197, 94, 0.28); } } @keyframes crossOut { 0%, 12%, 100% { transform: rotate(-4deg) scaleX(0); } 35%, 88% { transform: rotate(-4deg) scaleX(1); } } @keyframes trackFill { 0%, 15% { transform: scaleY(0); } 58%, 100% { transform: scaleY(1); } } @keyframes revenueFill { 0%, 12% { transform: scaleX(0.08); } 55%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0.08); } } @keyframes moneyBackBump { 0%, 45%, 100% { border-color: rgba(74, 222, 128, 0.24); transform: scale(1); } 58% { border-color: rgba(134, 239, 172, 0.55); transform: scale(1.025); } } @keyframes phoneHover { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) translateY(4px); } 50% { transform: translate(-50%, -50%) rotate(-1deg) translateY(-7px); } } @keyframes tagFloat { 0%, 100% { border-color: rgba(255, 255, 255, 0.14); transform: translateY(0); } 50% { border-color: rgba(74, 222, 128, 0.36); transform: translateY(-8px); } } @keyframes finalGraphDraw { 0%, 8% { stroke-dashoffset: 1; } 62%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } } @keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes sectionReveal { from { opacity: 0.15; transform: translateY(55px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @supports (animation-timeline: view()) { .followersSection > .sectionCopy, .followersSection > .visualCard { animation: sectionReveal both cubic-bezier(0.22, 1, 0.36, 1); animation-timeline: view(); animation-range: entry 5% cover 34%; } } @media (max-width: 800px) { .page { overflow: auto; } .hero { grid-template-columns: 1fr; justify-items: center; gap: 4rem; padding-top: 8.5rem; } .copy { align-items: center; text-align: center; } .copy h1 { font-size: clamp(3rem, 15vw, 5rem); } .phone { width: min(100%, 340px); } .followersSection { grid-template-columns: 1fr; gap: 3.5rem; min-height: auto; padding: 8rem 0; } .followersSection h2 { font-size: clamp(2.8rem, 12vw, 4.6rem); } .buildSection .visualCard, .revenueSection .visualCard { order: 2; } .buildSection .sectionCopy, .revenueSection .sectionCopy { order: 1; } .visualCard { width: min(100%, 31rem); justify-self: center; } .finalCtaSection { padding-right: 0; padding-left: 0; } .finalCtaContent { min-height: 38rem; } .faqSection { grid-template-columns: 1fr; gap: 3.5rem; padding: 7rem 0 8rem; } } @media (prefers-reduced-motion: reduce) { .notification { opacity: 0; transform: none; animation: none; } .notificationVisible { opacity: 1; } .total { animation: none; } .heroMiniGraphLine { stroke-dashoffset: 0; animation: none; } .heroMiniGraphArea, .heroMiniGraphPoint { opacity: 1; transform: none; animation: none; } .liveLabel i, .liveNow > i, .orbitRing, .avatar, .audiencePayment, .builderProgress i, .builderSteps > div, .builderReady, .reviewQueue i, .launchTrack > b, .supastaxRow .splitBar i, .moneyBack, .nichePhone, .nicheTag, .finalGraphLine { animation: none; } .audiencePayment { opacity: 1; transform: none; } .builderProgress i, .reviewQueue i, .launchTrack > b, .supastaxRow .splitBar i { transform: none; } .builderSteps > div, .builderReady { opacity: 1; transform: none; } .nichePhone { transform: translate(-50%, -50%) rotate(-2deg); } .finalGraphLine { stroke-dashoffset: 0; } .cta { transition: none; } .cta::after { --flare-angle: 330deg; animation: none; } .faqItem[open] > p, .followersSection > .sectionCopy, .followersSection > .visualCard { animation: none; } }