.sf-download {
position: relative;
overflow: hidden;
padding: 96px 0;
}
.sf-download__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 50%, rgba(var(--accent-rgb), 0.07), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(var(--accent-rgb), 0.06), transparent 60%);
}
.sf-download__container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.sf-download__header {
text-align: center;
margin-bottom: 56px;
}
.sf-download__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.32em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 14px;
padding: 6px 16px;
border: 1px solid rgba(var(--accent-rgb), 0.4);
border-radius: 100px;
background: rgba(var(--accent-rgb), 0.06);
}
.sf-download__title {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.01em;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 75%, #000) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin-bottom: 16px;
}
.sf-download__desc {
font-size: 16px;
color: var(--muted-foreground);
max-width: 620px;
margin: 16px auto 0;
line-height: 1.7;
}
.sf-download__hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
margin-bottom: 64px;
}
.sf-download__hero--no-image {
grid-template-columns: 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.sf-download__card {
padding: 40px 44px;
background:
linear-gradient(135deg, rgba(28, 28, 38, 0.65) 0%, rgba(15, 15, 22, 0.7) 100%);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid rgba(var(--accent-rgb), 0.32);
border-radius: 24px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),
0 0 48px rgba(var(--accent-rgb), 0.12),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
position: relative;
}
.sf-download__card::before {
content: '';
position: absolute;
top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
}
.sf-download__card-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}
.sf-download__app-icon {
width: 80px;
height: 80px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.06));
border: 1px solid rgba(var(--accent-rgb), 0.42);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sf-download__app-icon img,
.sf-download__app-icon svg { width: 56px; height: 56px; }
.sf-download__card-meta {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.sf-download__app-name {
font-size: 28px;
font-weight: 800;
background: linear-gradient(135deg, #FFFFFF 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 0.5px;
line-height: 1.15;
}
.sf-download__app-version {
font-size: 12px;
color: rgba(var(--accent-rgb), 0.85);
letter-spacing: 0.3px;
}
.sf-download__card-rating {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 12px 18px;
margin-bottom: 24px;
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.22);
border-radius: 100px;
font-size: 14px;
}
.sf-download__rating-stars {
color: var(--accent);
letter-spacing: 1.5px;
font-size: 16px;
text-shadow: 0 0 10px rgba(245, 215, 110, 0.65);
}
.sf-download__rating-score {
color: #fff;
font-weight: 700;
font-size: 15px;
}
.sf-download__rating-divider { color: rgba(255, 255, 255, 0.3); }
.sf-download__rating-dl { color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.sf-download__card-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.sf-download__badge {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
background: linear-gradient(135deg, rgba(8, 8, 14, 0.92) 0%, rgba(22, 22, 32, 0.85) 100%);
border: 1px solid rgba(var(--accent-rgb), 0.32);
border-radius: 14px;
color: #fff;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sf-download__badge:hover {
transform: translateY(-3px);
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
0 0 32px rgba(var(--accent-rgb), 0.3);
}
.sf-download__badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
}
.sf-download__badge-text {
display: flex;
flex-direction: column;
text-align: left;
line-height: 1.2;
}
.sf-download__badge-sub {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.6px;
text-transform: uppercase;
}
.sf-download__badge-main {
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: 0.3px;
margin-top: 1px;
}
.sf-download__showcase {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(var(--accent-rgb), 0.35) inset;
transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.sf-download__showcase:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 48px 120px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(var(--accent-rgb), 0.55) inset,
0 0 60px rgba(var(--accent-rgb), 0.3);
}
.sf-download__showcase-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.sf-download__showcase-glow {
position: absolute;
inset: -20px;
z-index: 0;
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--accent-rgb), 0.32), transparent 60%);
pointer-events: none;
filter: blur(20px);
}
.sf-download__showcase-frame {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: 24px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 80px rgba(var(--accent-rgb), 0.18) inset;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35) 100%);
}
.sf-download__trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
max-width: 900px;
margin: 0 auto;
}
.sf-download__trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 16px;
font-size: 13px;
font-weight: 600;
color: var(--foreground);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(var(--accent-rgb), 0.15);
border-radius: 12px;
transition: all 0.3s ease;
}
.sf-download__trust-item:hover {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.4);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
0 0 16px rgba(var(--accent-rgb), 0.18);
}
.sf-download__compat {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 28px;
font-size: 12px;
color: var(--muted-foreground);
opacity: 0.7;
}
.sf-download__compat::before,
.sf-download__compat::after {
content: '';
flex: 0 1 80px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
@media (max-width: 960px) {
.sf-download__hero { grid-template-columns: 1fr; gap: 40px; }
.sf-download__showcase { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 600px) {
.sf-download { padding: 64px 0; }
.sf-download__title { font-size: 30px; }
.sf-download__card { padding: 28px 24px; }
.sf-download__card-head { gap: 14px; }
.sf-download__app-icon { width: 64px; height: 64px; }
.sf-download__app-icon img,
.sf-download__app-icon svg { width: 46px; height: 46px; }
.sf-download__app-name { font-size: 22px; }
}
.sf-download__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin-top: 48px;
margin-bottom: 32px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.sf-download__item {
display: flex;
flex-direction: column;
padding: 24px 26px 22px;
background: var(--card, rgba(255,255,255,0.04));
border: 1px solid var(--border, rgba(var(--accent-rgb),0.18));
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sf-download__item:hover {
transform: translateY(-4px);
border-color: var(--primary);
box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.18),
0 0 0 1px rgba(var(--primary-rgb), 0.3) inset;
}
.sf-download__item-platform {
display: inline-block;
align-self: flex-start;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--primary);
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.25);
border-radius: 100px;
margin-bottom: 12px;
}
.sf-download__item-name {
font-size: 17px;
font-weight: 700;
color: var(--card-foreground, var(--foreground));
margin: 0 0 8px;
}
.sf-download__item-desc {
font-size: 13.5px;
line-height: 1.65;
color: var(--muted-foreground);
margin: 0 0 14px;
flex: 1;
}
.sf-download__item-btn {
display: inline-block;
align-self: flex-start;
font-size: 13px;
font-weight: 600;
color: var(--primary);
transition: transform 0.2s ease;
}
.sf-download__item:hover .sf-download__item-btn {
transform: translateX(4px);
}
@media (max-width: 600px) {
.sf-download__items { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.sf-download__item { padding: 18px 20px 16px; }
.sf-download__item-name { font-size: 16px; }
}
.sf-download--qr-glow .sf-download__qr-img {
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sf-download--qr-glow .sf-download__qr-img:hover {
box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.35);
transform: scale(1.03);
}
.sf-download--btn-bounce .btn-primary {
animation: download-btn-bounce 3s ease-in-out infinite;
}
@keyframes download-btn-bounce {
0%, 80%, 100% { transform: translateY(0); }
85% { transform: translateY(-6px); }
90% { transform: translateY(0); }
93% { transform: translateY(-3px); }
96% { transform: translateY(0); }
}
.sf-download--platform-glow .sf-download__platform-btn {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sf-download--platform-glow .sf-download__platform-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.sf-download--icon-glow .sf-download__app-icon {
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
transition: box-shadow 0.3s ease;
}
.sf-download--icon-glow .sf-download__app-icon:hover {
box-shadow:
0 0 25px rgba(var(--primary-rgb), 0.25),
0 8px 20px rgba(0,0,0,0.12);
}
.sf-download--glass-chips .sf-download__chip {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
}
.sf-download--gradient-bg {
background: linear-gradient(
180deg,
var(--background),
color-mix(in srgb, var(--background), var(--primary) 3%)
);
}
.sf-download--stagger .sf-download__platform-btn {
opacity: 0;
animation: download-platform-in 0.4s ease forwards;
}
.sf-download--stagger .sf-download__platform-btn:nth-child(1) { animation-delay: 0.1s; }
.sf-download--stagger .sf-download__platform-btn:nth-child(2) { animation-delay: 0.2s; }
.sf-download--stagger .sf-download__platform-btn:nth-child(3) { animation-delay: 0.3s; }
.sf-download--stagger .sf-download__platform-btn:nth-child(4) { animation-delay: 0.4s; }
@keyframes download-platform-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sf-download--btn-bounce .btn-primary { animation: none; }
.sf-download--stagger .sf-download__platform-btn { animation: none; opacity: 1; }
}
.sf-cta--sticky {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
padding: 80px 24px;
position: relative;
overflow: hidden;
text-align: center;
}
.sf-cta--sticky::before {
content: '';
position: absolute;
top: -30%; right: -5%;
width: 400px; height: 400px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
pointer-events: none;
}
.sf-cta--sticky::after {
content: '';
position: absolute;
bottom: -20%; left: -10%;
width: 300px; height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
pointer-events: none;
}
.sf-cta--sticky > * { position: relative; z-index: 1; }
.sf-cta--sticky .heading {
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.sf-cta--sticky .sf-cta__subtitle {
font-size: 16px;
opacity: 0.85;
margin-bottom: 8px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.sf-cta--sticky .sf-cta__urgency {
color: var(--accent);
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.sf-cta--sticky .btn {
font-size: 18px;
padding: 16px 48px;
border-radius: 999px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.2s, box-shadow 0.2s;
}
.sf-cta--sticky .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
.sf-cta__btn--glow {
animation: btn-pulse 2.5s ease-in-out infinite;
}
.sf-cta--btn-pulse .btn-primary {
animation: cta-btn-glow 2.5s ease-in-out infinite;
}
@keyframes cta-btn-glow {
0%, 100% { box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3), 0 4px 15px rgba(0,0,0,0.2); }
50% { box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.5), 0 4px 25px rgba(0,0,0,0.3); }
}
.sf-cta--gradient-bg {
background: linear-gradient(-45deg, var(--primary), var(--accent), var(--primary)) !important;
background-size: 300% 300% !important;
animation: cta-gradient-shift 6s ease infinite;
}
@keyframes cta-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.sf-cta--urgency .btn-primary {
animation: cta-urgency-shake 5s ease-in-out infinite;
}
@keyframes cta-urgency-shake {
0%, 90%, 100% { transform: translateX(0); }
92%, 96% { transform: translateX(-3px); }
94%, 98% { transform: translateX(3px); }
}
.sf-cta--neon-border {
border: 1px solid rgba(var(--primary-rgb), 0.3);
box-shadow:
0 0 10px rgba(var(--primary-rgb), 0.1),
inset 0 0 10px rgba(var(--primary-rgb), 0.05);
}
.sf-cta--particles::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.15), transparent),
radial-gradient(2px 2px at 30% 60%, rgba(var(--primary-rgb), 0.2), transparent),
radial-gradient(1.5px 1.5px at 50% 40%, rgba(255,255,255,0.1), transparent),
radial-gradient(2px 2px at 70% 80%, rgba(var(--primary-rgb), 0.15), transparent),
radial-gradient(1.5px 1.5px at 90% 30%, rgba(255,255,255,0.12), transparent);
pointer-events: none;
z-index: 0;
}
.sf-cta--sticky-enhanced.sf-cta--sticky {
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
border-top: 1px solid rgba(var(--primary-rgb), 0.2);
}
.sf-cta--pulse-ring .btn-primary {
position: relative;
}
.sf-cta--pulse-ring .btn-primary::before {
content: '';
position: absolute;
inset: -4px;
border: 2px solid var(--primary);
border-radius: inherit;
animation: cta-pulse-ring 2s ease-out infinite;
}
@keyframes cta-pulse-ring {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sf-cta--btn-pulse .btn-primary { animation: none; }
.sf-cta--gradient-bg { animation: none; background-size: 100% 100% !important; }
.sf-cta--urgency .btn-primary { animation: none; }
.sf-cta--pulse-ring .btn-primary::before { animation: none; }
}