/* ========================================================================== BillBoss site 3.0 Dark emerald, numbers as hero. Static-first: every section reads fine with zero JS; the .js class on unlocks the scroll choreography. ========================================================================== */ :root{ --bg:#04060a; --bg-2:#070b12; --ink:#f2f7f4; --ink-2:#a8b7b0; --ink-3:#5f6f68; --emerald:#10b981; --emerald-2:#34d399; --emerald-deep:#047857; --gold:#f5b042; --gold-2:#ffd27a; --glass:rgba(255,255,255,0.04); --glass-2:rgba(255,255,255,0.07); --line:rgba(255,255,255,0.08); --venmo:#3d95ce; --cashapp:#00d632; --display:'Clash Display',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --r-lg:24px; --r-md:16px; --wrap:1160px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html.lenis{scroll-behavior:auto} body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} b,strong{font-weight:600} ::selection{background:rgba(16,185,129,.35);color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .skip{position:absolute;left:-999px;top:0;background:var(--emerald);color:#03130c;padding:10px 16px;border-radius:0 0 12px 0;z-index:200} .skip:focus{left:0} /* Film grain over everything, very faint */ .grain{ position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 9s steps(10) infinite; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 20%{transform:translate(3%,2%)} 30%{transform:translate(-2%,3%)} 40%{transform:translate(4%,-2%)} 50%{transform:translate(-3%,4%)} 60%{transform:translate(2%,-3%)} 70%{transform:translate(-4%,2%)} 80%{transform:translate(3%,3%)} 90%{transform:translate(-2%,-2%)} } /* Scroll progress hairline */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120} .progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--emerald),var(--gold));} /* ============ Type ============ */ h1,h2,h3,.cov-amount,.rev-score{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.01em} h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(2rem,4.4vw,3.2rem)} .em{ background:linear-gradient(100deg,var(--emerald-2) 10%,var(--emerald) 45%,var(--gold-2) 95%); -webkit-background-clip:text;background-clip:text;color:transparent; } .kicker{ font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--emerald-2);margin-bottom:18px; } .micro{font-size:.8rem;color:var(--ink-3)} /* ============ Buttons ============ */ .btn-primary{ display:inline-flex;align-items:center;gap:10px; background:linear-gradient(135deg,var(--emerald-2),var(--emerald) 60%,var(--emerald-deep)); color:#03130c;font-weight:600;font-size:1rem; padding:16px 28px;border-radius:999px; box-shadow:0 8px 32px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.35); transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s; will-change:transform; } .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 44px rgba(16,185,129,.5),inset 0 1px 0 rgba(255,255,255,.35)} .btn-primary svg{width:20px;height:20px} .btn-sm{padding:10px 20px;font-size:.9rem} .btn-lg{padding:19px 36px;font-size:1.1rem} .btn-ghost{ display:inline-flex;align-items:center;gap:8px; color:var(--ink);font-weight:500;font-size:1rem; padding:16px 26px;border-radius:999px; border:1px solid var(--line);background:var(--glass); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:border-color .25s,background .25s; } .btn-ghost:hover{border-color:rgba(52,211,153,.5);background:var(--glass-2)} /* ============ Nav ============ */ .nav{position:fixed;top:14px;left:0;right:0;z-index:110;display:flex;justify-content:center;padding:0 16px} .nav-inner{ display:flex;align-items:center;gap:28px; background:rgba(7,11,18,.55); border:1px solid var(--line); border-radius:999px;padding:8px 10px 8px 18px; backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); box-shadow:0 10px 40px rgba(0,0,0,.45); transition:background .3s; } .nav.scrolled .nav-inner{background:rgba(7,11,18,.82)} .brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1.1rem} .brand img{border-radius:7px} .nav-links{display:flex;gap:22px;font-size:.92rem;color:var(--ink-2)} .nav-links a{transition:color .2s} .nav-links a:hover{color:var(--ink)} /* ============ Hero ============ */ .hero{ position:relative;min-height:100svh; display:flex;align-items:center; overflow:hidden; } #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1} .hero-veil{ position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(ellipse 75% 60% at 28% 42%,rgba(4,6,10,.78) 0%,rgba(4,6,10,.25) 55%,transparent 75%), linear-gradient(to bottom,rgba(4,6,10,.55),transparent 22%,transparent 72%,var(--bg) 100%); } .hero-grid{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:minmax(0,600px) 1fr;align-items:center} .hero-copy{padding:120px 0 80px} .hero-copy h1{font-size:clamp(3rem,7.2vw,5.8rem);line-height:1.04;display:flex;flex-direction:column} .h1-line{display:block} .word-slot{position:relative;display:block;height:1.12em} .word{ position:absolute;left:0;top:0;white-space:nowrap; opacity:0;transform:translateY(.45em); transition:opacity .25s ease,transform .25s cubic-bezier(.2,.9,.3,1.1); } .word.is-active{opacity:1;transform:translateY(0)} .word.is-leaving{opacity:0;transform:translateY(-.4em)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:40px 0 18px} .hero .micro{letter-spacing:.04em} .micro-stars{color:var(--gold)} .scroll-cue{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:8px; font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3); } .scroll-cue i{width:1px;height:34px;background:linear-gradient(to bottom,var(--emerald),transparent);animation:cue 1.8s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}} /* ============ How it works: scroll story ============ */ .story{padding:16vh 0 6vh} .moment{ display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; padding:11vh 0; } .moment.flip .m-copy{order:2} .moment.flip .m-art{order:1;justify-content:flex-start} .m-num{ font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.16em;color:var(--emerald-2); display:inline-flex;align-items:center;gap:10px;margin-bottom:14px; } .m-num::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--emerald),transparent)} .m-copy h3{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:12px} .m-copy p{color:var(--ink-2);font-size:1.05rem;max-width:24em} .m-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px} /* free-floating art, no boxes */ .paper{ position:relative;width:min(320px,80%); background:linear-gradient(100deg,#e9e5d8,#f8f5ec 50%,#e6e2d4); border-radius:6px;padding:26px 26px 30px; display:flex;flex-direction:column;gap:12px;overflow:hidden; transform:rotate(-2.5deg); box-shadow:0 30px 70px -18px rgba(0,0,0,.7),0 18px 50px -14px rgba(16,185,129,.22); } .paper-title{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:.95rem;color:#26241c;letter-spacing:.12em;text-align:center;margin-bottom:6px} .mr-line{height:8px;border-radius:4px;background:rgba(38,36,28,.28)} .mr-line.w70{width:70%}.mr-line.w50{width:50%}.mr-line.w62{width:62%}.mr-line.w44{width:44%}.mr-line.w58{width:58%} .mr-scan{ position:absolute;left:-8%;right:-8%;height:26px;top:0; background:linear-gradient(to bottom,transparent,rgba(16,185,129,.55),transparent); animation:mrscan 2.8s ease-in-out infinite; } @keyframes mrscan{0%,100%{top:-12%}50%{top:96%}} .float-item{ display:flex;justify-content:space-between;align-items:center;gap:24px; width:min(340px,86%); font-family:'Courier New',Courier,monospace;font-weight:700;font-size:1.05rem;color:var(--ink); border-bottom:1px dashed rgba(255,255,255,.22);padding-bottom:14px; transform:rotate(-1deg); } .float-item b{color:var(--emerald-2)} .float-avatars{display:flex;gap:16px;transform:rotate(-1deg)} .av{ position:relative;width:46px;height:46px;border-radius:99px;flex-shrink:0;overflow:hidden; display:inline-flex;align-items:center;justify-content:center; font-weight:700;font-size:1.05rem;color:#04130d; box-shadow:0 10px 26px -8px rgba(0,0,0,.6); } .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .av-v{background:#34d399} .av-j{background:#7cc0e8} .av-m{background:#ffd27a} .av-s{background:#c9b8ff} .av.on{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--emerald-2),0 10px 26px -8px rgba(0,0,0,.6)} .float-row{ display:flex;align-items:center;gap:14px;width:min(340px,86%); font-size:1.05rem;color:var(--ink-2); } .float-row span:not(.av){flex:1} .float-row b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:1.1rem} .float-row b.ok{color:var(--emerald-2)} .float-row .av{width:38px;height:38px;font-size:.9rem} .rail-dot{width:12px;height:12px;border-radius:99px;flex-shrink:0} .d-venmo{background:var(--venmo)} .d-cash{background:var(--cashapp)} .d-apple{background:#e7edea} /* ============ Versus ============ */ .versus{padding:130px 0 40px} .vs-head{text-align:center;margin-bottom:48px;text-transform:lowercase} .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto} .vs-card{ position:relative;border-radius:var(--r-lg);padding:34px 36px; border:1px solid var(--line);background:var(--glass); } .vs-card h3{font-size:1.5rem;margin-bottom:18px} .vs-card ul{list-style:none} .vs-card li{ position:relative;padding:9px 0 9px 30px;color:var(--ink-2);font-size:.98rem; border-top:1px solid rgba(255,255,255,.05); } .vs-card li:first-child{border-top:0} .vs-card li::before{position:absolute;left:0;top:9px} .vs-old{opacity:.85} .vs-old h3{color:var(--ink-2)} .vs-old li::before{content:"\2715";color:#e0654f;font-size:.8rem;top:12px} .vs-old li{color:var(--ink-3)} .vs-new{ border-color:rgba(52,211,153,.4); background:linear-gradient(160deg,rgba(16,185,129,.12),rgba(16,185,129,.03)); box-shadow:0 24px 70px -30px rgba(16,185,129,.4); } .vs-new li::before{content:"\2713";color:var(--emerald-2);font-weight:700} .vs-new li{color:var(--ink-2)} .vs-badge{ position:absolute;top:-13px;left:34px; font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:#03130c;background:linear-gradient(135deg,var(--emerald-2),var(--emerald)); padding:5px 13px;border-radius:999px;box-shadow:0 6px 20px rgba(16,185,129,.4); } /* ============ FAQ ============ */ .faq{padding:60px 0 90px} .faq-wrap{max-width:720px} .faq h2{text-align:center;margin-bottom:40px} .faq-list{display:flex;flex-direction:column;gap:12px} .faq details{ border:1px solid var(--line);border-radius:var(--r-md); background:var(--glass);overflow:hidden; transition:border-color .25s,background .25s; } .faq details[open]{border-color:rgba(52,211,153,.35);background:var(--glass-2)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; cursor:pointer;list-style:none; font-weight:600;font-size:1.02rem;padding:18px 22px; } .faq summary::-webkit-details-marker{display:none} .faq-x{position:relative;width:14px;height:14px;flex-shrink:0} .faq-x::before,.faq-x::after{ content:"";position:absolute;inset:0;margin:auto;background:var(--emerald-2); transition:transform .3s; } .faq-x::before{width:14px;height:2px} .faq-x::after{width:2px;height:14px} .faq details[open] .faq-x::after{transform:rotate(90deg)} .faq details p{padding:0 22px 20px;color:var(--ink-2);font-size:.96rem;max-width:38em} .faq-more{text-align:center;margin-top:28px;color:var(--ink-3);font-size:.95rem} .faq-more a{color:var(--emerald-2);font-weight:500} .faq-more a:hover{text-decoration:underline} /* ============ Trust lines ============ */ .trust{text-align:center;padding:14vh 0 10vh} .trust-line{ font-family:var(--display);font-weight:500; font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.35; color:var(--ink-2);margin:18px 0; } .trust-line b{font-weight:600;color:var(--emerald-2)} /* ============ Reviews ============ */ .reviews{padding:60px 0 90px} .rev-head{text-align:center;margin-bottom:48px} .rev-score{font-size:clamp(3.6rem,7vw,5.4rem);font-weight:700} .rev-stars{color:var(--gold);font-size:1.5rem;letter-spacing:.32em;margin:4px 0 10px} .rev-cap{color:var(--ink-2)} .rev-cap strong{color:var(--ink)} .rev-marquee{display:flex;flex-direction:column;gap:18px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .rev-row{display:flex;gap:18px;width:max-content;animation:marq 56s linear infinite} .rev-row.rtl{animation:marq 64s linear infinite reverse} .rev-marquee:hover .rev-row{animation-play-state:paused} @keyframes marq{to{transform:translateX(-50%)}} .rev-card{ width:340px;flex-shrink:0; border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); padding:24px 26px; } .rc-stars{color:var(--gold);font-size:.85rem;letter-spacing:.2em;margin-bottom:12px} .rev-card h3{font-size:1.05rem;margin-bottom:10px} .rev-card p{font-size:.92rem;color:var(--ink-2);line-height:1.55} .rc-author{margin-top:14px;font-size:.8rem;color:var(--ink-3)} .rc-author b{color:var(--ink-2)} /* ============ Final CTA ============ */ .cta-final{position:relative;text-align:center;padding:140px 0 150px;overflow:hidden} .cta-glow{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 55% 55% at 50% 62%,rgba(16,185,129,.16),transparent 70%); } .cta-crown{margin:0 auto 22px;filter:drop-shadow(0 6px 24px rgba(245,176,66,.45))} .cta-sub{color:var(--ink-2);margin:20px 0 34px} .cta-final .micro{margin-top:20px} /* ============ Footer ============ */ footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 0 36px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px} .foot-brand p{color:var(--ink-3);font-size:.9rem;margin-top:14px;max-width:22em} .foot-col h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px} .foot-col a{display:block;color:var(--ink-2);font-size:.95rem;padding:5px 0;transition:color .2s} .foot-col a:hover{color:var(--emerald-2)} .foot-base{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:14px;padding-top:34px;font-size:.82rem;color:var(--ink-3)} /* ============ Reveal-on-scroll ============ */ html.js .rv{opacity:0;transform:translateY(26px)} /* ============ Responsive ============ */ @media (max-width:1024px){ } @media (max-width:880px){ .nav-links{display:none} .nav-inner .btn-primary{display:none} .nav-inner{padding:8px 18px} .hero-grid{grid-template-columns:1fr} .hero-copy{padding:130px 0 110px;text-align:center} .hero-cta{justify-content:center} .word{left:50%;transform:translateX(-50%) translateY(.45em)} .word.is-active{transform:translateX(-50%) translateY(0)} .word.is-leaving{transform:translateX(-50%) translateY(-.4em)} .hero-veil{background: radial-gradient(ellipse 110% 70% at 50% 45%,rgba(4,6,10,.82) 0%,rgba(4,6,10,.4) 60%,transparent 80%), linear-gradient(to bottom,rgba(4,6,10,.6),transparent 25%,transparent 70%,var(--bg) 100%);} .moment{grid-template-columns:1fr;gap:36px;padding:8vh 0;text-align:center} .moment.flip .m-copy{order:1} .moment.flip .m-art{order:2} .m-copy p{margin:0 auto} .m-num::after{display:none} .story{padding:10vh 0 4vh} .trust{padding:10vh 0 8vh} .trust-line{margin:34px 0} .trust-line b{display:block;font-size:1.5em;margin-bottom:6px} .trust-line span{font-size:.72em;font-family:var(--body);color:var(--ink-2)} .vs-grid{grid-template-columns:1fr;gap:26px} .versus{padding:90px 0 20px} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ body{font-size:16px} .wrap{padding:0 20px} .rev-card{width:290px;padding:20px 22px} .foot-base{flex-direction:column;gap:8px;padding-top:30px;margin-top:20px;padding-bottom:10px} } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .grain{display:none} .rev-row{animation:none;width:auto;flex-wrap:wrap} .rev-marquee{mask-image:none;-webkit-mask-image:none} html{scroll-behavior:auto} } /* ============ Subpages (privacy / terms / support) ============ */ .subpage{background:var(--bg)} .legal{max-width:760px;padding-bottom:90px} .page-head{padding:150px 0 18px} .page-head h1{font-size:clamp(2.4rem,5.4vw,3.8rem)} .page-updated{color:var(--ink-3);font-size:.92rem;margin-top:12px} .page-updated a{color:var(--emerald-2)} .page-updated a:hover{text-decoration:underline} .toc{margin:26px 0 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)} .toc summary{cursor:pointer;list-style:none;font-weight:600;font-size:.95rem;padding:14px 20px;color:var(--ink-2)} .toc summary::-webkit-details-marker{display:none} .toc[open] summary{color:var(--emerald-2)} .toc-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;padding:0 20px 18px} .toc-list a{color:var(--ink-2);font-size:.9rem;padding:4px 0;transition:color .2s} .toc-list a:hover{color:var(--emerald-2)} .legal .block{margin-top:38px} .legal h2{font-size:1.5rem;margin-bottom:14px;scroll-margin-top:110px} .legal h3{font-size:1.05rem;margin:22px 0 8px;color:var(--ink)} .legal p{color:var(--ink-2);font-size:.98rem;margin-bottom:12px} .legal ul,.legal ol{color:var(--ink-2);font-size:.98rem;padding-left:22px;margin-bottom:12px} .legal li{margin-bottom:6px} .legal a{color:var(--emerald-2)} .legal a:hover{text-decoration:underline} .legal table{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--ink-2);margin-bottom:14px} .legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)} .legal th{color:var(--ink);font-weight:600} .support-page .faq-list{margin-top:30px} .support-contact{text-align:center;margin-top:70px} .support-contact h2{font-size:1.8rem;margin-bottom:10px} .support-contact p{color:var(--ink-2);margin-bottom:22px} @media (max-width:640px){ .toc-list{grid-template-columns:1fr} .page-head{padding:130px 0 12px} } .sub-faq{padding:10px 0 0} .legal a.btn-primary{color:#03130c} .legal a.btn-primary:hover{text-decoration:none}