.qira-hero { --hero-nav-offset: 68px; --hero-pad-x: var(--qira-gutter); --hero-pad-y: 40px; } .qira-hero { position: relative; min-height: calc(100vh - var(--qira-site-header-h, 0px)); display: flex; align-items: center; overflow: hidden; padding-top: var(--hero-nav-offset); background-color: var(--bg-hero-base); background-image: radial-gradient(ellipse 50% 55% at -5% 115%, #a863d6 0%, transparent 65%), radial-gradient(ellipse 120% 110% at 70% 105%, rgba(180, 74, 207, .75) 0%, transparent 55%), radial-gradient(ellipse 100% 75% at 62% 90%, #0f25b8 0%, transparent 60%); } .qira-hero__container { position: relative; z-index: 1; width: 100%; max-width: var(--qira-band); margin: 0 auto; padding-inline: var(--hero-pad-x); display: flex; align-items: center; gap: 64px; } .qira-hero__content { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 2 1 0; min-width: 0; padding: var(--hero-pad-y) 0 var(--hero-pad-y) 0; } .qira-hero__logo { display: block; margin-bottom: 48px; } .qira-hero__logo img { width: 172px; height: auto; display: block; } .qira-hero__headline { font-family: var(--qira-font); font-size: clamp(42px, 5vw, 78px); font-weight: var(--qira-fw-medium); line-height: .95; letter-spacing: var(--qira-track-tight); color: #fff; margin: 0 0 28px; } .qira-hero__body { font-family: var(--qira-font); font-size: clamp(16px, 1.2vw, 18px); font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-body); color: rgba(255, 255, 255, .80); max-width: 420px; margin: 0 0 48px; } .qira-hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .qira-hero__store-group { display: flex; align-items: center; gap: 14px; } .qira-hero__cta-primary { font-family: var(--qira-font); font-size: 15px; font-weight: var(--qira-fw-medium); color: #fff; text-decoration: none; padding: 14px 28px; border-radius: 999px; white-space: nowrap; transition: opacity .2s, transform .2s; position: relative; isolation: isolate; overflow: hidden; border: none; box-shadow: var(--qira-btn-shadow); background: linear-gradient(60deg, #326afa 0%, #864bdb 40%, #864bdb 65%, #d73fe0 100%); } .qira-hero__cta-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1.5px; background: linear-gradient(45deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .55) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(1px); } .qira-hero__cta-primary:hover { opacity: .9; transform: translateY(-1px); } .qira-hero__cta-store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgba(0, 0, 0, .30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .18); box-shadow: var(--qira-btn-shadow); text-decoration: none; color: #fff; transition: background .2s, transform .2s; } .qira-hero__cta-store:hover { background: rgba(0, 0, 0, .45); transform: translateY(-1px); } .qira-hero__cta-store img { width: 24px; height: 24px; display: block; flex-shrink: 0; } .qira-hero__store-text { display: flex; flex-direction: column; gap: 1px; } .qira-hero__store-label { font-family: var(--qira-font); font-size: 10px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-flat); opacity: .75; } .qira-hero__store-name { font-family: var(--qira-font); font-size: 14px; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-snug); } .qira-hero__visual { position: relative; z-index: 2; height: 100%; flex: 2 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; } .qira-hero__white-glow { position: absolute; left: 50%; top: 50%; width: 676px; height: 676px; margin-left: -338px; margin-top: -338px; border-radius: 50%; background: #fff; filter: blur(300px); mix-blend-mode: overlay; opacity: 1; pointer-events: none; } .qira-hero__ellipses { position: absolute; inset: 0; pointer-events: none; } .qira-hero__ellipse { position: absolute; top: 50%; left: 50%; display: block; overflow: visible; will-change: transform; translate: -50% -50%; aspect-ratio: 1 / 1; height: auto; } .qira-hero__ellipse:nth-child(1) { width: 418px; } .qira-hero__ellipse:nth-child(2) { width: 619px; } .qira-hero__ellipse:nth-child(3) { width: 821px; } .qira-hero__ellipse:nth-child(4) { width: 1022px; } .qira-hero .qira-pb { transform: scale(var(--hero-pb-scale, 1.65)); transform-origin: center center; } .qira-hero .qira-pb, .qira-hero .qira-pb * { cursor: default  !important; pointer-events: none; } .qira-hero__pb-wrap { position: relative; z-index: 3; } .qira-hero__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 173%; height: 280%; object-fit: cover; border-radius: 50%; filter: blur(40px); opacity: .85; pointer-events: none; z-index: 0; } .qira-hero__pb-wrap .qira-pb { position: relative; z-index: 1; } @media (orientation: landscape) and (max-width: 1080px) { .qira-hero { --hero-pb-scale: 1.25; } } @media (orientation: portrait) and (max-width: 1024px) { .qira-hero { --hero-pad-x: var(--qira-gutter); --hero-pad-y: 40px; padding-top: 68px; } .qira-hero__container { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; } .qira-hero__content { display: contents; } .qira-hero__container { text-align: center; } .qira-hero__logo { order: 0; margin: 50px auto 20px; width: max-content; } .qira-hero__visual { order: 1; min-height: 34vh; margin-top: -50px; } .qira-hero__headline { order: 2; } .qira-hero__body { order: 3; margin-inline: auto; } .qira-hero__ctas { order: 4; justify-content: center; margin-top: 24px; padding-bottom: 32px; } .qira-hero__ellipse:nth-child(5) { width: 160vw; } .qira-hero__ellipse:nth-child(4) { width: 130vw; } .qira-hero__ellipse:nth-child(3) { width: 100vw; } .qira-hero__ellipse:nth-child(2) { width: 75vw; } .qira-hero__ellipse:nth-child(1) { width: 52vw; } }