/* ============================================================================ HourBust — landing page Loaded after styles.css; reuses its tokens and primitives. ========================================================================= */ body.landing { background: var(--bg); } /* Animated aurora backdrop, fixed behind everything. */ .aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .aurora__blob:nth-child(1) { width: 620px; height: 620px; top: -230px; left: -120px; background: radial-gradient(circle, rgba(61,220,151,.42), transparent 68%); animation: drift-a 26s var(--ease) infinite alternate; } .aurora__blob:nth-child(2) { width: 700px; height: 700px; top: -300px; right: -180px; background: radial-gradient(circle, rgba(124,92,255,.44), transparent 68%); animation: drift-b 32s var(--ease) infinite alternate; } .aurora__blob:nth-child(3) { width: 520px; height: 520px; top: 44%; left: 42%; background: radial-gradient(circle, rgba(34,211,238,.26), transparent 68%); animation: drift-c 38s var(--ease) infinite alternate; } @keyframes drift-a { to { transform: translate3d(120px, 90px, 0) scale(1.14); } } @keyframes drift-b { to { transform: translate3d(-140px, 120px, 0) scale(1.1); } } @keyframes drift-c { to { transform: translate3d(-180px, -110px, 0) scale(1.2); } } .grid-lines { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(120, 150, 200, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 200, .045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 12%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 12%, transparent 76%); } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ── Header ────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 40; transition: background .25s var(--ease), border-color .25s var(--ease), backdrop-filter .25s; border-bottom: 1px solid transparent; } .site-header.stuck { background: rgba(6,10,18,.78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; gap: 18px; height: 70px; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: 20px; } .site-nav a { padding: 8px 13px; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--text-2); transition: var(--dur) var(--ease); } .site-nav a:hover { color: var(--text); background: rgba(255,255,255,.05); } .site-header__spacer { flex: 1; } .site-header__cta { display: flex; align-items: center; gap: 9px; } .burger { display: none; background: transparent; border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; width: 40px; height: 38px; cursor: pointer; padding: 0; place-items: center; } .burger span { display: block; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px; } .burger span + span { margin-top: 4px; } .mobile-menu { display: none; padding: 14px 0 20px; border-top: 1px solid var(--border); } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 12px 4px; font-size: 1rem; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); } .mobile-menu a:hover { color: var(--text); } .mobile-menu .btn { margin-top: 16px; } /* ── Reveal on scroll ──────────────────────────────────────────────────────── Gated on the `js` class that index.html sets in . Without it the whole page would sit at opacity 0 for anyone (or any crawler) that does not run scripts — invisible text is both a broken page and a spam signal. Visitors who asked for less motion get the content outright, no fade. */ html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } } /* ── Sections ──────────────────────────────────────────────────────────── */ .section { padding: 96px 0; position: relative; } .section--tight { padding: 64px 0; } .section__head { max-width: 660px; margin: 0 auto 52px; text-align: center; } .section__head .eyebrow { margin-bottom: 14px; } .section__head h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.038em; margin-bottom: 14px; } .section__head p { color: var(--text-2); font-size: 1.03rem; } .section-sep { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent); } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { padding: 72px 0 80px; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 6px 8px 6px 6px; border-radius: 99px; background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.24); font-size: .8rem; color: #B6F5D8; } .hero__badge b { background: var(--grad); color: var(--accent-ink); font-weight: 800; padding: 3px 9px; border-radius: 99px; font-size: .72rem; letter-spacing: .01em; } .hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.03; letter-spacing: -.048em; margin-bottom: 22px; } .hero__lead { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text-2); max-width: 540px; margin-bottom: 32px; line-height: 1.62; } .hero__lead b { color: var(--text); font-weight: 700; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero__note { margin-top: 18px; font-size: .84rem; color: var(--text-3); display: flex; align-items: center; gap: 8px; } .hero__note .tick { color: var(--mint); display: inline-grid; place-items: center; } .hero__note .tick .ico { width: 15px; height: 15px; stroke-width: 2.4; } /* Live counters */ .livebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); } .livebar__cell { background: rgba(13,19,32,.72); padding: 15px 17px; } .livebar__val { font-size: 1.6rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; } .livebar__val.accent { color: var(--mint); } .livebar__lbl { font-size: .74rem; color: var(--text-3); margin-top: 3px; } .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 6px; vertical-align: middle; animation: pulse-dot 1.8s var(--ease) infinite; } /* ── Hero mock panel ───────────────────────────────────────────────────── */ .mock { position: relative; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.09); background: linear-gradient(170deg, rgba(24,35,55,.94), rgba(8,12,20,.97)); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(61,220,151,.06); overflow: hidden; transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateZ(0); transition: transform .5s var(--ease); } .mock:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1.5deg); } .mock::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 42%); } .mock__bar { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); } .mock__dots { display: flex; gap: 6px; } .mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-4); display: block; } .mock__dots i:first-child { background: #ff5f57; } .mock__dots i:nth-child(2) { background: #febc2e; } .mock__dots i:nth-child(3) { background: #28c840; } .mock__title { font-size: .76rem; color: var(--text-3); margin-left: 6px; font-family: var(--mono); } .mock__body { padding: 16px; display: grid; gap: 11px; } .mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .mock__kpi { background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 10px 11px; } .mock__kpi span { font-size: .64rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 750; } .mock__kpi b { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -.035em; margin-top: 2px; font-variant-numeric: tabular-nums; } .mock__row { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; } /* The mock rows carry real capsule art for the game each account is boosting. */ .mock__av { width: 44px; aspect-ratio: 231 / 87; height: auto; border-radius: 7px; flex: none; } .mock__av > i { font-size: .54rem; } .mock__row .who { min-width: 0; flex: 1; } .mock__row .who b { display: block; font-size: .86rem; font-weight: 700; } .mock__row .who span { font-size: .72rem; color: var(--text-3); } .mock__hrs { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--mint); flex: none; } .mock__badge { font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; flex: none; background: rgba(61,220,151,.13); color: var(--mint); border: 1px solid rgba(61,220,151,.3); } .mock__badge--wait { background: rgba(255,180,84,.12); color: var(--amber); border-color: rgba(255,180,84,.3); } .mock__badge--off { background: rgba(255,255,255,.04); color: var(--text-3); border-color: var(--border); } .mock-float { position: absolute; z-index: 2; border-radius: 14px; padding: 11px 14px; background: rgba(14,20,32,.92); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); box-shadow: var(--shadow); font-size: .8rem; display: flex; align-items: center; gap: 10px; animation: bob 5s var(--ease) infinite alternate; } .mock-float b { display: block; font-weight: 750; font-size: .84rem; } .mock-float span { color: var(--text-3); font-size: .72rem; } .mock-float__ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; } .mock-float__ico .ico { width: 15px; height: 15px; } /* Floating cards overlap the shell's padding only — never its title bar or the last account row, which used to hide real numbers behind them. */ .mock-float--tl { top: -34px; left: -26px; } .mock-float--br { bottom: -34px; right: -20px; animation-delay: -2.5s; } @keyframes bob { to { transform: translateY(-9px); } } .mock-shell { position: relative; } /* ── Marquee ───────────────────────────────────────────────────────────── */ .marquee { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(8,13,22,.5); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee__track { display: flex; gap: 44px; width: max-content; animation: scroll-x 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes scroll-x { to { transform: translateX(-50%); } } .marquee__item { display: flex; align-items: center; gap: 11px; font-size: .93rem; color: var(--text-2); font-weight: 650; white-space: nowrap; } .marquee__item .gart { width: 62px; border-radius: 6px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.8); } .marquee__item .ico { color: var(--mint); opacity: .85; } /* ── Steps ─────────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: st; } .step { position: relative; padding: 26px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(18,27,42,.6), rgba(10,15,24,.5)); transition: border-color var(--dur), transform var(--dur) var(--ease); } .step:hover { border-color: var(--border-strong); transform: translateY(-3px); } .step__num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; margin-bottom: 16px; background: rgba(255,255,255,.045); border: 1px solid var(--border-strong); color: var(--text-2); } .step:nth-child(1) .step__num { background: rgba(61,220,151,.13); border-color: rgba(61,220,151,.3); color: var(--mint); } .step:nth-child(2) .step__num { background: rgba(34,211,238,.13); border-color: rgba(34,211,238,.3); color: var(--cyan); } .step:nth-child(3) .step__num { background: rgba(124,92,255,.15); border-color: rgba(124,92,255,.32); color: #B6A4FF; } .step:nth-child(4) .step__num { background: rgba(255,180,84,.13); border-color: rgba(255,180,84,.3); color: var(--amber); } .step h3 { font-size: 1.05rem; margin-bottom: 9px; letter-spacing: -.025em; } .step p { color: var(--text-2); font-size: .89rem; line-height: 1.6; } .step__arrow { position: absolute; top: 46px; right: -16px; color: var(--border-strong); z-index: 1; display: grid; place-items: center; } .steps .step:last-child .step__arrow { display: none; } /* ── Feature grid ──────────────────────────────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(18,27,42,.55), rgba(10,15,24,.45)); transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); } .feature:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow); } .feature::after { content: ""; position: absolute; top: -60%; left: -20%; width: 70%; height: 100%; background: radial-gradient(circle at 40% 50%, var(--f-glow, rgba(61,220,151,.13)), transparent 70%); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); } .feature:hover::after { opacity: 1; } .feature__ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; background: var(--f-bg, rgba(61,220,151,.12)); color: var(--f-fg, var(--mint)); border: 1px solid var(--f-br, rgba(61,220,151,.24)); } .feature__ico .ico { width: 21px; height: 21px; stroke-width: 1.55; } .feature h3 { font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.024em; } .feature p { color: var(--text-2); font-size: .88rem; line-height: 1.6; } .feature--cyan { --f-glow: rgba(34,211,238,.13); --f-bg: rgba(34,211,238,.12); --f-fg: var(--cyan); --f-br: rgba(34,211,238,.24); } .feature--violet { --f-glow: rgba(124,92,255,.15); --f-bg: rgba(124,92,255,.14); --f-fg: #B6A4FF; --f-br: rgba(124,92,255,.28); } .feature--amber { --f-glow: rgba(255,180,84,.13); --f-bg: rgba(255,180,84,.12); --f-fg: var(--amber); --f-br: rgba(255,180,84,.24); } .feature--blue { --f-glow: rgba(89,169,255,.13); --f-bg: rgba(89,169,255,.12); --f-fg: var(--blue); --f-br: rgba(89,169,255,.24); } .feature--rose { --f-glow: rgba(255,93,108,.12); --f-bg: rgba(255,93,108,.11); --f-fg: var(--rose); --f-br: rgba(255,93,108,.24); } /* ── Games ───────────────────────────────────────────────────────────────── A grid of the titles people actually idle. Real capsule art earns the space: it makes the list scannable by cover. Both text lines are single-line so every card in a row is the same height whatever the title length. */ .gamegrid { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); } .gamecard { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(18,27,42,.5), rgba(10,15,24,.4)); transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); } .gamecard:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .gamecard .gart { width: 78px; flex: none; } .gamecard__txt { display: grid; gap: 3px; min-width: 0; } .gamecard__txt b, .gamecard__txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gamecard__txt b { font-size: .88rem; font-weight: 700; letter-spacing: -.02em; } .gamecard__txt span { font-size: .7rem; color: var(--text-3); } .gamegrid__note { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 22px; color: var(--text-2); font-size: .92rem; text-align: left; } /* Search phrases this page answers. Presented as what it is — a list of topics — so it reads as navigation help rather than hidden text. */ .tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 30px auto 0; max-width: 980px; justify-content: center; } .tagcloud__lbl { width: 100%; text-align: center; margin-bottom: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .tag { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: .76rem; color: var(--text-2); transition: var(--dur) var(--ease); } .tag:hover { border-color: rgba(61,220,151,.3); color: var(--text); } /* ── Free plan / pricing ───────────────────────────────────────────────── */ .plan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; align-items: center; } .plan { position: relative; padding: 34px; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(165deg, rgba(28,42,64,.85), rgba(9,14,23,.95)); border: 1px solid rgba(61,220,151,.26); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); } .plan::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(61,220,151,.6), transparent 38%, transparent 62%, rgba(124,92,255,.45)); -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; } .plan__ribbon { position: absolute; top: 20px; right: 20px; background: var(--grad); color: var(--accent-ink); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; } .plan__name { font-size: 1.02rem; font-weight: 750; color: var(--text-2); } .plan__price { display: flex; align-items: flex-end; gap: 10px; margin: 10px 0 4px; } .plan__price b { font-size: 3.6rem; font-weight: 800; letter-spacing: -.055em; line-height: .95; } .plan__price span { color: var(--text-3); font-size: .92rem; padding-bottom: 9px; } .plan__sub { color: var(--text-3); font-size: .87rem; margin-bottom: 24px; } .plan__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; } .plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; } .plan__list .tick { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; background: rgba(61,220,151,.15); color: var(--mint); margin-top: 1px; border: 1px solid rgba(61,220,151,.26); } .plan__list .tick .ico { width: 12px; height: 12px; stroke-width: 2.6; } .plan__foot { font-size: .78rem; color: var(--text-3); text-align: center; margin-top: 14px; } .plan-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); letter-spacing: -.04em; margin-bottom: 16px; } .plan-copy p { color: var(--text-2); font-size: 1.02rem; line-height: 1.68; margin-bottom: 16px; } .plan-copy p b { color: var(--text); } .limit-callout { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid rgba(61,220,151,.24); background: linear-gradient(120deg, rgba(61,220,151,.08), rgba(34,211,238,.05)); } .limit-callout__num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; flex: none; } .limit-callout__txt strong { display: block; font-size: .96rem; font-weight: 750; margin-bottom: 3px; } .limit-callout__txt span { font-size: .84rem; color: var(--text-3); } /* ── Slots visual (10 accounts) ────────────────────────────────────────── */ .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; } .slot { aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; border: 1px dashed var(--border-strong); color: var(--text-3); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.018); animation: slot-fill .5s var(--ease) both; } .slot--on { border-style: solid; border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.11); color: var(--mint); } @keyframes slot-fill { from { opacity: 0; transform: scale(.86); } } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq { max-width: 800px; margin: 0 auto; display: grid; gap: 11px; } .faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: rgba(18,27,42,.42); overflow: hidden; transition: border-color var(--dur), background var(--dur); } .faq__item.open { border-color: rgba(61,220,151,.3); background: rgba(18,27,42,.7); } .faq__q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; color: var(--text); font-size: .99rem; font-weight: 650; letter-spacing: -.018em; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq__q:hover { color: #fff; } .faq__mark { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--text-3); font-size: 1rem; line-height: 1; transition: var(--dur) var(--ease); } .faq__item.open .faq__mark { transform: rotate(45deg); background: rgba(61,220,151,.14); border-color: rgba(61,220,151,.3); color: var(--mint); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); } .faq__item.open .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 20px 19px; color: var(--text-2); font-size: .92rem; line-height: 1.68; max-width: 70ch; } .faq__a p + p { padding-top: 0; margin-top: -8px; } /* ── Final CTA ─────────────────────────────────────────────────────────── */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 58px 44px; text-align: center; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(700px 300px at 22% 0%, rgba(61,220,151,.20), transparent 62%), radial-gradient(640px 300px at 82% 108%, rgba(124,92,255,.24), transparent 62%), linear-gradient(165deg, rgba(22,33,52,.9), rgba(8,12,20,.94)); box-shadow: var(--shadow-lg); } .cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: -.042em; margin-bottom: 14px; } .cta-band p { color: var(--text-2); font-size: 1.04rem; max-width: 560px; margin: 0 auto 30px; } .cta-band__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 52px 0 34px; margin-top: 40px; background: rgba(6,10,17,.6); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 38px; } .footer__about p { color: var(--text-3); font-size: .87rem; margin-top: 14px; max-width: 300px; line-height: 1.65; } .footer__col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 14px; font-weight: 800; } .footer__col a, .footer__col span { display: block; color: var(--text-2); font-size: .88rem; padding: 5px 0; transition: color var(--dur); } .footer__col a:hover { color: var(--mint); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .81rem; color: var(--text-3); flex-wrap: wrap; } .footer__bottom .dis { max-width: 620px; line-height: 1.6; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; gap: 48px; } .mock { transform: none; } .mock:hover { transform: none; } .mock-float--tl { left: 6px; top: -30px; } .mock-float--br { right: 6px; bottom: -30px; } .plan-wrap { grid-template-columns: 1fr; gap: 30px; } .steps { grid-template-columns: repeat(2, 1fr); } .step__arrow { display: none; } .features { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } /* The nav grew a fifth link, so it folds into the burger a little earlier. */ @media (max-width: 940px) { .site-nav { display: none; } .burger { display: grid; } .site-header__cta .btn--ghost { display: none; } } @media (max-width: 640px) { .wrap { padding: 0 16px; } .section { padding: 64px 0; } .section__head { margin-bottom: 36px; } .hero { padding: 46px 0 56px; } .hero h1 { letter-spacing: -.04em; } .steps, .features { grid-template-columns: 1fr; } .livebar { grid-template-columns: 1fr; } .plan { padding: 24px; } .plan__price b { font-size: 2.9rem; } .cta-band { padding: 40px 22px; } .footer__grid { grid-template-columns: 1fr; } .slots { grid-template-columns: repeat(5, 1fr); } .limit-callout { gap: 12px; padding: 15px; } .limit-callout__num { font-size: 2.1rem; } .mock-float { display: none; } }