.sf-nav {
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: var(--z-nav, 100);
min-height: 64px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.3s, box-shadow 0.3s;
}
.sf-nav__brand {
color: var(--header-foreground, #fff);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 10px;
}
.sf-nav__brand img { height: 40px; }
.sf-nav__links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.sf-nav__link {
padding: var(--space-nav-v, 0.5rem) var(--space-nav-h, 1rem);
color: var(--header-foreground, #fff);
font-size: 15px;
font-weight: 500;
border-radius: 6px;
transition: background var(--transition-fast), color var(--transition-fast);
text-decoration: none;
}
.sf-nav__link:hover {
background: rgba(255,255,255,0.1);
color: var(--primary);
}
.sf-nav__link--active {
color: var(--primary);
}
.sf-nav__dropdown {
position: relative;
}
.sf-nav__submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
z-index: calc(var(--z-nav) + 10);
}
.sf-nav__dropdown:hover .sf-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sf-nav__submenu-item {
display: block;
padding: 10px 20px;
color: var(--foreground);
font-size: 14px;
transition: background var(--transition-fast);
}
.sf-nav__submenu-item:hover {
background: var(--surface);
color: var(--primary);
}
.sf-nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 6px;
background: none;
border: none;
cursor: pointer;
}
.sf-nav__toggle-bar {
display: block;
width: 100%;
height: 2px;
background: var(--header-foreground, #fff);
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
.sf-nav__toggle[aria-expanded="true"] .sf-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sf-nav__toggle[aria-expanded="true"] .sf-nav__toggle-bar:nth-child(2) { opacity: 0; }
.sf-nav__toggle[aria-expanded="true"] .sf-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) {
.sf-nav { padding: 12px 16px; flex-wrap: wrap; }
.sf-nav__brand { font-size: 18px; }
.sf-nav__brand img { height: 32px; }
.sf-nav__toggle { display: flex; }
.sf-nav__links {
display: none;
width: 100%;
flex-direction: column;
padding: 16px 0;
gap: 0;
}
.sf-nav__links--open { display: flex; }
.sf-nav__link { padding: 12px 0; border-bottom: 1px solid var(--border); }
.sf-nav__actions { width: 100%; padding-top: 12px; display: none; }
.sf-nav__links--open ~ .sf-nav__actions { display: block; }
}
.sf-nav--transparent {
position: absolute;
width: 100%;
background: transparent;
border-bottom: none;
box-shadow: none;
}
.sf-nav--transparent .sf-nav__brand {
color: #fff;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
font-weight: 700;
font-size: 20px;
}
.sf-nav--transparent .sf-nav__link {
color: rgba(255, 255, 255, 0.85);
}
.sf-nav--transparent .sf-nav__link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.sf-nav--scrolled {
background: var(--nav-bg, var(--background));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(16px);
}
.sf-nav--scrolled .sf-nav__brand {
color: var(--foreground);
text-shadow: none;
}
.sf-nav--transparent .sf-nav__brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), 0.45));
}
.sf-nav--transparent .sf-nav__brand-icon svg { width: 100%; height: 100%; }
.sf-nav--transparent .sf-nav__brand-text {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 800;
letter-spacing: 1px;
}
.sf-nav--scrolled .sf-nav__brand-text {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #000) 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
.sf-nav--transparent { padding: 12px 16px; }
}
.sf-nav--scroll-fill {
background: transparent;
transition: background var(--transition-normal, 250ms) ease, box-shadow var(--transition-normal, 250ms) ease;
}
.sf-nav--scroll-fill.scrolled {
background: rgba(var(--background-rgb, 10,10,20), 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
.sf-nav--logo-glow .sf-nav__logo {
text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
transition: text-shadow var(--transition-normal, 250ms) ease;
}
.sf-nav--logo-glow .sf-nav__logo:hover {
text-shadow:
0 0 10px rgba(var(--primary-rgb), 0.5),
0 0 25px rgba(var(--primary-rgb), 0.3);
}
.sf-nav--link-glow .sf-nav__link {
position: relative;
}
.sf-nav--link-glow .sf-nav__link::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
width: 0;
height: 2px;
background: var(--primary);
box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
transition: width 0.3s ease, left 0.3s ease;
}
.sf-nav--link-glow .sf-nav__link:hover::after {
width: 100%;
left: 0;
}
.sf-nav--active-glow .sf-nav__link--active {
color: var(--primary);
text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}
.sf-nav--active-glow .sf-nav__link--active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--primary);
box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
}
.sf-nav--separator {
border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
}
.sf-nav--gradient-border::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
opacity: 0.5;
}
.sf-nav--cta-pulse .sf-nav__cta {
animation: nav-cta-pulse 3s ease-in-out infinite;
}
@keyframes nav-cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.3); }
50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
.sf-nav--cta-pulse .sf-nav__cta { animation: none; }
}
.sf-hero { color: #fff; display: flex; position: relative; overflow: hidden; }
.sf-hero__title { font-size: 48px; font-weight: 800; margin-bottom: 20px; line-height: 1.1; letter-spacing: -0.02em; }
.sf-hero__subtitle { font-size: 20px; opacity: 0.9; margin-bottom: 40px; line-height: 1.6; }
.sf-hero__visual { flex: 1; min-width: 280px; max-width: 450px; text-align: center; }
.sf-hero__visual-placeholder {
width: 100%; aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: var(--image-radius, 16px);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 48px;
box-shadow: var(--shadow-xl);
}
.sf-hero__container {
position: relative;
z-index: 2;
}
.sf-hero__eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
padding: 6px 16px;
border-radius: 999px;
margin-bottom: 20px;
background: rgba(var(--primary-rgb), 0.15);
color: var(--primary);
border: 1px solid rgba(var(--primary-rgb), 0.25);
}
.sf-hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 32px;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: #fff;
}
.sf-hero__trust {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}
.sf-hero__chip {
font-size: 12px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
}
.sf-hero--split .sf-hero__chip {
background: rgba(var(--primary-rgb), 0.06);
border-color: rgba(var(--primary-rgb), 0.15);
color: var(--muted-foreground);
}
.sf-hero--split .sf-hero__eyebrow {
color: var(--primary);
}
.sf-hero__image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--image-radius, 16px);
box-shadow: var(--shadow-xl);
}
@media (max-width: 768px) {
.sf-hero__title { font-size: 32px; }
.sf-hero__subtitle { font-size: 16px; }
.sf-hero__actions { justify-content: center; }
.sf-hero__trust { justify-content: center; }
}
.sf-hero--fullscreen {
min-height: 85vh;
padding: 140px 40px 80px;
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.18), transparent 38%),
linear-gradient(135deg, rgba(4, 10, 24, 0.96), rgba(12, 24, 48, 0.88));
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
color: #fff;
}
.sf-hero__backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
filter: saturate(1.05) contrast(1.03);
}
.sf-hero--fullscreen::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.35) 40%,
rgba(0, 0, 0, 0.7) 100%
);
z-index: -1;
}
.sf-hero--fullscreen > :not(.sf-hero__backdrop) { position: relative; z-index: 1; }
.sf-hero--fullscreen .container { position: relative; }
.sf-hero--fullscreen .sf-hero__title {
max-width: 800px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
font-size: 52px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.sf-hero--fullscreen .sf-hero__subtitle {
max-width: 600px;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
font-size: 20px;
opacity: 0.9;
line-height: 1.6;
}
@media (max-width: 768px) {
.sf-hero--fullscreen { min-height: 70vh; padding: 100px 20px 60px; }
.sf-hero--fullscreen .sf-hero__title { font-size: 36px; }
.sf-hero--fullscreen .sf-hero__subtitle { font-size: 17px; }
}
.sf-hero--fullscreen .container::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.sf-hero--fullscreen::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15), transparent 70%);
border-radius: 50%;
animation: float-bubble 6s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.sf-hero--fullscreen .btn {
padding: 16px 40px;
font-size: 18px;
border-radius: 999px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.sf-hero--fullscreen .btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.sf-hero--fullscreen .sf-hero__eyebrow {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
}
.sf-hero--fullscreen .sf-hero__actions {
justify-content: center;
}
.sf-hero--fullscreen .sf-hero__trust {
justify-content: center;
}
.sf-hero--effects .sf-hero__orb-1 {
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.12), transparent 70%);
border-radius: 50%;
top: 10%;
right: 5%;
animation: hero-orb-float 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.sf-hero--effects .sf-hero__orb-2 {
position: absolute;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08), transparent 70%);
border-radius: 50%;
bottom: 15%;
left: 8%;
animation: hero-orb-float 10s ease-in-out 2s infinite reverse;
pointer-events: none;
z-index: 0;
}
@keyframes hero-orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.05); }
66% { transform: translate(-15px, 15px) scale(0.95); }
}
.sf-hero--gradient-mesh::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 40%, rgba(var(--primary-rgb), 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 60%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(var(--primary-rgb), 0.05) 0%, transparent 40%);
z-index: 0;
pointer-events: none;
}
.sf-hero--animated-grid .container::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
animation: hero-grid-drift 20s linear infinite;
pointer-events: none;
}
@keyframes hero-grid-drift {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.sf-hero--neon-title .sf-hero__title {
text-shadow:
0 0 10px rgba(var(--primary-rgb), 0.5),
0 0 30px rgba(var(--primary-rgb), 0.3),
0 0 60px rgba(var(--primary-rgb), 0.15),
0 2px 20px rgba(0,0,0,0.5);
}
.sf-hero--gradient-title .sf-hero__title {
background: linear-gradient(135deg, #fff, var(--primary), #fff);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: hero-title-shimmer 6s ease infinite;
}
@keyframes hero-title-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.sf-hero--bottom-fade::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(transparent, var(--background));
pointer-events: none;
z-index: 1;
}
.sf-hero--diagonal {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
margin-bottom: -60px;
}
.sf-hero--vignette::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
z-index: 0;
pointer-events: none;
}
.sf-hero--cta-glow .btn-primary {
box-shadow:
0 0 15px rgba(var(--primary-rgb), 0.4),
0 4px 20px rgba(0,0,0,0.3);
animation: hero-cta-pulse 2.5s ease-in-out infinite;
}
@keyframes hero-cta-pulse {
0%, 100% { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4), 0 4px 20px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.6), 0 4px 30px rgba(0,0,0,0.4); }
}
@media (prefers-reduced-motion: reduce) {
.sf-hero--effects .sf-hero__orb-1,
.sf-hero--effects .sf-hero__orb-2 { animation: none; }
.sf-hero--animated-grid .container::before { animation: none; }
.sf-hero--gradient-title .sf-hero__title { animation: none; background-size: 100% 100%; }
.sf-hero--cta-glow .btn-primary { animation: none; }
}
.sf-nav--default {
background: var(--nav-bg, var(--background));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid var(--border);
}
.sf-nav--default .sf-nav__brand {
font-weight: 700;
font-size: 20px;
color: var(--foreground);
}
.sf-nav--default .sf-nav__brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 8px;
background: rgba(var(--primary-rgb), 0.08);
color: var(--primary);
}
.sf-nav--default .sf-nav__brand-icon svg { width: 100%; height: 100%; }
.sf-nav--default .sf-nav__brand-text {
color: var(--foreground);
font-weight: 700;
letter-spacing: 0.5px;
}