.catchy_hero, .catchy_hero * { box-sizing: border-box; }
.catchy_hero { position: relative; min-height: 92vh; overflow: hidden; display: flex; align-items: center; padding: clamp(72px, 8vw, 124px) 24px; color: #fff; background: linear-gradient(135deg, #17233c 0%, #2e4f62 55%, #4c9783 100%); isolation: isolate; }
.catchy_hero__inner { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.catchy_hero__copy { max-width: 670px; }
.catchy_hero__eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); font: 600 13px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.catchy_hero__eyebrow_dot { width: 8px; height: 8px; border-radius: 50%; background: #75f0c6; box-shadow: 0 0 0 7px rgba(117,240,198,.12), 0 0 22px rgba(117,240,198,.9); animation: catchy_hero_pulse_dot 2s ease-in-out infinite; }
.catchy_hero__title { margin: 0; max-width: 780px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 6.2vw, 70px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 20px 60px rgba(0,0,0,.22); }
.catchy_hero__subtitle { margin: 26px 0 0; max-width: 720px; color: rgba(255,255,255,.75); font: 500 clamp(16px, 1.45vw, 20px)/1.75 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .01em; }
.catchy_hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.catchy_hero__button { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; text-decoration: none; font: 750 15px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .01em; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.catchy_hero__button::before { content: ""; position: absolute; z-index: -1; top: -45%; bottom: -45%; left: -55%; width: 44%; border-radius: inherit; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.7) 45%, transparent 100%); transform: translateX(-120%) skewX(-18deg); animation: catchy_hero_button_shine 4.8s ease-in-out infinite; pointer-events: none; }
.catchy_hero__button_secondary::before { opacity: .28; } .catchy_hero__button:hover { transform: translateY(-3px); } .catchy_hero__button_primary { color: #17233c; background: #fff; box-shadow: 0 20px 42px rgba(0,0,0,.24); } .catchy_hero__button_secondary { color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.045); backdrop-filter: blur(16px); } .catchy_hero__button_secondary:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.1); }
.catchy_hero__visual { position: relative; min-height: 560px; perspective: 1200px; top:-30px;}
.catchy_hero__panel { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(22px); }
.catchy_hero__panel_main { position: relative; inset: 64px 64px 46px 42px; z-index: 4; padding: 22px; border-radius: 34px; transform: rotateX(8deg) rotateY(-12deg) rotateZ(1deg); animation: catchy_hero_panel_float 7s ease-in-out infinite; }
.catchy_hero__panel_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .catchy_hero__traffic { display: inline-flex; gap: 7px; } .catchy_hero__traffic span { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.catchy_hero__sync { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font: 700 12px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .12em; } .catchy_hero__sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #75f0c6; box-shadow: 0 0 18px rgba(117,240,198,.85); }
.catchy_hero__question { position: relative; overflow: hidden; padding: 18px; border-radius: 24px; background: rgba(9,19,36,.42); border: 1px solid rgba(255,255,255,.09); } .catchy_hero__question::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(117,240,198,.14), transparent); transform: translateX(-110%); animation: catchy_hero_scan 3.7s ease-in-out infinite; pointer-events: none; } .catchy_hero__question_label { display: block; margin-bottom: 8px; color: rgba(255,255,255,.48); font: 700 11px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .14em; } .catchy_hero__question strong { display: block; color: rgba(255,255,255,.92); font: 700 16px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity .22s ease, transform .22s ease; }
.catchy_hero__metric_row { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; margin-top: 16px; } .catchy_hero__score_card, .catchy_hero__mini_chart, .catchy_hero__ranking { border-radius: 24px; border: 1px solid rgba(255,255,255,.09); background: rgba(9,19,36,.28); } .catchy_hero__score_card { position: relative; display: grid; place-items: center; min-height: 178px; } .catchy_hero__score_ring { width: 128px; height: 128px; transform: rotate(-90deg); border-radius:50%;} .catchy_hero__score_bg, .catchy_hero__score_progress { fill: none; stroke-width: 10; } .catchy_hero__score_bg { stroke: rgba(255,255,255,.09); } .catchy_hero__score_progress { stroke: rgba(117,240,198,.92); stroke-linecap: round; stroke-dasharray: 301.59; stroke-dashoffset: var(--catchy_hero_score_offset, 99.52); filter: drop-shadow(0 0 14px rgba(117,240,198,.54)); transition: stroke-dashoffset .9s cubic-bezier(.16,1,.3,1), filter .26s ease; animation: catchy_hero_ring_glow 3.5s ease-in-out infinite; }
.catchy_hero__score_text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: translateY(-2px); pointer-events: none; } .catchy_hero__score_text strong { font: 850 34px/.95 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.055em; transition: transform .26s ease, opacity .26s ease; } .catchy_hero__score_text span { margin-top: 3px; color: rgba(255,255,255,.48); font: 650 6.8px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } .catchy_hero__text_switching { opacity: 0; transform: translateY(6px); } .catchy_hero__rank_switching { opacity: 0; transform: translateX(18px) scale(.98); }
.catchy_hero__mini_chart { display: flex; align-items: end; justify-content: space-between; gap: 10px; min-height: 178px; padding: 18px; } .catchy_hero__bar { position: relative; flex: 1; min-width: 18px; border-radius: 999px 999px 12px 12px; background: linear-gradient(180deg, rgba(117,240,198,.92), rgba(255,255,255,.14)); box-shadow: 0 0 24px rgba(117,240,198,.16); transform-origin: bottom; animation: catchy_hero_bars 2.6s ease-in-out infinite; } .catchy_hero__bar_one { height: 44%; animation-delay: -.9s; } .catchy_hero__bar_two { height: 68%; animation-delay: -1.4s; } .catchy_hero__bar_three { height: 52%; animation-delay: -.3s; } .catchy_hero__bar_four { height: 82%; animation-delay: -1.8s; } .catchy_hero__bar_five { height: 60%; animation-delay: -.6s; }
.catchy_hero__ranking { position: relative; z-index: 8; display: grid; gap: 9px; margin-top: 16px; padding: 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,.09); background: rgba(9,19,36,.48); backdrop-filter: blur(18px); } .catchy_hero__rank { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; min-height: 43px; padding: 0 12px; border-radius: 15px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.055); font: 700 13px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity .26s ease, transform .26s ease, background .26s ease; animation: catchy_hero_rank_slide 5.8s ease-in-out infinite; } .catchy_hero__rank_one { animation-delay: -1.2s; } .catchy_hero__rank_two { animation-delay: -2.4s; } .catchy_hero__rank_three { animation-delay: -3.6s; background: rgba(117,240,198,.12); } .catchy_hero__rank_position, .catchy_hero__rank_value { color: rgba(117,240,198,.95); }
.catchy_hero__panel_floating { position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px; min-width: 210px; padding: 13px 14px; border-radius: 22px; transform: translate3d(0,0,0); } .catchy_hero__panel_floating strong { display: block; color: rgba(255,255,255,.9); font: 780 13px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity .22s ease, transform .22s ease; } .catchy_hero__panel_floating small { display: block; margin-top: 4px; color: rgba(255,255,255,.52); font: 650 11px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity .22s ease, transform .22s ease; } .catchy_hero__panel_left { top: 48px; left: 2px; animation: catchy_hero_float_left 6.5s ease-in-out infinite; } .catchy_hero__panel_right { top: 132px; right: 4px; z-index: 6; animation: catchy_hero_float_right 7.5s ease-in-out infinite; } .catchy_hero__panel_bottom { right: 80px; bottom: 18px; z-index: 12; animation: catchy_hero_float_bottom 6.8s ease-in-out infinite; }
.catchy_hero__chip_icon, .catchy_hero__persona { display: grid; place-items: center; flex: 0 0 auto; height: 38px; min-width: 38px; padding: 0 9px; border-radius: 14px; background: rgba(117,240,198,.16); color: #91ffd9; font: 850 12px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .catchy_hero__persona { min-width: 68px; } .catchy_hero__pulse { position: relative; width: 38px; height: 38px; border-radius: 14px; background: rgba(255,255,255,.11); } .catchy_hero__pulse::before, .catchy_hero__pulse::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #75f0c6; } .catchy_hero__pulse::after { inset: 4px; background: transparent; border: 1px solid rgba(117,240,198,.58); animation: catchy_hero_ping 1.8s ease-out infinite; }
.catchy_hero__connections { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: .8; } .catchy_hero__connection { fill: none; stroke: rgba(117,240,198,.34); stroke-width: 1.5; stroke-dasharray: 8 12; animation: catchy_hero_dash 9s linear infinite; } .catchy_hero__connection_two { animation-duration: 7s; opacity: .7; } .catchy_hero__connection_three { animation-duration: 11s; opacity: .55; }
.catchy_hero__halo { position: absolute; z-index: 1; border-radius: 999px; filter: blur(3px); opacity: .65; } .catchy_hero__halo_one { inset: 90px 70px 70px 80px; border: 1px solid rgba(117,240,198,.22); animation: catchy_hero_rotate 18s linear infinite; } .catchy_hero__halo_two { inset: 28px 26px 34px 18px; border: 1px dashed rgba(255,255,255,.14); animation: catchy_hero_rotate_reverse 28s linear infinite; } .catchy_hero__orbit { position: absolute; z-index: 2; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); transform-origin: center; } .catchy_hero__orbit_one { inset: 46px 50px 42px 38px; animation: catchy_hero_rotate 22s linear infinite; } .catchy_hero__orbit_two { inset: 120px 112px 106px 102px; animation: catchy_hero_rotate_reverse 16s linear infinite; } .catchy_hero__orbit_dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #75f0c6; box-shadow: 0 0 22px rgba(117,240,198,.92); } .catchy_hero__orbit_dot_one { top: 18%; left: 3%; } .catchy_hero__orbit_dot_two { right: 12%; bottom: 6%; width: 8px; height: 8px; } .catchy_hero__orbit_dot_three { top: 2%; right: 24%; width: 10px; height: 10px; }
.catchy_hero__ambient { position: absolute; z-index: 0; width: 38vw; height: 38vw; min-width: 360px; min-height: 360px; border-radius: 50%; filter: blur(60px); opacity: .38; pointer-events: none; } .catchy_hero__ambient_one { top: -18%; right: -8%; background: rgba(117,240,198,.44); animation: catchy_hero_ambient_one 12s ease-in-out infinite; } .catchy_hero__ambient_two { left: -16%; bottom: -22%; background: rgba(94,137,255,.22); animation: catchy_hero_ambient_two 14s ease-in-out infinite; } .catchy_hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(circle at 62% 50%, #000 0%, transparent 68%); animation: catchy_hero_grid_move 18s linear infinite; }
@keyframes catchy_hero_panel_float { 0%,100% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(1deg) translate3d(0,0,0); } 50% { transform: rotateX(10deg) rotateY(-8deg) rotateZ(-.5deg) translate3d(0,-16px,24px); } } @keyframes catchy_hero_float_left { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(12px,-18px,0); } } @keyframes catchy_hero_float_right { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-18px,14px,0); } } @keyframes catchy_hero_float_bottom { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(10px,18px,0); } } @keyframes catchy_hero_ring_glow { 0%,100% { filter: drop-shadow(0 0 10px rgba(117,240,198,.4)); } 50% { filter: drop-shadow(0 0 22px rgba(117,240,198,.85)); } } @keyframes catchy_hero_bars { 0%,100% { transform: scaleY(.82); opacity: .72; } 50% { transform: scaleY(1); opacity: 1; } } @keyframes catchy_hero_rank_slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } } @keyframes catchy_hero_scan { 0%,45% { transform: translateX(-110%); } 75%,100% { transform: translateX(110%); } } @keyframes catchy_hero_dash { to { stroke-dashoffset: -160; } } @keyframes catchy_hero_rotate { to { transform: rotate(360deg); } } @keyframes catchy_hero_rotate_reverse { to { transform: rotate(-360deg); } } @keyframes catchy_hero_ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes catchy_hero_pulse_dot { 0%,100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(117,240,198,.12), 0 0 22px rgba(117,240,198,.9); } 50% { transform: scale(.72); box-shadow: 0 0 0 12px rgba(117,240,198,.06), 0 0 34px rgba(117,240,198,1); } } @keyframes catchy_hero_button_shine { 0%,55% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 62% { opacity: 1; } 78%,100% { transform: translateX(380%) skewX(-18deg); opacity: 0; } } @keyframes catchy_hero_grid_move { to { background-position: 62px 62px; } } @keyframes catchy_hero_ambient_one { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-80px,80px,0) scale(1.12); } } @keyframes catchy_hero_ambient_two { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(90px,-60px,0) scale(1.08); } }
@media (max-width: 980px) { .catchy_hero { min-height: auto; padding: 72px 20px 56px; } .catchy_hero__inner { grid-template-columns: 1fr; gap: 48px; } .catchy_hero__copy { max-width: none; text-align: center; margin: 0 auto; } .catchy_hero__eyebrow, .catchy_hero__actions { margin-left: auto; margin-right: auto; justify-content: center; } .catchy_hero__visual { min-height: 520px; max-width: 680px; width: 100%; margin: 0 auto; } }
@media (max-width: 640px) { .catchy_hero__title { font-size: clamp(39px, 13vw, 54px); } .catchy_hero__subtitle br { display: none; } .catchy_hero__button { width: 100%; } .catchy_hero__visual { min-height: 590px; } .catchy_hero__panel_main { inset: 88px 8px 94px 8px; padding: 16px; border-radius: 28px; transform: none; } .catchy_hero__metric_row { grid-template-columns: 1fr; } .catchy_hero__score_card, .catchy_hero__mini_chart { min-height: 142px; } .catchy_hero__panel_left { top: 14px; left: 8px; } .catchy_hero__panel_right { top: auto; bottom: 28px; right: 8px; } .catchy_hero__ranking { margin-top: 16px; } .catchy_hero__panel_bottom { right: auto; left: 8px; bottom: 88px; } .catchy_hero__panel_floating { min-width: 0; max-width: calc(100% - 16px); } }
@media (prefers-reduced-motion: reduce) { .catchy_hero *, .catchy_hero *::before, .catchy_hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }