.ff-section {
    position: relative;
    height: 320vh;
    background: var(--background, #0e0e0e);
    font-family: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.ff-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.ff-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    perspective: 1100px;
    perspective-origin: 50% 48%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.ff-chip {
    position: absolute;
    transform: translate(-50%, -50%) translateZ(var(--z, 0px)) translateY(var(--drift, 0px));
    opacity: var(--vis, 0);
    will-change: transform, opacity;
}

.ff-chip-inner {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 8px 8px;
    white-space: nowrap;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--text-primary, #fff) 6%, transparent),
            color-mix(in srgb, var(--text-primary, #fff) 2.5%, transparent));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary, #fff) 5%, transparent) inset,
                0 10px 30px -18px rgba(0, 0, 0, 0.55);
    animation: ff-float 11s ease-in-out infinite;
}

.ff-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 7px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary, #fff) 9%, transparent);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}
.ff-ico img,
.ff-ico svg {
    display: block;
    width: 19px;
    height: 19px;
    object-fit: contain;
    border-radius: 3px;
}

.ff-chip-inner--logo {
    padding: 7px 13px;
}
.ff-logo {
    display: block;
    height: 19px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
}

.ff-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #f4f4f5);
    opacity: 0.9;
}

.ff-center {
    position: relative;
    z-index: 3;
    max-width: 620px;
    padding: 0 28px;
    text-align: center;
}

.ff-title {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.ff-desc {
    margin: 1.15rem auto 0;
    max-width: 468px;
    font-size: clamp(0.95rem, 1.5vw, 1.06rem);
    line-height: 1.6;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
}

.ff-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.6rem;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #fff);
    text-decoration: none;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
    background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ff-cta:hover {
    background: color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);
    border-color: var(--border-strong, rgba(255, 255, 255, 0.3));
    transform: translateY(-1px);
}
.ff-cta svg { transition: transform 0.18s ease; }
.ff-cta:hover svg { transform: translateX(2px); }

.ff-sticky::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 48%,
        transparent 52%,
        color-mix(in srgb, var(--background, #0e0e0e) 78%, transparent) 100%);
}

@keyframes ff-float {
    0%,  100% { transform: translate(0, 0); }
    50%       { transform: translate(0, -7px); }
}

.ff-section:not(.ff-ready) .ff-chip {
    --z: 0px;
    --vis: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .ff-section { height: auto; }
    .ff-sticky { position: relative; height: auto; min-height: 100vh; padding: 12vh 0; }
    .ff-chip { --z: 0px !important; --vis: 0.85 !important; }
    .ff-chip-inner { animation: none; }
}

@media (max-width: 720px) {
    .ff-section { height: auto; }
    .ff-sticky { position: relative; height: auto; overflow: visible; flex-direction: column; padding: 9vh 20px; gap: 34px; }
    .ff-field { position: relative; inset: auto; height: auto; perspective: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; }
    .ff-chip { position: relative !important; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; }
    .ff-chip-inner { animation: none; }
    .ff-sticky::after { display: none; }
    .ff-center { order: 2; }
    .ff-field { order: 1; }
}