/* BASE */ body { background-color: #121212; color: #e5e7eb; overflow-x: hidden; font-family: 'Inter', sans-serif; } .hidden-forced { display: none !important; } .brand-font { font-weight: 800; letter-spacing: -0.03em; } .bg-gradient-pop { background-image: linear-gradient(to right, #ffffff, #92e07e, #adff2f); } /* NAVIGATION */ .nav-glass { background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; } .nav-btn { padding: 8px 24px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.3s ease; border: 1px solid transparent; text-transform: uppercase; } .nav-btn-inactive { color: #9ca3af; } .nav-btn-inactive:hover { color: white; background: rgba(255, 255, 255, 0.05); } .nav-btn-active { color: #92e07e; background: rgba(146, 224, 126, 0.1); border-color: rgba(146, 224, 126, 0.3); box-shadow: 0 0 20px rgba(146, 224, 126, 0.15); } /* ANIMATIONS */ .fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } @keyframes drift { from { background-position: 0 0; } to { background-position: 1000px 0; } } .animate-drift { animation: drift 80s linear infinite; } .animate-pulse { will-change: auto; } /* --- RESTORED CARD SHUFFLE ANIMATION (GPU OPTIMIZED) --- */ /* The top card lifts, banks and is dealt off to the right, then returns to the back of the stack out of sight and climbs steadily back to the front. The previous version cut straight from "gone" to "at the back" in a tenth of a second, which read as a glitch rather than a shuffle. */ @keyframes deck-cycle { 0%, 26% { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; } 33% { transform: translate3d(150px,-38px,0) rotate(13deg) scale(.95); opacity: 0; z-index: 3; } 34% { transform: translate3d(0,34px,0) rotate(-3deg) scale(.90); opacity: 0; z-index: 0; } 41%, 62% { transform: translate3d(0,22px,0) rotate(-2deg) scale(.93); opacity: .5; z-index: 1; } 70%, 92% { transform: translate3d(0,11px,0) rotate(-1deg) scale(.965); opacity: .8; z-index: 2; } 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; } } .deck-scene { position: relative; width: 250px; height: 300px; margin: 0 auto; contain: layout paint; } .deck-scene.is-idle .deck-card { animation-play-state: paused; } .deck-glow { position: absolute; inset: -50px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(146,224,126,.16), transparent 68%); } .deck-card { position: absolute; inset: 0; border-radius: 16px; padding: 20px; background: linear-gradient(160deg, #1b1b1b 0%, #0a0a0a 100%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 46px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); animation: deck-cycle 7.5s infinite cubic-bezier(.16,.84,.44,1); will-change: transform, opacity; } /* Stagger Delays for the 3 cards */ .card-1 { animation-delay: 0s; } .card-2 { animation-delay: -2.5s; } .card-3 { animation-delay: -5s; } /* Each card carries its own seed and lights a DIFFERENT option, so the claim the section makes - that no two papers come out alike - is visible in the graphic instead of only being asserted in the copy beside it. */ .deck-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #92e07e; border: 1px solid rgba(146,224,126,.35); border-radius: 5px; padding: 3px 7px; } .deck-q { height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); margin-bottom: 7px; } .deck-q.short { width: 62%; background: rgba(255,255,255,.12); } .deck-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.45); } .deck-opt i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); } .deck-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); flex-shrink: 0; } .deck-opt.on { border-color: #92e07e; background: rgba(146,224,126,.12); box-shadow: 0 0 16px rgba(146,224,126,.22); } .deck-opt.on .deck-dot { border-color: #92e07e; background: #92e07e; box-shadow: 0 0 10px rgba(146,224,126,.8); } .deck-opt.on i { background: rgba(146,224,126,.75); } /* Premium Middle Card Style */ .shuffle-card-middle { background: linear-gradient(145deg, #1a1a1a, #2a2a2a); border: 1px solid rgba(255, 255, 255, 0.05); transform: scale(0.95) translateY(10px); z-index: 2; box-shadow: 0 -4px 10px rgba(0,0,0,0.3); } /* Bottom Card Style */ .shuffle-card-bottom { background: #0a0a0a; border: 1px solid #111; transform: scale(0.9) translateY(20px); opacity: 0.5; z-index: 1; } /* Fake Text Lines (The Detail you liked) */ .fake-text-glow { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 8px; box-shadow: 0 0 5px rgba(255,255,255,0.05); } /* HOLDING PATTERN */ @keyframes orbit-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .orbit-container { animation: orbit-rotate 8s linear infinite; } @keyframes beacon-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 15px #92e07e; } } .beacon { animation: beacon-pulse 2s infinite ease-in-out; } /* COMPONENTS */ .glass-panel { background: rgba(30, 30, 30, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s, box-shadow 0.4s, background-color 0.4s; transform: translate3d(0,0,0); backface-visibility: hidden; } .glass-panel:hover { border-color: rgba(146, 224, 126, 0.5); background: rgba(30, 30, 30, 0.6); box-shadow: 0 0 30px rgba(146, 224, 126, 0.1); transform: translateY(-5px) scale(1.02); } .stats-box { background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(8px); border: 1px solid #333; border-radius: 16px; padding: 2rem; transition: all 0.3s ease; } .stats-box:hover { border-color: #92e07e; background: rgba(146, 224, 126, 0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px #92e07e; transform: translateY(-5px); } .price-card-pop { position: relative; background: rgba(20, 20, 20, 0.8); border: 2px solid #92e07e; box-shadow: 0 0 40px rgba(146, 224, 126, 0.1); transition: all 0.3s ease; } .price-card-pop:hover { box-shadow: 0 0 60px rgba(146, 224, 126, 0.25); transform: scale(1.05); } /* MISC ASSETS */ .input-tech { background-color: #000000 !important; border: 1px solid #333 !important; color: #92e07e !important; font-family: monospace; font-size: 1.1rem; letter-spacing: 0.15em; transition: all 0.3s; text-transform: uppercase; text-align: center; } .input-tech:focus { border-color: #92e07e !important; box-shadow: 0 0 15px rgba(146, 224, 126, 0.3) !important; outline: none; } .input-tech::placeholder { color: #374151 !important; } .star { animation: twinkle 4s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.2; transform: scale(0.8); } } .runway-light { width: 6px; height: 6px; background-color: #92e07e; border-radius: 50%; box-shadow: 0 0 8px #92e07e; margin: 20px 0; animation: pulse-green 1.5s infinite ease-in-out; } .threshold-stripe { width: 30px; height: 100px; background-color: rgba(255,255,255,0.85); display: inline-block; margin: 0 10px; box-shadow: 0 0 20px rgba(255,255,255,0.15); border-radius: 2px; } /* PLANE & TRAIL */ .plane-flyby { position: absolute; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.5s; } .contrail { position: absolute; right: 15px; top: 50%; width: 200px; height: 2px; background: linear-gradient(to left, rgba(146, 224, 126, 0.5), transparent); transform: translateY(-50%); filter: blur(3px); z-index: -1; } /* BACKGROUNDS */ .bg-sky { background: radial-gradient(circle at center, #1a1a1a 0%, #121212 100%); position: relative; overflow: hidden; } .bg-clouds-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='256' height='128' viewBox='0 0 256 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 80 A 20 20 0 0 1 25 40 A 30 30 0 0 1 75 40 A 30 30 0 0 1 125 40 A 20 20 0 0 1 125 80 Z' fill='%2392e07e' fill-opacity='0.08'/%3E%3Cpath d='M150 100 A 25 25 0 0 1 150 50 A 35 35 0 0 1 210 50 A 25 25 0 0 1 210 100 Z' fill='%2392e07e' fill-opacity='0.06'/%3E%3C/svg%3E"); background-size: 512px 256px; opacity: 0.6; } .bg-mountains-layered { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.82) 40%, rgba(10,10,10,.92) 100%); } /* MINECRAFT CHUNK LOADING (OCCLUSION CULLING) */ .render-chunk { content-visibility: auto; contain-intrinsic-size: 800px; } .render-chunk-large { content-visibility: auto; contain-intrinsic-size: 1500px; } /* ========================================================================= INTERACTION LAYER Purely additive. Nothing here changes the page's layout or content - it is driven by data-attributes so the renderers stay readable, and every effect degrades to "just visible" if JS never runs or the visitor has asked for reduced motion. ========================================================================= */ /* ---- Scroll reveal. Sections start displaced and settle as they enter view, which is what makes a long page feel authored. ---- */ [data-reveal] { opacity: 0; will-change: transform, opacity; transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); } [data-reveal="up"] { transform: translateY(42px); } [data-reveal="down"] { transform: translateY(-32px); } [data-reveal="left"] { transform: translateX(-48px); } [data-reveal="right"] { transform: translateX(48px); } [data-reveal="scale"] { transform: scale(.94); } [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; } /* ---- Headline word-by-word entrance ---- */ .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; } .word { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .95s cubic-bezier(.16,.84,.44,1), opacity .7s ease; } .is-in .word, .word.is-in { transform: translateY(0); opacity: 1; } /* ---- Reading-progress hairline under the nav ---- */ #scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: linear-gradient(90deg, #7ac466, #92e07e, #adff2f); box-shadow: 0 0 12px rgba(146,224,126,.7); transition: width .12s linear; z-index: 60; } nav.is-stuck { box-shadow: 0 10px 40px rgba(0,0,0,.7); } nav.is-stuck .nav-inner { height: 64px; } .nav-inner { transition: height .35s cubic-bezier(.16,.84,.44,1); } /* ---- Card tilt + cursor glow ---- */ [data-tilt] { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,.84,.44,1); } [data-tilt].is-tilting { transition: transform .1s linear; } .cursor-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(146,224,126,.16), transparent 68%); opacity: 0; transition: opacity .4s ease; z-index: 0; } [data-tilt]:hover .cursor-glow { opacity: 1; } /* ---- Buttons: sheen sweep + press ---- */ .btn-sheen { position: relative; overflow: hidden; } .btn-sheen::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .75s cubic-bezier(.16,.84,.44,1); } .btn-sheen:hover::before { left: 130%; } .btn-sheen:active { transform: translateY(1px) scale(.985); } /* ---- Bundles. The unit price is the number that actually sells a pack, so it gets its own line rather than being buried in the copy. ---- */ /* ---- Exam centre: two licence cards, one lit ---- */ .tier-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 14px; justify-content: center; } .tier-card { position: relative; text-align: left; padding: 22px 24px 20px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(168deg, rgba(30,34,30,.7), rgba(12,13,12,.92)); display: flex; flex-direction: column; gap: 2px; color: #9ca3af; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; } .tier-card:hover { transform: translateY(-3px); border-color: rgba(146,224,126,.4); } .tier-card-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #6b7280; transition: color .25s; padding-right: 34px; /* clear of the tick */ } .tier-card b { font-size: 2.4rem; font-weight: 900; letter-spacing: -.05em; line-height: 1.05; color: #e5e7eb; margin: 4px 0 6px; transition: color .25s; } .tier-card-m { font-size: .84rem; color: #9ca3af; } .tier-card-p { margin-top: 10px; font-size: .8rem; color: #6b7280; } .tier-card-p em { font-style: normal; font-weight: 800; color: #d1d5db; } .tier-card-on { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #0b0e0b; background: #92e07e; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s cubic-bezier(.16,.84,.44,1); } .tier-card-on svg { width: 13px; height: 13px; } .tier-card.is-on { border-color: rgba(146,224,126,.75); background: linear-gradient(168deg, rgba(146,224,126,.13), rgba(12,13,12,.95)); box-shadow: 0 20px 50px -20px rgba(146,224,126,.45), inset 0 1px 0 rgba(146,224,126,.25); } .tier-card.is-on .tier-card-k { color: #92e07e; } .tier-card.is-on b { color: #92e07e; } .tier-card.is-on .tier-card-p em { color: #fff; } .tier-card.is-on .tier-card-on { opacity: 1; transform: scale(1); } @media (max-width: 640px) { .tier-pick { grid-template-columns: 1fr 1fr; gap: 10px; } .tier-card { padding: 16px 16px 14px; } .tier-card b { font-size: 1.9rem; } .tier-card-m { font-size: .74rem; } } .tier-note { margin: 22px auto 0; max-width: 60ch; padding: 0 24px; text-align: center; color: #6b7280; font-size: .8rem; line-height: 1.6; } .bundle { position: relative; border-radius: 26px; padding: 34px 30px; overflow: hidden; background: linear-gradient(180deg, rgba(24,24,24,.95) 0%, rgba(10,10,10,.96) 100%); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .45s ease, box-shadow .45s ease; } .bundle::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); } .bundle:hover { transform: translateY(-7px); border-color: rgba(146,224,126,.45); box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 44px rgba(146,224,126,.1); } .bundle-best { padding-top: 62px; border-color: rgba(146,224,126,.85); background: linear-gradient(180deg, rgba(22,30,24,.97) 0%, rgba(8,10,9,.97) 100%); box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 60px rgba(146,224,126,.14); } .bundle-best::before { background: linear-gradient(90deg, transparent, #92e07e, transparent); box-shadow: 0 0 18px rgba(146,224,126,.9); } .bundle-best:hover { box-shadow: 0 36px 80px rgba(0,0,0,.8), 0 0 80px rgba(146,224,126,.22); } .bundle-ribbon { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: #92e07e; color: #0a0a0a; font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; padding: 5px 16px; border-radius: 99px; box-shadow: 0 6px 20px rgba(146,224,126,.45); white-space: nowrap; } .bundle-name { font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #6b7280; } .bundle-best .bundle-name { color: #92e07e; } .bundle-qty { font-weight: 900; letter-spacing: -.04em; color: #fff; line-height: 1; font-size: 3rem; margin-top: 6px; } .bundle-qty span { font-size: .9rem; font-weight: 700; color: #6b7280; letter-spacing: 0; margin-left: 6px; } /* CPL bundles carry a two-part qualifier; keep it on its own line under the number */ .bundle-qty em { display: block; margin-top: 8px; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #92e07e; } .bundle-save { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 3px 9px; border-radius: 6px; color: #92e07e; background: rgba(146,224,126,.1); border: 1px solid rgba(146,224,126,.3); } /* The unit price is the hero number - it is what makes packs comparable at a glance. */ .bundle-per { margin: 26px 0 22px; padding: 16px 0; text-align: center; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); } .bundle-per b { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; background: linear-gradient(180deg, #ffffff, #b9c2bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bundle-best .bundle-per b { background-image: linear-gradient(180deg, #ffffff, #92e07e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bundle-per i { display: block; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #6b7280; margin-top: 7px; } .bundle-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; } .bundle-total s { font-size: .8rem; color: #4b5563; text-decoration-color: rgba(239,68,68,.7); } .bundle-total b { font-size: 1.65rem; font-weight: 900; color: #fff; letter-spacing: -.02em; } .bundle-best .bundle-total b { font-size: 2rem; } .bundle-feat { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; } .bundle-feat span { display: flex; align-items: center; gap: 11px; font-size: .875rem; color: #d1d5db; } .bundle-feat i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; position: relative; background: rgba(146,224,126,.12); border: 1px solid rgba(146,224,126,.3); } .bundle-feat i::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 8px; border: solid #92e07e; border-width: 0 2px 2px 0; transform: rotate(45deg); } .bundle-cta { margin-top: auto; width: 100%; padding: 16px; border-radius: 14px; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #d1d5db; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; } .bundle-cta:hover { background: #fff; color: #0a0a0a; border-color: #fff; transform: translateY(-2px); } .bundle-cta-best { background: #92e07e; color: #0a0a0a; border-color: #92e07e; font-weight: 900; box-shadow: 0 10px 30px rgba(146,224,126,.28); } .bundle-cta-best:hover { background: #fff; border-color: #fff; box-shadow: 0 14px 40px rgba(146,224,126,.45); } /* ---- Reviews. A featured quote carrying the strongest line, with the rest arranged around it - hierarchy the old five-identical-cards carousel could not give, and no scroll buttons to discover. ---- */ /* Two lead quotes over three supporting ones, on a 6-column track. The spans are chosen so every row fills completely at every breakpoint - 2+3 on desktop, 2+2+1(full width) on tablet, stacked on mobile - so there is never a ragged hole where a card ran out. A masonry column-count layout balanced 5 items as 2/2/1 and left exactly that. */ .rev { position: relative; overflow: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; background: linear-gradient(165deg, rgba(24,24,24,.92) 0%, rgba(11,11,11,.92) 100%); border: 1px solid rgba(255,255,255,.07); transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .45s ease, box-shadow .45s ease; } .rev:hover { transform: translateY(-5px); border-color: rgba(146,224,126,.4); box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 40px rgba(146,224,126,.08); } .rev::before { content: '\201C'; position: absolute; top: -30px; right: 10px; font-size: 150px; line-height: 1; font-weight: 900; color: rgba(146,224,126,.07); pointer-events: none; transition: color .5s ease; } .rev:hover::before { color: rgba(146,224,126,.13); } .rev-stars { display: flex; gap: 3px; color: #92e07e; margin-bottom: 18px; } .rev-stars svg { width: 14px; height: 14px; filter: drop-shadow(0 0 5px rgba(146,224,126,.5)); } .rev-body { position: relative; z-index: 1; color: #d1d5db; font-size: .95rem; line-height: 1.7; margin-bottom: 22px; } .rev-foot { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); } .rev-av { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; color: #92e07e; background: rgba(146,224,126,.09); border: 1px solid rgba(146,224,126,.25); } .rev-who { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; } .rev-sub { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-top: 2px; } /* The featured one carries more weight: bigger type and a lit edge. */ .rev-lead { background: linear-gradient(165deg, rgba(26,32,27,.95) 0%, rgba(10,12,11,.95) 100%); border-color: rgba(146,224,126,.3); padding: 32px 30px; } .rev-lead::after { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #92e07e, rgba(146,224,126,0)); box-shadow: 0 0 16px rgba(146,224,126,.6); } .rev-lead .rev-body { font-size: 1.1rem; line-height: 1.62; color: #fff; font-weight: 500; } .rev-lead .rev-stars svg { width: 17px; height: 17px; } /* ---- Backdrop. A uniform 40px grid tiled edge to edge read as generic "tech wallpaper" and fought the ridgeline behind it. A major/minor chart grid that fades out down the page sits closer to a sectional and lets the mountains come through. ---- */ .chart-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(146,224,126,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(146,224,126,.05) 1px, transparent 1px), linear-gradient(rgba(146,224,126,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(146,224,126,.022) 1px, transparent 1px); background-size: 168px 168px, 168px 168px, 42px 42px, 42px 42px; -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%); mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%); } /* ---- Panels that hold a running animation opt out of the backdrop blur. Compositing a blurred backdrop underneath something that repaints every frame is the single most expensive thing the page can do, and at 92% opacity the blur was never visible anyway. ---- */ .panel-solid { background: rgba(10,10,10,.92) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ---- Stat band. Hairline dividers instead of floating boxes, so the three figures read as one instrument panel rather than three dull cards. ---- */ .stat-cell { position: relative; overflow: hidden; background: #0e0e0e; transition: background .5s ease; } .stat-cell:hover { background: #131313; } .stat-cell::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, #92e07e, transparent); box-shadow: 0 0 14px rgba(146,224,126,.8); transition: width .55s cubic-bezier(.16,.84,.44,1); } .stat-cell:hover::after { width: 72%; } .stat-figure { font-weight: 900; font-size: clamp(2.6rem, 5.5vw, 3.9rem); line-height: 1; letter-spacing: -.045em; background: linear-gradient(180deg, #ffffff 0%, #b9c2bd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-figure .u { -webkit-text-fill-color: #92e07e; font-size: .5em; margin-left: .08em; vertical-align: .42em; letter-spacing: 0; } .stat-rule { width: 34px; height: 2px; margin: 20px auto 14px; border-radius: 2px; background: rgba(255,255,255,.14); transition: width .5s ease, background .5s ease, box-shadow .5s ease; } .stat-cell:hover .stat-rule { width: 66px; background: #92e07e; box-shadow: 0 0 12px rgba(146,224,126,.7); } .stat-cap { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #9ca3af; transition: color .4s ease; } .stat-cell:hover .stat-cap { color: #fff; } /* ---- Scroll cue ---- */ @keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } .scroll-cue .cue-arrow { display: block; animation: cue 2.2s ease-in-out infinite; } /* ---- Exam interface niceties ---- */ .opt-row:hover { transform: translateX(6px); } /* ---- Film grain, very light, to stop the flat blacks banding ---- */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #0a0d0b; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #92e07e, #7ac466); border-radius: 8px; border: 3px solid #0a0d0b; } ::-webkit-scrollbar-thumb:hover { background: #adff2f; } /* ========================================================================= THE SOUTHERN ALPS Hero scenery only. Three ranges at different parallax rates for depth, with the snow line as its own layer so it can catch the alpenglow. ========================================================================= */ .hero-alps { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; width: 100%; will-change: transform; } .hero-alps.far { height: 33vh; min-height: 220px; z-index: 2; } .hero-alps.near { height: 17vh; min-height: 125px; z-index: 3; } .hero-scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(72% 56% at 50% 45%, rgba(5,8,7,.66) 0%, rgba(5,8,7,.34) 52%, rgba(5,8,7,0) 82%); } .alps-snow { fill: #cfdcd8; opacity: .38; filter: drop-shadow(0 0 9px rgba(255,177,140,.4)); } /* Alpenglow sitting on the ridge line, plus the cold glow above it */ .alps-glow { position: absolute; left: 50%; bottom: 2%; width: 96%; max-width: 1200px; height: 26vh; transform: translateX(-50%); pointer-events: none; z-index: 1; background: radial-gradient(58% 78% at 50% 100%, rgba(255,167,124,.13) 0%, transparent 66%), radial-gradient(72% 62% at 50% 100%, rgba(146,224,126,.10) 0%, transparent 62%); filter: blur(26px); } /* Snow lifting off the tops */ @keyframes mote { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .8; } 88% { opacity: .5; } 100% { transform: translateY(-58vh) translateX(var(--dx)); opacity: 0; } } .mote { position: absolute; bottom: -10px; width: 2px; height: 2px; border-radius: 50%; background: rgba(232,241,238,.9); box-shadow: 0 0 6px rgba(146,224,126,.7); pointer-events: none; z-index: 3; animation: mote linear infinite; } /* ---- A kiwi bustles along the ridge line, every now and then ---- */ @keyframes kiwi-step { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(3deg); } } .kiwi-runner { position: absolute; bottom: 4%; left: -170px; width: 78px; opacity: 0; z-index: 4; color: #04070500; color: rgba(3,6,4,.95); pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); } .kiwi-runner .hop { animation: kiwi-step .34s ease-in-out infinite; display: block; } /* ---- Respect the setting. Nothing here moves if the visitor opted out. ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .word { transform: none !important; opacity: 1 !important; } .kiwi-runner, .grain, .mote { display: none !important; } } /* ===================================================================== HOME PAGE, SECOND HALF. The hero is untouched; everything under it now tells one story - what a code buys, try a question, pick a licence, proof, the engine, the free paper, questions. Same green, same rounded glass, borrowed structure. ===================================================================== */ /* ---- The Alps, faintly, behind everything below the hero ---- */ .alps-fixed { position: fixed; left: 0; right: 0; bottom: 0; height: 44vh; z-index: -1; pointer-events: none; opacity: .55; } .alps-fixed svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; } .alps-fixed .far { fill: #161a17; } .alps-fixed .near { fill: #0e110f; } .alps-fixed .snow { fill: rgba(200,220,205,.10); } .alps-fixed .rim { fill: none; stroke: rgba(146,224,126,.14); stroke-width: 1.2; } .alps-fixed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #121212 0%, transparent 34%); } .band { position: relative; padding: 96px 0; } .band-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .band-kick { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #92e07e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; } .band-kick::before { content: ''; width: 16px; height: 1px; background: currentColor; } .band h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); } .band h2 em { font-style: normal; color: #92e07e; } .band-sub { margin-top: 16px; color: #9ca3af; font-size: 1.05rem; line-height: 1.65; max-width: 56ch; } .band-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(146,224,126,.45), transparent); } /* ---- Under the hero: what one code includes ---- */ .inc-band { background: rgba(11,12,11,.72); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); padding: 72px 0 80px; } .inc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); } .inc-price { flex-shrink: 0; text-align: right; } .inc-price b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.04em; color: #92e07e; line-height: .95; } .inc-price b small { font-size: .5em; color: #6b7280; font-weight: 700; letter-spacing: 0; margin-right: 6px; } .inc-price span { display: block; margin-top: 8px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .inc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .inc { position: relative; overflow: hidden; padding: 26px 22px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(168deg, rgba(30,34,30,.7), rgba(12,13,12,.9)); transition: border-color .2s ease, transform .2s ease, background .2s ease; } .inc[data-reveal] { transition-duration: .5s, .42s; } .inc:hover { border-color: rgba(146,224,126,.5); transform: translateY(-3px); } .inc-n { position: absolute; top: 18px; right: 18px; z-index: 2; color: rgba(255,255,255,.22); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .16px; transition: color .2s ease; } .inc:hover .inc-n { color: #92e07e; } .inc-mark { position: relative; z-index: 1; display: block; width: fit-content; height: 78px; margin-bottom: 22px; color: #92e07e; background: radial-gradient(62% 72% at 50% 52%, rgba(146,224,126,.16), transparent 72%); } .inc-mark svg { width: auto; height: 100%; display: block; overflow: visible; } .inc b { position: relative; z-index: 1; display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; margin-bottom: 8px; } .inc p { position: relative; z-index: 1; font-size: .84rem; line-height: 1.5; color: #9ca3af; } .inc::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: #92e07e; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s cubic-bezier(.16,.84,.44,1); } .inc:hover::after { transform: scaleX(1); } /* ---- Try one: the live sample question ---- */ .sq-band { padding: 100px 0; } .sq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .sq-tiers { display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .sq-tier { padding: 8px 16px; border-radius: 9px; border: 0; background: none; color: #9ca3af; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .sq-tier.is-on { background: #92e07e; color: #0b0e0b; } .sq { border-radius: 22px; overflow: hidden; border: 1px solid rgba(146,224,126,.2); background: linear-gradient(168deg, rgba(26,30,27,.96), rgba(10,12,11,.98)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); } .sq-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid rgba(146,224,126,.16); background: rgba(146,224,126,.05); } .sq-ref, .sq-of { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .sq-ref { color: #92e07e; } .sq-of { color: #6b7280; } .sq-body { padding: 30px 26px 26px; } .sq-q { font-size: 1.18rem; line-height: 1.5; font-weight: 600; color: #fff; margin-bottom: 24px; } .sq-opts { display: flex; flex-direction: column; gap: 10px; } .sq-opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); color: #d1d5db; font-size: .95rem; line-height: 1.45; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, opacity .3s; } .sq-opt:hover:not(.locked) { border-color: rgba(146,224,126,.55); background: rgba(146,224,126,.05); transform: translateX(4px); } .sq-opt .k { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); color: #9ca3af; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; } .sq-opt.right { border-color: #92e07e; background: rgba(146,224,126,.1); color: #fff; } .sq-opt.right .k { background: #92e07e; border-color: #92e07e; color: #0b0e0b; } .sq-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.09); } .sq-opt.wrong .k { background: #ef4444; border-color: #ef4444; color: #2b0606; } .sq-opt.locked { cursor: default; } .sq-opt.dim { opacity: .4; } .sq-why { display: none; margin-top: 22px; border-left: 2px solid #92e07e; padding: 18px 20px; border-radius: 0 14px 14px 0; background: rgba(146,224,126,.05); } .sq-why.show { display: block; animation: sq-open .45s cubic-bezier(.16,.84,.44,1) both; } @keyframes sq-open { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .sq-why h4 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #92e07e; margin-bottom: 8px; } .sq-why p { color: #d1d5db; font-size: .92rem; line-height: 1.65; } .sq-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; } .sq-next { padding: 11px 20px; border-radius: 10px; border: 1px solid rgba(146,224,126,.4); background: none; color: #92e07e; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .sq-next:hover { background: #92e07e; color: #0b0e0b; } .sq-hint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b7280; } /* ---- Two licences, one price to beat ---- */ .lic-band { padding: 100px 0; } .lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; } .lic { position: relative; overflow: hidden; border-radius: 24px; padding: 34px 32px 30px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(168deg, rgba(30,34,30,.78), rgba(12,13,12,.94)); transition: border-color .3s, transform .3s, box-shadow .3s; } .lic:hover { border-color: rgba(146,224,126,.45); transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(146,224,126,.25); } .lic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .lic-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #92e07e; } .lic-new { display: inline-block; padding: 4px 9px; border-radius: 99px; background: #92e07e; color: #0b0e0b; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .lic h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.1; } .lic-sub { margin-top: 8px; color: #9ca3af; font-size: .92rem; line-height: 1.55; } .lic-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 22px; } .lic-cmp > div { padding: 18px 18px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.28); } .lic-cmp > div.us { border-color: rgba(146,224,126,.35); background: rgba(146,224,126,.06); } .lic-cmp small { display: block; margin-bottom: 8px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .lic-cmp b { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #6b7280; } .lic-cmp .us b { color: #92e07e; } .lic-cmp b s { color: #4b5563; text-decoration-color: rgba(239,68,68,.6); text-decoration-thickness: 3px; } .lic-cmp i { display: block; margin-top: 6px; font-style: normal; font-size: .76rem; color: #6b7280; } .lic-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; } .lic-feats span { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #d1d5db; } .lic-feats span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #92e07e; flex-shrink: 0; box-shadow: 0 0 8px rgba(146,224,126,.6); } .lic-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .lic-btn { padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .25s; } .lic-btn-p { background: #92e07e; color: #0b0e0b; box-shadow: 0 10px 28px rgba(146,224,126,.22); } .lic-btn-p:hover { background: #fff; transform: translateY(-1px); } .lic-btn-g { border-color: rgba(255,255,255,.14); color: #9ca3af; } .lic-btn-g:hover { color: #fff; border-color: rgba(255,255,255,.35); } .lic-from { margin-left: auto; color: #6b7280; font-size: .78rem; } .lic-from b { color: #fff; } /* ---- Feature panels: bigger, left-anchored, one visual each ---- */ .feat-panel { transform: none !important; } .feat-panel:hover { box-shadow: 0 30px 80px -30px rgba(146,224,126,.18); } .feat-h { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 4px 0 18px; } .feat-p { color: #d1d5db; font-size: 1.08rem; line-height: 1.65; } .feat-p2 { margin-top: 14px; color: #9ca3af; font-size: .98rem; line-height: 1.6; } .deck-wrap { transform: scale(1.18); transform-origin: 50% 50%; } @media (max-width: 767px) { .deck-wrap { transform: none; } } /* The report, each region lit in turn on one shared loop */ .kd { position: relative; border: 1px solid rgba(146,224,126,.18); border-radius: 18px; background: linear-gradient(170deg, rgba(20,24,21,.98), rgba(10,12,11,.99)); padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.6); } .kd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 14px; margin-bottom: 18px; } .kd-brand, .kd-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .kd-brand { color: #6b7280; } .kd-date { color: #92e07e; flex-shrink: 0; } @keyframes kd-focus { 0%, 3% { box-shadow: inset 0 0 0 1px rgba(146,224,126,0); background: transparent; } 6%, 17% { box-shadow: inset 0 0 0 1px rgba(146,224,126,.8), 0 0 30px rgba(146,224,126,.14); background: rgba(146,224,126,.06); } 23%, 100% { box-shadow: inset 0 0 0 1px rgba(146,224,126,0); background: transparent; } } @keyframes kd-tag { 0%, 4% { opacity: 0; transform: translateY(4px); } 8%, 17% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(4px); } } .kd-part { position: relative; border-radius: 12px; padding: 13px; margin: 0 -13px; animation: kd-focus 15s var(--d) infinite; } .kd-tag { position: absolute; top: -9px; right: 10px; padding: 3px 9px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #0b0e0b; background: #92e07e; opacity: 0; animation: kd-tag 15s var(--d) infinite; white-space: nowrap; } .kd-scene.is-idle .kd-part, .kd-scene.is-idle .kd-tag { animation-play-state: paused; } .kd-score { display: flex; align-items: baseline; gap: 14px; } .kd-score b { font-size: 2.6rem; font-weight: 900; letter-spacing: -.04em; color: #92e07e; line-height: 1; text-shadow: 0 0 22px rgba(146,224,126,.4); } .kd-score span { font-size: .8rem; color: #6b7280; } .kd-q { font-size: .95rem; line-height: 1.5; color: #fff; font-weight: 600; } .kd-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kd-ans > div { padding: 10px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.4; } .kd-ans .bad { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.08); color: #d1d5db; } .kd-ans .good { border: 1px solid rgba(146,224,126,.45); background: rgba(146,224,126,.08); color: #fff; } .kd-ans u { display: block; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 5px; } .kd-ans .bad u { color: #ef4444; } .kd-ans .good u { color: #92e07e; } .kd-why { font-size: .86rem; line-height: 1.65; color: #9ca3af; } .kd-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #92e07e; } @media (max-width: 560px) { .kd-ans { grid-template-columns: 1fr; } .kd { padding: 20px; } } /* ---- Finale: the row of alternatives under the two buttons ---- */ .fin-alts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 30px; color: #6b7280; font-size: .8rem; } .fin-alts button { background: none; border: 0; padding: 4px 2px; color: #9ca3af; cursor: pointer; font-size: .8rem; transition: color .2s; } .fin-alts button b { color: #e5e7eb; font-weight: 700; } .fin-alts button:hover, .fin-alts button:hover b { color: #92e07e; } .fin-alts > span { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); } .fin-alts .fin-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(146,224,126,.5); } @media (max-width: 640px) { .fin-alts > span { display: none; } .fin-alts { flex-direction: column; gap: 4px; } } /* ---- The free paper vs a paid one ---- */ .cmp-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .cmp { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(168deg, rgba(26,30,27,.9), rgba(10,12,11,.96)); } .cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 120px 120px; align-items: center; } .cmp-head { padding: 14px 22px; border-bottom: 1px solid rgba(146,224,126,.2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #6b7280; } .cmp-free { color: #92e07e !important; } .cmp-row { padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .25s; } .cmp-row:last-child { border-bottom: 0; } .cmp-row:hover { background: rgba(146,224,126,.04); } .cmp-l { font-size: .9rem; color: #9ca3af; } .cmp-c { text-align: center; } .cmp-diff { background: rgba(146,224,126,.05); } .cmp-diff .cmp-l { color: #fff; font-weight: 600; } .cmp-c b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; font-weight: 800; color: #fff; } .cmp-c:nth-of-type(2) b { color: #92e07e; } .cmp-y { display: inline-block; width: 7px; height: 13px; border: solid rgba(146,224,126,.9); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); } .cmp-x { display: inline-block; position: relative; width: 12px; height: 12px; } .cmp-x::before, .cmp-x::after { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: rgba(255,255,255,.22); } .cmp-x::before { transform: rotate(45deg); } .cmp-x::after { transform: rotate(-45deg); } .cmp-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 15px 22px 15px 28px; border: 0; border-radius: 999px; cursor: pointer; background: #92e07e; color: #0b0e0b; font-weight: 900; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 14px 38px rgba(146,224,126,.24); transition: background .3s, transform .3s, box-shadow .3s; } .cmp-go:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 20px 50px rgba(146,224,126,.34); } .cmp-go svg { width: 15px; height: 15px; transition: transform .3s; } .cmp-go:hover svg { transform: translateX(4px); } /* ---- Questions people ask ---- */ .faq-band { padding: 90px 0 110px; } .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; margin-top: 8px; } .acc { display: flex; flex-direction: column; gap: 10px; } .acc-item { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; background: rgba(26,30,27,.5); transition: border-color .3s, background .3s; } .acc-item.open, .acc-item:hover { border-color: rgba(146,224,126,.4); } .acc-item.open { background: rgba(26,30,27,.85); } .acc-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 19px 22px; text-align: left; cursor: pointer; background: none; border: 0; color: inherit; } .acc-head h4 { flex: 1; font-weight: 700; color: #fff; font-size: .98rem; } .acc-item.open .acc-head h4 { color: #92e07e; } .acc-chev { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(146,224,126,.4); display: flex; align-items: center; justify-content: center; color: #92e07e; flex-shrink: 0; transition: transform .4s cubic-bezier(.16,.84,.44,1), background .3s; } .acc-chev svg { width: 12px; height: 12px; } .acc-item.open .acc-chev { transform: rotate(180deg); background: rgba(146,224,126,.16); } .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,.84,.44,1); } .acc-item.open .acc-body { grid-template-rows: 1fr; } .acc-body > div { overflow: hidden; } .acc-body p { padding: 0 22px 20px; margin: 0; font-size: .88rem; line-height: 1.7; color: #9ca3af; } .faq-aside p { color: #9ca3af; font-size: .95rem; line-height: 1.65; margin-top: 14px; } .faq-aside a { color: #92e07e; font-weight: 700; } @media (max-width: 1080px) { .inc-grid { grid-template-columns: repeat(6, 1fr); } .inc { grid-column: span 2; } .inc:nth-child(4), .inc:nth-child(5) { grid-column: span 3; } .inc-mark { height: 72px; } } @media (max-width: 900px) { .sq-grid, .lic-grid, .cmp-wrap, .faq-grid { grid-template-columns: 1fr; gap: 32px; } .band { padding: 72px 0; } } @media (max-width: 640px) { .inc-head { flex-direction: column; align-items: flex-start; gap: 14px; } .inc-price { text-align: left; } .inc-grid { grid-template-columns: 1fr; } .inc, .inc:nth-child(4), .inc:nth-child(5) { grid-column: auto; } .inc { padding: 20px 20px 20px 18px; display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; align-items: center; } .inc-mark { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 58px; height: 52px; margin-bottom: 0; } .inc-mark svg { width: 100%; height: 100%; } .inc b { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 5px; padding-right: 34px; } .inc p { grid-column: 2; grid-row: 2; align-self: start; } .lic-cmp { grid-template-columns: 1fr 1fr; } .cmp-head, .cmp-row { grid-template-columns: 1fr 72px 72px; padding-left: 14px; padding-right: 14px; } .cmp-l { font-size: .82rem; } } /* ===================================================================== OVERLAYS. One language for every modal, prompt, notice and checkout step, so a confirmation looks like it belongs to the same product as the page behind it. ===================================================================== */ .ov { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .ov-scrim { position: absolute; inset: 0; background: rgba(4,6,4,.84); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: ov-fade .2s ease both; } @keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ov-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .ov-card { position: relative; width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: linear-gradient(168deg, #1b1e1b 0%, #101210 62%); border: 1px solid rgba(146,224,126,.15); box-shadow: 0 40px 90px rgba(0,0,0,.72); animation: ov-rise .26s cubic-bezier(.16,.84,.44,1) both; } /* the hairline every panel on this site wears */ .ov-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(146,224,126,.75), transparent); z-index: 3; } .ov-sm { max-width: 420px; } .ov-md { max-width: 480px; } .ov-lg { max-width: 660px; } .ov-head { padding: 26px 28px 22px; flex-shrink: 0; } .ov-head.has-x { padding-right: 62px; } .ov-kick { display: flex; align-items: center; gap: 9px; color: var(--kiwi, #92e07e); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; } .ov-kick::before { content: ''; width: 14px; height: 1px; background: currentColor; flex-shrink: 0; } .ov-h { font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; color: #fff; } .ov-kick + .ov-h { margin-top: 9px; } .ov-p { margin-top: 8px; font-size: .875rem; line-height: 1.6; color: #9ca3af; } /* head and foot stay put; the middle gives way when the viewport is short */ .ov-body { padding: 0 28px 24px; overflow-y: auto; min-height: 0; } .ov-body::-webkit-scrollbar { width: 9px; } .ov-body::-webkit-scrollbar-track { background: transparent; } .ov-body::-webkit-scrollbar-thumb { background: #2c312c; border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } .ov-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 16px 28px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.28); flex-shrink: 0; } .ov-foot-stack { flex-direction: column-reverse; align-items: stretch; } .ov-x { position: absolute; top: 15px; right: 15px; z-index: 4; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #6b7280; background: none; border: 1px solid transparent; cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .ov-x:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); } .ov-x svg { width: 15px; height: 15px; } .ov-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--kiwi, #92e07e); background: rgba(146,224,126,.08); border: 1px solid rgba(146,224,126,.22); margin-bottom: 17px; flex-shrink: 0; } .ov-icon svg { width: 21px; height: 21px; } .ov-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 19px; border-radius: 9px; border: 1px solid transparent; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s; } .ov-btn:active { transform: translateY(1px); } .ov-btn-p { background: #92e07e; color: #0b0e0b; box-shadow: 0 10px 26px rgba(146,224,126,.2); } .ov-btn-p:hover { background: #fff; box-shadow: 0 14px 34px rgba(146,224,126,.32); } .ov-btn-g { border-color: rgba(255,255,255,.14); color: #9ca3af; } .ov-btn-g:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); } .ov-btn-q { color: #6b7280; } .ov-btn-q:hover { color: #e5e7eb; } .ov-btn-block { width: 100%; } .ov-label { display: block; margin-bottom: 8px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .ov-input { width: 100%; background: #0a0c0a; border: 1px solid #2b2f2b; border-radius: 10px; padding: 13px 15px; color: #fff; font-size: .9rem; font-weight: 500; transition: border-color .2s, box-shadow .2s; } .ov-input::placeholder { color: #4b5563; font-weight: 400; } .ov-input:focus { outline: none; border-color: #92e07e; box-shadow: 0 0 0 3px rgba(146,224,126,.13); } .ov-field + .ov-field { margin-top: 15px; } .ov-note { padding: 12px 14px; border-radius: 10px; font-size: .78rem; line-height: 1.55; background: rgba(146,224,126,.06); border: 1px solid rgba(146,224,126,.16); color: #a3ad9f; } .ov-note-warn { background: rgba(224,180,92,.07); border-color: rgba(224,180,92,.2); color: #c9ae7d; } /* long-form panels: terms, privacy */ .ov-scroll { overflow-y: auto; min-height: 0; padding: 24px 28px 28px; color: #9ca3af; font-size: .84rem; line-height: 1.72; } .ov-scroll::-webkit-scrollbar { width: 9px; } .ov-scroll::-webkit-scrollbar-track { background: transparent; } .ov-scroll::-webkit-scrollbar-thumb { background: #2c312c; border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } .ov-scroll::-webkit-scrollbar-thumb:hover { background: #3d443d; background-clip: content-box; } .ov-sec + .ov-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.06); } .ov-sec > h4 { display: flex; align-items: baseline; gap: 11px; margin-bottom: 10px; color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; } .ov-sec > h4 i { font-style: normal; color: #92e07e; flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: .1em; } .ov-sec p + p { margin-top: 11px; } .ov-sec ul { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; } .ov-sec li { position: relative; padding-left: 17px; } .ov-sec li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: rgba(146,224,126,.7); } .ov-scroll strong { color: #e5e7eb; font-weight: 600; } /* order summary line used at checkout and on the receipt */ .ov-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.09); } .ov-line:last-child { border-bottom: 0; } .ov-line dt { color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .ov-line dd { color: #e5e7eb; font-size: .86rem; font-weight: 600; text-align: right; } .ov-line-total dd { color: #92e07e; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .ov-spin { position: relative; width: 54px; height: 54px; } .ov-spin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.09); } .ov-spin span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #92e07e; animation: ov-spin 900ms linear infinite; } @keyframes ov-spin { to { transform: rotate(360deg); } } /* ---- Notifications ---- */ #toast-container { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 48px); } .tst { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; min-width: 296px; max-width: 380px; padding: 13px 16px 14px 18px; border-radius: 12px; background: linear-gradient(160deg, #1b1e1b, #0f110f); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 44px rgba(0,0,0,.62); transform: translateX(14px); opacity: 0; transition: transform .28s cubic-bezier(.16,.84,.44,1), opacity .28s ease; } .tst.is-in { transform: none; opacity: 1; } .tst::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #92e07e; } .tst-err::before { background: #ef4444; } .tst-ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #92e07e; } .tst-err .tst-ico { color: #ef4444; } .tst-txt b { display: block; margin-bottom: 3px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .tst-txt span { display: block; color: #e5e7eb; font-size: .83rem; line-height: 1.45; } .tst-bar { position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: rgba(146,224,126,.5); transform-origin: 0 50%; animation: tst-drain 4s linear forwards; } .tst-err .tst-bar { background: rgba(239,68,68,.5); } @keyframes tst-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 520px) { .ov { padding: 14px; } .ov-head { padding: 22px 20px 20px; } .ov-body { padding: 0 20px 20px; } .ov-foot { padding: 14px 20px; flex-direction: column-reverse; align-items: stretch; } .ov-scroll { padding: 20px; } .ov-h { font-size: 1.26rem; } #toast-container { left: 14px; right: 14px; bottom: 14px; } .tst { min-width: 0; max-width: none; } } @media (prefers-reduced-motion: reduce) { .ov-scrim, .ov-card { animation: none !important; } .tst-bar { animation-duration: 0s; } } *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-7{bottom:1.75rem}.bottom-8{bottom:2rem}.left-0{left:0}.left-1\/2{left:50%}.left-10{left:2.5rem}.left-\[31\%\]{left:31%}.right-0{right:0}.right-20{right:5rem}.right-5{right:1.25rem}.right-\[31\%\]{right:31%}.top-0{top:0}.top-1\/2{top:50%}.top-10{top:2.5rem}.top-20{top:5rem}.top-24{top:6rem}.top-5{top:1.25rem}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.z-\[999\]{z-index:999}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-mr-10{margin-right:-2.5rem}.-mt-1{margin-top:-.25rem}.-mt-10{margin-top:-2.5rem}.-mt-8{margin-top:-2rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-28{margin-bottom:7rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-72{height:18rem}.h-8{height:2rem}.h-96{height:24rem}.h-\[100\%\]{height:100%}.h-\[150\%\]{height:150%}.h-\[380px\]{height:380px}.h-\[800px\]{height:800px}.h-auto{height:auto}.h-full{height:100%}.max-h-0{max-height:0}.max-h-screen{max-height:100vh}.min-h-\[60px\]{min-height:60px}.min-h-\[70vh\]{min-height:70vh}.min-h-\[80vh\]{min-height:80vh}.min-h-\[85vh\]{min-height:85vh}.min-h-\[940px\]{min-height:940px}.min-h-screen{min-height:100vh}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-96{width:24rem}.w-\[1200px\]{width:1200px}.w-\[140\%\]{width:140%}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-\[100\%\],.-translate-x-full{--tw-translate-x:-100%}.-translate-x-\[100\%\],.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/3{--tw-translate-y:-33.333333%}.-translate-y-1\/3,.translate-x-1\/3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\/3{--tw-translate-x:33.333333%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-12{-moz-column-gap:3rem;column-gap:3rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.gap-y-6{row-gap:1.5rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[15px\]{border-radius:15px}.rounded-\[23px\]{border-radius:23px}.rounded-\[28px\]{border-radius:28px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-kiwi{--tw-border-opacity:1;border-color:rgb(146 224 126/var(--tw-border-opacity,1))}.border-kiwi\/20{border-color:rgba(146,224,126,.2)}.border-kiwi\/30{border-color:rgba(146,224,126,.3)}.border-kiwi\/50{border-color:rgba(146,224,126,.5)}.border-orange-500\/50{border-color:rgba(249,115,22,.5)}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-red-500\/20{border-color:rgba(239,68,68,.2)}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-red-500\/50{border-color:rgba(239,68,68,.5)}.border-transparent{border-color:transparent}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-\[\#050505\]{--tw-bg-opacity:1;background-color:rgb(5 5 5/var(--tw-bg-opacity,1))}.bg-\[\#0a0a0a\]{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-\[\#0f0f0f\]\/80{background-color:hsla(0,0%,6%,.8)}.bg-\[\#121212\]\/80{background-color:hsla(0,0%,7%,.8)}.bg-\[\#141414\]{--tw-bg-opacity:1;background-color:rgb(20 20 20/var(--tw-bg-opacity,1))}.bg-\[\#1a1a1a\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\[\#2a2a2a\]{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-kiwi{--tw-bg-opacity:1;background-color:rgb(146 224 126/var(--tw-bg-opacity,1))}.bg-kiwi\/10{background-color:rgba(146,224,126,.1)}.bg-kiwi\/30{background-color:rgba(146,224,126,.3)}.bg-kiwi\/5{background-color:rgba(146,224,126,.05)}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-orange-900\/20{background-color:rgba(124,45,18,.2)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-500\/5{background-color:rgba(239,68,68,.05)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-\[radial-gradient\(circle_at_center\2c transparent_0\%\2c \#050505_70\%\)\]{background-image:radial-gradient(circle at center,transparent 0,#050505 70%)}.bg-\[radial-gradient\(closest-side\2c _\#000000_0\%\2c _transparent_100\%\)\]{background-image:radial-gradient(closest-side,#000 0,transparent 100%)}.bg-\[radial-gradient\(ellipse_at_top\2c _var\(--tw-gradient-stops\)\)\]{background-image:radial-gradient(ellipse at top,var(--tw-gradient-stops))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#1a1a1a\]{--tw-gradient-from:#1a1a1a var(--tw-gradient-from-position);--tw-gradient-to:rgba(26,26,26,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-kiwi{--tw-gradient-from:#92e07e var(--tw-gradient-from-position);--tw-gradient-to:rgba(146,224,126,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-kiwi\/10{--tw-gradient-from:rgba(146,224,126,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(146,224,126,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-kiwi\/30{--tw-gradient-from:rgba(146,224,126,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(146,224,126,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-kiwi\/5{--tw-gradient-from:rgba(146,224,126,.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(146,224,126,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-kiwi\/50{--tw-gradient-from:rgba(146,224,126,.5) var(--tw-gradient-from-position);--tw-gradient-to:rgba(146,224,126,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500\/10{--tw-gradient-from:rgba(239,68,68,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500\/5{--tw-gradient-from:rgba(239,68,68,.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/80{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/10{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#050505\]{--tw-gradient-to:#050505 var(--tw-gradient-to-position)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-kiwiDark{--tw-gradient-to:#7ac466 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-current{fill:currentColor}.object-contain{-o-object-fit:contain;object-fit:contain}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[1px\]{padding:1px}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-0\.5{padding-bottom:.125rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-32{padding-bottom:8rem}.pb-4{padding-bottom:1rem}.pb-40{padding-bottom:10rem}.pb-56{padding-bottom:14rem}.pb-8{padding-bottom:2rem}.pl-6{padding-left:1.5rem}.pt-10{padding-top:2.5rem}.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Inter,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-\[0\.95rem\]{font-size:.95rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.02\]{line-height:1.02}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-charcoal{--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-400\/60{color:rgba(156,163,175,.6)}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-kiwi{--tw-text-opacity:1;color:rgb(146 224 126/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:hsla(0,0%,100%,.6)}.underline{text-decoration-line:underline}.decoration-orange-400{text-decoration-color:#fb923c}.placeholder-gray-700::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(55 65 81/var(--tw-placeholder-opacity,1))}.placeholder-gray-700::placeholder{--tw-placeholder-opacity:1;color:rgb(55 65 81/var(--tw-placeholder-opacity,1))}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_\#92e07e\]{--tw-shadow:0 0 10px #92e07e;--tw-shadow-colored:0 0 10px var(--tw-shadow-color)}.shadow-\[0_0_10px_\#92e07e\],.shadow-\[0_0_10px_\#f97316\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_\#f97316\]{--tw-shadow:0 0 10px #f97316;--tw-shadow-colored:0 0 10px var(--tw-shadow-color)}.shadow-\[0_0_10px_rgba\(146\2c 224\2c 126\2c 0\.5\)\]{--tw-shadow:0 0 10px rgba(146,224,126,.5);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(239\2c 68\2c 68\2c 0\.8\)\]{--tw-shadow:0 0 10px rgba(239,68,68,.8);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_\#92e07e\]{--tw-shadow:0 0 15px #92e07e;--tw-shadow-colored:0 0 15px var(--tw-shadow-color)}.shadow-\[0_0_15px_\#92e07e\],.shadow-\[0_0_15px_\#ef4444\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_\#ef4444\]{--tw-shadow:0 0 15px #ef4444;--tw-shadow-colored:0 0 15px var(--tw-shadow-color)}.shadow-\[0_0_15px_rgba\(146\2c 224\2c 126\2c 0\.1\)\]{--tw-shadow:0 0 15px rgba(146,224,126,.1);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(146\2c 224\2c 126\2c 0\.15\)\]{--tw-shadow:0 0 20px rgba(146,224,126,.15);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(146\2c 224\2c 126\2c 0\.3\)\]{--tw-shadow:0 0 20px rgba(146,224,126,.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color)}.shadow-\[0_0_20px_rgba\(146\2c 224\2c 126\2c 0\.3\)\],.shadow-\[0_0_25px_\#92e07e\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_25px_\#92e07e\]{--tw-shadow:0 0 25px #92e07e;--tw-shadow-colored:0 0 25px var(--tw-shadow-color)}.shadow-\[0_0_30px_rgba\(146\2c 224\2c 126\2c 0\.05\)\]{--tw-shadow:0 0 30px rgba(146,224,126,.05);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(146\2c 224\2c 126\2c 0\.1\)\]{--tw-shadow:0 0 30px rgba(146,224,126,.1);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(146\2c 224\2c 126\2c 0\.4\)\]{--tw-shadow:0 0 30px rgba(146,224,126,.4);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_5px_rgba\(146\2c 224\2c 126\2c 0\.1\)\]{--tw-shadow:0 0 5px rgba(146,224,126,.1);--tw-shadow-colored:0 0 5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_5px_rgba\(249\2c 115\2c 22\2c 0\.2\)\]{--tw-shadow:0 0 5px rgba(249,115,22,.2);--tw-shadow-colored:0 0 5px var(--tw-shadow-color)}.shadow-\[0_0_5px_rgba\(249\2c 115\2c 22\2c 0\.2\)\],.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-black{--tw-shadow-color:#000;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.ring-offset-2{--tw-ring-offset-width:2px}.ring-offset-black{--tw-ring-offset-color:#000}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur:blur(64px)}.blur-\[1px\]{--tw-blur:blur(1px)}.blur-\[1px\],.blur-\[60px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[60px\]{--tw-blur:blur(60px)}.blur-\[80px\]{--tw-blur:blur(80px)}.blur-\[80px\],.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow-2xl{--tw-drop-shadow:drop-shadow(0 25px 25px rgba(0,0,0,.15))}.drop-shadow-2xl,.drop-shadow-\[0_0_10px_rgba\(255\2c 255\2c 255\2c 0\.8\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_10px_rgba\(255\2c 255\2c 255\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 0 10px hsla(0,0%,100%,.8))}.drop-shadow-\[0_0_15px_rgba\(146\2c 224\2c 126\2c 0\.3\)\]{--tw-drop-shadow:drop-shadow(0 0 15px rgba(146,224,126,.3))}.drop-shadow-\[0_0_15px_rgba\(146\2c 224\2c 126\2c 0\.3\)\],.drop-shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.8\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 0 15px hsla(0,0%,100%,.8))}.drop-shadow-\[0_0_25px_rgba\(146\2c 224\2c 126\2c 0\.6\)\]{--tw-drop-shadow:drop-shadow(0 0 25px rgba(146,224,126,.6))}.drop-shadow-\[0_0_25px_rgba\(146\2c 224\2c 126\2c 0\.6\)\],.drop-shadow-\[0_0_8px_rgba\(249\2c 115\2c 22\2c 0\.8\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_8px_rgba\(249\2c 115\2c 22\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 0 8px rgba(249,115,22,.8))}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-lg,.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-100{transition-delay:.1s}.delay-150{transition-delay:.15s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-75{transition-delay:75ms}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-kiwi ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(146 224 126/var(--tw-bg-opacity,1))}.selection\:bg-kiwi ::selection{--tw-bg-opacity:1;background-color:rgb(146 224 126/var(--tw-bg-opacity,1))}.selection\:text-black ::-moz-selection{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.selection\:text-black ::selection{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.selection\:bg-kiwi::-moz-selection{--tw-bg-opacity:1;background-color:rgb(146 224 126/var(--tw-bg-opacity,1))}.selection\:bg-kiwi::selection{--tw-bg-opacity:1;background-color:rgb(146 224 126/var(--tw-bg-opacity,1))}.selection\:text-black::-moz-selection{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.selection\:text-black::selection{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem}.hover\:-translate-y-2:hover,.hover\:translate-x-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:translate-x-1:hover{--tw-translate-x:0.25rem}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-gray-600:hover{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.hover\:border-kiwi:hover{--tw-border-opacity:1;border-color:rgb(146 224 126/var(--tw-border-opacity,1))}.hover\:border-kiwi\/40:hover{border-color:rgba(146,224,126,.4)}.hover\:border-kiwi\/50:hover{border-color:rgba(146,224,126,.5)}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.hover\:bg-\[\#1a1a1a\]:hover{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-kiwi:hover{--tw-text-opacity:1;color:rgb(146 224 126/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_0_25px_rgba\(146\2c 224\2c 126\2c 0\.4\)\]:hover{--tw-shadow:0 0 25px rgba(146,224,126,.4);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_40px_rgba\(146\2c 224\2c 126\2c 0\.5\)\]:hover{--tw-shadow:0 0 40px rgba(146,224,126,.5);--tw-shadow-colored:0 0 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_40px_rgba\(146\2c 224\2c 126\2c 0\.6\)\]:hover{--tw-shadow:0 0 40px rgba(146,224,126,.6);--tw-shadow-colored:0 0 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_0_60px_rgba\(146\2c 224\2c 126\2c 0\.6\)\]:hover{--tw-shadow:0 0 60px rgba(146,224,126,.6);--tw-shadow-colored:0 0 60px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_20px_50px_-10px_rgba\(146\2c 224\2c 126\2c 0\.1\)\]:hover{--tw-shadow:0 20px 50px -10px rgba(146,224,126,.1);--tw-shadow-colored:0 20px 50px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:drop-shadow-\[0_0_8px_rgba\(146\2c 224\2c 126\2c 0\.5\)\]:hover{--tw-drop-shadow:drop-shadow(0 0 8px rgba(146,224,126,.5));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-kiwi:focus{--tw-border-opacity:1;border-color:rgb(146 224 126/var(--tw-border-opacity,1))}.focus\:bg-kiwi\/5:focus{background-color:rgba(146,224,126,.05)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.group:hover .group-hover\:-translate-x-1{--tw-translate-x:-0.25rem}.group:hover .group-hover\:-translate-x-1,.group:hover .group-hover\:translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem}.group:hover .group-hover\:translate-x-1,.group:hover .group-hover\:translate-x-\[100\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-\[100\%\]{--tw-translate-x:100%}.group:hover .group-hover\:border-kiwi{--tw-border-opacity:1;border-color:rgb(146 224 126/var(--tw-border-opacity,1))}.group:hover .group-hover\:text-kiwi{--tw-text-opacity:1;color:rgb(146 224 126/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-80{opacity:.8}.group:hover .group-hover\:blur-0{--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:mx-0{margin-left:0;margin-right:0}.md\:inline{display:inline}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-80{height:20rem}.md\:h-96{height:24rem}.md\:h-\[420px\]{height:420px}.md\:h-\[780px\]{height:780px}.md\:min-h-0{min-height:0}.md\:w-1\/3{width:33.333333%}.md\:w-2\/3{width:66.666667%}.md\:w-80{width:20rem}.md\:w-\[100\%\]{width:100%}.md\:w-\[46\%\]{width:46%}.md\:w-\[54\%\]{width:54%}.md\:w-auto{width:auto}.md\:-translate-y-4{--tw-translate-y:-1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:justify-end{justify-content:flex-end}.md\:gap-16{gap:4rem}.md\:gap-7{gap:1.75rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-14{padding:3.5rem}.md\:p-7{padding:1.75rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:pt-0{padding-top:0}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-8xl{font-size:6rem;line-height:1}.md\:text-9xl{font-size:8rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:block{display:block}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-20{gap:5rem}.lg\:p-16{padding:4rem}.lg\:text-7xl{font-size:4.5rem;line-height:1}} @keyframes true-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .radar-beam { position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax; background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, rgba(146, 224, 126, 0.08) 360deg); border-radius: 50%; animation: true-spin 8s linear infinite; pointer-events: none; will-change: transform; }