/* ===== v2raytun.com Design System — Exact Replica ===== */
:root {
    --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size: 96px;
    --font-size-2: 64px;
    --font-size-3: 36px;
    --font-size-4: 32px;
    --font-size-5: 24px;
    --font-size-6: 20px;
    --font-size-7: 18px;
    --font-size-8: 16px;
    --font-size-9: 14px;
    --padding: 64px;
    --padding-2: 48px;
    --padding-3: 32px;
    --padding-4: 24px;
    --padding-5: 20px;
    --padding-6: 18px;
    --padding-7: 14px;
    --padding-8: 12px;
    --padding-9: 8px;
    --padding-10: 4px;
    --border-size: 1px solid;
    --border-size-2: 2px solid;
    --border-radius: 50px;
    --border-radius-2: 32px;
    --border-radius-3: 20px;
    --width: 90%;
    --max-width: 1600px;
    --max-width-2: 1130px;
    --blur: 18px;
    --header: 70px;
    --opacity: .8;
    --opacity-2: .5;
    --transition: .3s ease-in-out;
    --text: #fff;
    --text-2: #ffffffb2;
    --text-3: #888;
    --text-4: #ffffff80;
    --text-5: #5c5c5c;
    --text-6: #4d4d4d;
    --text-7: #88888880;
    --text-gradient: linear-gradient(0deg, var(--text) 6%, var(--text-6) 87%);
    --background: #0d0624;
    --background-2: #1a1038;
    --background-transparent: #0d0624aa;
    --background-gradient: linear-gradient(92deg, var(--background-2) 7%, var(--background) 24%, var(--background) 77%, var(--background-2) 95%);
    --background-gradient-2: linear-gradient(130deg, var(--background-2) 25%, var(--background) 40%, var(--background) 60%, var(--background-2) 75%);
    --border: #3e3e3e;
    --border-2: #484848;
    --border-3: #242424;
    --border-4: #ffffff10;
    --accent: #8b5cf6;
    --accent-2: #6c5ce7;
    --green: #22c55e;
    --red: #ef4444;
    --gold: #facc15;
    --star: #facc15;
    color-scheme: dark;
}

/* ===== Light Theme ===== */
[data-theme="light"] {
    --text: #1a1a2e;
    --text-2: #333333b2;
    --text-3: #777;
    --text-4: #1a1a2e80;
    --text-5: #999;
    --text-6: #bbb;
    --text-7: #88888840;
    --text-gradient: linear-gradient(0deg, #1a1a2e 6%, #888 87%);
    --background: #f2f2f7;
    --background-2: #e4e4ec;
    --background-transparent: #f2f2f7dd;
    --background-gradient: linear-gradient(92deg, var(--background-2) 7%, var(--background) 24%, var(--background) 77%, var(--background-2) 95%);
    --background-gradient-2: linear-gradient(130deg, var(--background-2) 25%, var(--background) 40%, var(--background) 60%, var(--background-2) 75%);
    --border: #d0d0d8;
    --border-2: #c4c4cc;
    --border-3: #dddde4;
    --border-4: #00000010;
    color-scheme: light;
}
[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(247,147,26,.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 60%, rgba(34,197,94,.03) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 100%, rgba(139,92,246,.04) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 80%, rgba(247,147,26,.03) 0%, transparent 40%);
}

/* ===== Reset & Base ===== */
::selection { background: var(--text); color: var(--background); }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    background: var(--background);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(247,147,26,.05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 60%, rgba(34,197,94,.04) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 100%, rgba(139,92,246,.06) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 80%, rgba(247,147,26,.04) 0%, transparent 40%);
    background-attachment: fixed;
}
html, body {
    color: var(--text);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    min-height: 100lvh;
    position: relative;
    overflow-x: clip;
}
body { animation: 1s ease-out fade; }

/* Transitions only for interactive elements */
a, button, .button, .news-card, .exchange-card, .theme-toggle, input, select {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
img { -webkit-user-select: none; user-select: none; pointer-events: none; max-width: 100%; }
a { cursor: pointer; color: var(--text); text-decoration: none; }
ul, ol { list-style: none; }

/* ===== Buttons (v2raytun exact) ===== */
.button, button.btn {
    font-family: var(--font-family);
    font-size: var(--font-size-7);
    color: var(--text);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--padding-8);
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: var(--padding-7) var(--padding-6);
    background: var(--background-gradient-2);
    outline: none;
    font-weight: 400;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.button::before, button.btn::before {
    transition: var(--transition);
    content: "";
    background-color: var(--text);
    opacity: 0;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
.button.alternative { background: #fff; border-color: transparent; }
.button.alternative::before { opacity: 1; }
.button.alternative span { color: var(--background); }
[data-theme="light"] .button.alternative { background: #1a1a2e; }
[data-theme="light"] .button.alternative span { color: #fff; }
.button span, button.btn span { position: relative; z-index: 1; }
.button svg, button.btn svg { width: 24px; height: 24px; fill: none; stroke: var(--text); position: relative; z-index: 1; }
.button.cta-btn svg { stroke: var(--text); fill: none; }
@media (any-hover: hover) {
    button:hover, .button:hover { opacity: var(--opacity) !important; }
}
a:active, button:active, .button:active {
    transform: scale(.975);
    opacity: var(--opacity-2) !important;
}

/* ===== App Container ===== */
.app { padding: var(--padding-3) 0; min-height: calc(100svh - var(--header) - var(--padding-3)*2); position: relative; z-index: 1; }
.app.landing { gap: calc(var(--padding) * 3); display: grid; overflow: hidden; }

/* ===== Section Base ===== */
.section { scroll-margin-top: calc(var(--header) + var(--padding-2)); }
.section:not(.default-block) { width: 100%; }
.section.default-block {
    z-index: 1;
    width: var(--width);
    max-width: var(--max-width);
    margin: auto;
    position: relative;
}

/* ===== Default Title (v2raytun exact) ===== */
.default-title {
    gap: var(--padding-4);
    text-align: center;
    width: fit-content;
    margin: auto;
    display: grid;
    position: relative;
}
.default-title span.pill {
    font-size: var(--font-size-7);
    padding: var(--padding-7) var(--padding-5);
    border: var(--border-size) var(--border-2);
    border-radius: var(--border-radius);
    background: var(--background-gradient);
    width: fit-content;
    margin: auto;
    font-weight: 400;
}
.default-title h1 {
    background: var(--text-gradient);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: var(--font-size-2);
    font-weight: 600;
    line-height: 1.09;
    -webkit-user-select: none;
    user-select: none;
}
.default-title h2 {
    color: var(--text-5);
    font-size: var(--font-size-7);
    font-weight: 400;
}

/* ===== Header (v2raytun exact) ===== */
header {
    z-index: 123456789;
    background-color: var(--background-transparent);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    border-bottom: var(--border-size) transparent;
    width: 100%;
    height: calc(var(--header) - 1px);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: sticky;
    top: 0; left: 0;
}
header.active { border-color: var(--border-4); }
header .content {
    width: var(--width);
    max-width: var(--max-width);
    justify-content: space-between;
    align-items: center;
    margin: auto;
    display: flex;
}
header .content .logotype {
    align-items: center;
    gap: var(--padding-7);
    font-size: var(--font-size-5);
    font-weight: 600;
    display: flex;
    white-space: nowrap;
}
header .content .logotype .logo-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
header .content .logotype .logo-icon img,
.header-mobile .logotype .logo-icon img,
footer .logotype .logo-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: auto;
    filter: brightness(1.4) drop-shadow(0 0 4px rgba(247,147,26,.5));
}
[data-theme="light"] header .content .logotype .logo-icon img,
[data-theme="light"] .header-mobile .logotype .logo-icon img,
[data-theme="light"] footer .logotype .logo-icon img {
    filter: brightness(1) drop-shadow(0 0 2px rgba(247,147,26,.3));
}
header .content .links {
    align-items: center;
    gap: var(--padding-3);
    width: fit-content;
    margin: auto;
    display: flex;
    position: absolute;
    left: 0; right: 0;
    justify-content: center;
}
header .content .links a {
    color: var(--text-2);
    font-size: var(--font-size-8);
    font-weight: 400;
}
header .content .links a:hover { color: var(--text); }
header .content .manage {
    gap: var(--padding-8);
    display: flex;
    align-items: center;
}
header .content .manage .button {
    font-size: var(--font-size-8);
    padding: var(--padding-9) var(--padding-7);
}
header .content .manage .theme-toggle {
    background: var(--background-gradient-2);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: var(--padding-9) var(--padding-7);
    cursor: pointer;
    color: var(--text);
    font-size: var(--font-size-8);
    display: flex;
    align-items: center;
    gap: var(--padding-9);
    font-family: var(--font-family);
    font-weight: 400;
    position: relative;
    overflow: hidden;
    z-index: 10;
    pointer-events: auto;
}
header .content .manage .theme-toggle::before {
    transition: var(--transition);
    content: "";
    background-color: var(--text);
    opacity: 0;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
header .content .manage .theme-toggle span { position: relative; z-index: 1; }
header .content .manage .theme-toggle:hover {
    border-color: var(--accent);
    background: var(--background-gradient);
}
header .content .manage .theme-toggle:active {
    transform: scale(0.95);
}
.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }

header .content .media {
    display: none;
    cursor: pointer;
    background: none; border: none; padding: 0;
}
header .content .media svg {
    opacity: var(--opacity-2);
    width: 28px; height: 28px;
    stroke: var(--text);
    fill: none;
}

/* Mobile Menu */
.header-mobile {
    opacity: 0;
    pointer-events: none;
    z-index: 123456789;
    background-color: var(--background-transparent);
    width: 100%;
    height: 100lvh;
    position: fixed;
    top: 0; left: 0;
    transition: opacity var(--transition);
}
.header-mobile.active {
    opacity: 1;
    pointer-events: all;
}
.header-mobile .mob-content {
    background-color: var(--background);
    z-index: 1;
    width: calc(100% - var(--padding-3)*2);
    max-width: calc(var(--max-width)/2.5);
    height: calc(100lvh - var(--padding-3)*2);
    padding: var(--padding-3);
    position: absolute;
    top: 0; right: 0;
}
.header-mobile .mob-content .in {
    align-content: space-between;
    gap: var(--padding);
    height: calc(100svh - var(--padding-3)*2);
    grid-template-rows: auto 1fr auto;
    display: grid;
}
.header-mobile .mob-content .in .mob-title {
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.header-mobile .mob-content .in .mob-title .logotype {
    align-items: center;
    gap: var(--padding-7);
    font-size: var(--font-size-5);
    font-weight: 600;
    display: flex;
}
.header-mobile .mob-content .in .mob-title .close-btn {
    display: flex;
    cursor: pointer;
    background: none; border: none; padding: 0;
}
.header-mobile .mob-content .in .mob-title .close-btn svg {
    width: 32px; height: 32px;
    stroke: var(--text);
    opacity: var(--opacity-2);
}
.header-mobile .mob-content .in .mob-links {
    align-content: center;
    gap: var(--padding-6);
    display: grid;
}
.header-mobile .mob-content .in .mob-links a {
    color: var(--text-2);
    font-size: var(--font-size-5);
    font-weight: 400;
}
.header-mobile .mob-content .in .mob-links a:hover { color: var(--text); }

@media screen and (max-width: 1280px) {
    header .content .links { gap: var(--padding-5); position: static; }
    header .content .manage { gap: var(--padding-9); }
}
@media screen and (max-width: 768px) {
    header .content .links, header .content .manage { display: none; }
    header .content .media { display: flex; }
}

/* ===== Hero Section (v2raytun exact) ===== */
.section.hero {
    min-height: calc(945px - var(--header) - var(--padding-3)*2);
    align-content: center;
    gap: calc(var(--padding) * 1.5);
    display: grid;
    position: relative;
    padding-bottom: var(--padding-3);
}
.section.hero .background {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    pointer-events: none;
}
.section.hero .background .glow {
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(139,92,246,.08) 0%, transparent 70%);
}

/* ===== Bitcoin Full-Page Background ===== */
.bitcoin-bg-fixed {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bitcoin-bg-fixed::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at top, rgba(139,92,246,.03) 0%, transparent 50%),
                radial-gradient(ellipse at bottom, rgba(247,147,26,.02) 0%, transparent 50%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.bitcoin-bg-fixed img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(2px) saturate(.7) brightness(.5);
    opacity: .45;
    transform: scale(1.05);
    animation: bgPulse 12s ease-in-out infinite;
    pointer-events: none;
}
[data-theme="light"] .bitcoin-bg-fixed img {
    filter: blur(2px) saturate(.4) brightness(1.2) contrast(.9);
    opacity: .18;
}
@keyframes bgPulse {
    0%, 100% { transform: scale(1.05); filter: blur(2px) saturate(.7) brightness(.5); }
    50% { transform: scale(1.08); filter: blur(3px) saturate(.8) brightness(.45); }
}
/* Golden glare highlights */
.bitcoin-bg-fixed .glare {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.bitcoin-bg-fixed .glare-1 {
    width: 500px; height: 500px;
    top: 10%; left: 20%;
    background: radial-gradient(circle, rgba(247,147,26,.12) 0%, transparent 70%);
    animation: glareMove1 15s ease-in-out infinite;
}
.bitcoin-bg-fixed .glare-2 {
    width: 600px; height: 600px;
    top: 40%; right: 10%;
    background: radial-gradient(circle, rgba(247,147,26,.08) 0%, transparent 70%);
    animation: glareMove2 20s ease-in-out infinite;
}
.bitcoin-bg-fixed .glare-3 {
    width: 400px; height: 400px;
    bottom: 10%; left: 40%;
    background: radial-gradient(circle, rgba(139,92,246,.1) 0%, transparent 70%);
    animation: glareMove3 18s ease-in-out infinite;
}
[data-theme="light"] .bitcoin-bg-fixed .glare-1 { background: radial-gradient(circle, rgba(247,147,26,.12) 0%, transparent 70%); }
[data-theme="light"] .bitcoin-bg-fixed .glare-2 { background: radial-gradient(circle, rgba(247,147,26,.08) 0%, transparent 70%); }
[data-theme="light"] .bitcoin-bg-fixed .glare-3 { background: radial-gradient(circle, rgba(139,92,246,.1) 0%, transparent 70%); }
@keyframes glareMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, 40px) scale(1.1); }
    66% { transform: translate(-40px, 80px) scale(.9); }
}
@keyframes glareMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-80px, -40px) scale(1.15); }
    66% { transform: translate(50px, -70px) scale(.95); }
}
@keyframes glareMove3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -50px) scale(1.1); }
}

/* Moving glow blobs */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(120px);
    opacity: .06;
}
.bg-blob.blob-1 {
    width: 600px; height: 600px;
    background: var(--accent);
    top: -200px; left: -100px;
    animation: blobMove1 20s ease-in-out infinite;
}
.bg-blob.blob-2 {
    width: 500px; height: 500px;
    background: #f59e0b;
    bottom: -200px; right: -100px;
    animation: blobMove2 25s ease-in-out infinite;
}
.bg-blob.blob-3 {
    width: 400px; height: 400px;
    background: #22c55e;
    top: 50%; left: 60%;
    animation: blobMove3 18s ease-in-out infinite;
}
[data-theme="light"] .bg-blob { opacity: .04; }
@keyframes blobMove1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(120px, 80px); }
    66% { transform: translate(-60px, 160px); }
}
@keyframes blobMove2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-100px, -60px); }
    66% { transform: translate(80px, -120px); }
}
@keyframes blobMove3 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-80px, 60px); }
    66% { transform: translate(100px, -40px); }
}
.section.hero .hero-content {
    gap: var(--padding-4);
    width: var(--width);
    max-width: var(--max-width);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    position: relative;
}
.section.hero .hero-content .hero-left {
    text-align: left;
    display: grid;
    gap: var(--padding-4);
}
.section.hero .hero-content .hero-left .hero-manage { justify-content: flex-start; }
.section.hero .hero-content .hero-right {
    display: flex;
    justify-content: center;
}
.section.hero .hero-content .hero-right .phone-mockup {
    width: 236.8px;
    height: 516.8px;
    max-width: none;
    animation: gliding 4s ease-in-out infinite;
}
@media screen and (max-width: 1024px) {
    .section.hero .hero-content { grid-template-columns: 1fr; text-align: center; }
    .section.hero .hero-content .hero-left { text-align: center; }
    .section.hero .hero-content .hero-left .pre-title { margin: 0 auto; }
    .section.hero .hero-content .hero-left .hero-manage { justify-content: center; }
    .section.hero .hero-content .hero-right .phone-mockup { width: 210px; height: 458px; }
}
@media screen and (max-width: 768px) {
    .section.hero .hero-content .hero-right { display: flex; }
    .section.hero .hero-content .hero-right .phone-mockup { width: 180px; height: 394px; }
}
.section.hero .hero-content .pre-title {
    align-items: center;
    gap: var(--padding-7);
    width: fit-content;
    padding: var(--padding-9);
    border: var(--border-size) var(--border-2);
    border-radius: var(--border-radius);
    background: var(--background-gradient);
    margin: 0;
    display: flex;
    font-size: var(--font-size-7);
    font-weight: 400;
}
.section.hero .hero-content .pre-title svg {
    width: 40px; height: 40px;
}
.section.hero .hero-content .pre-title p {
    font-size: var(--font-size-7);
    margin-right: var(--padding-7);
    font-weight: 400;
}
.section.hero .hero-content h1 {
    background: var(--text-gradient);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: var(--font-size);
    font-weight: 600;
    line-height: 1.09;
    -webkit-user-select: none;
    user-select: none;
}
.section.hero .hero-content h3 {
    color: var(--text-5);
    font-size: var(--font-size-7);
    font-weight: 400;
}
.section.hero .hero-content .hero-manage {
    gap: var(--padding-7);
    justify-content: center;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
}
.section.hero .hero-list {
    grid-column: 1 / -1;
    gap: var(--padding-4);
    text-align: center;
    margin: auto;
    display: grid;
}
.section.hero .hero-list h4 {
    font-size: var(--font-size-8);
    color: var(--text-3);
    font-weight: 300;
}
.section.hero .hero-list .hero-tags {
    gap: var(--padding-2);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.section.hero .hero-list .hero-tags .tag {
    font-size: var(--font-size-9);
    padding: var(--padding-9) var(--padding-6);
    border: var(--border-size) var(--border);
    border-radius: var(--border-radius);
    background: var(--background-gradient-2);
    font-weight: 400;
    color: var(--text-3);
}

@media screen and (max-width: 1280px) {
    :root {
        --font-size: 80px; --font-size-2: 54px; --font-size-3: 32px;
        --font-size-4: 28px; --font-size-5: 20px; --font-size-6: 18px;
        --font-size-7: 16px; --font-size-8: 14px; --font-size-9: 12px;
    }
    .section.hero { min-height: calc(750px - var(--header) - var(--padding-3)*2); gap: var(--padding); }
    .app.landing { gap: calc(var(--padding) * 2); }
}
@media screen and (max-width: 1024px) {
    :root { --font-size: 72px; --font-size-2: 50px; }
    .section.hero { min-height: calc(700px - var(--header) - var(--padding-3)*2); gap: var(--padding-2); }
    .section.hero .hero-content .hero-manage { margin-top: 0; }
    .app.landing { gap: var(--padding); }
}
@media screen and (max-width: 768px) {
    :root { --font-size-2: 39px; }
    .section.hero { min-height: calc(650px - var(--header) - var(--padding-3)*2); }
    .section.hero .hero-content h1 { font-size: var(--font-size-2); }
    .section.hero .hero-list .hero-tags { gap: var(--padding-6); }
    .default-title h1 { font-size: var(--font-size-3); }
}

/* ===== Advantages Grid (v2raytun exact) ===== */
.section.advantages {
    gap: var(--padding);
    display: grid;
    margin-top: calc(var(--padding) * -1.5) !important;
}
.section.advantages .adv-list {
    flex-wrap: wrap;
    display: flex;
}
.section.advantages .adv-list .adv-block {
    flex: 1 1 calc(25% - var(--padding-4)*2);
    padding: var(--padding-3) var(--padding-4);
    gap: var(--padding-7);
    align-content: start;
    display: grid;
    position: relative;
}
.section.advantages .adv-list .adv-block::before {
    content: "";
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
.section.advantages .adv-list .adv-block:first-child {
    border-bottom: var(--border-size);
    border-image: linear-gradient(90deg, transparent, var(--border)) 1;
}
.section.advantages .adv-list .adv-block:nth-child(4) {
    border-bottom: var(--border-size);
    border-image: linear-gradient(90deg, var(--border), transparent) 1;
}
.section.advantages .adv-list .adv-block:nth-child(2),
.section.advantages .adv-list .adv-block:nth-child(3) {
    border-bottom: var(--border-size) var(--border);
}
.section.advantages .adv-list .adv-block:first-child::before,
.section.advantages .adv-list .adv-block:nth-child(2)::before,
.section.advantages .adv-list .adv-block:nth-child(3)::before {
    border-right: var(--border-size);
    border-image: linear-gradient(transparent, var(--border)) 1;
}
.section.advantages .adv-list .adv-block:nth-child(5)::before,
.section.advantages .adv-list .adv-block:nth-child(6)::before,
.section.advantages .adv-list .adv-block:nth-child(7)::before {
    border-right: var(--border-size);
    border-image: linear-gradient(var(--border) 20%, transparent) 1;
}
.section.advantages .adv-list .adv-block .adv-icon {
    margin-bottom: var(--padding-7);
    width: 64px; height: 64px;
}
.section.advantages .adv-list .adv-block .adv-icon svg {
    width: 100%; height: 100%;
    stroke: var(--text);
    fill: none;
    stroke-width: 1.5;
}
.section.advantages .adv-list .adv-block h3 {
    font-size: var(--font-size-5);
    font-weight: 400;
    line-height: 1;
}
.section.advantages .adv-list .adv-block h4 {
    font-size: var(--font-size-7);
    color: var(--text-4);
    font-weight: 300;
}

@media screen and (max-width: 1024px) {
    .section.advantages { margin-top: 0 !important; }
    .section.advantages .adv-list .adv-block {
        flex: 1 1 calc(25% - var(--padding-6)*2);
        padding: var(--padding-5) var(--padding-6);
        gap: var(--padding-9);
    }
    .section.advantages .adv-list .adv-block .adv-icon { width: 50px; height: 50px; }
    .section.advantages .adv-list .adv-block h3 { font-size: var(--font-size-6); }
    .section.advantages .adv-list .adv-block h4 { font-size: var(--font-size-8); }
}
@media screen and (max-width: 768px) {
    .section.advantages { gap: var(--padding-2); }
    .section.advantages .adv-list { display: grid; }
    .section.advantages .adv-list .adv-block { width: auto; }
    .section.advantages .adv-list .adv-block:not(:last-child) {
        border-bottom: var(--border-size);
        border-image: linear-gradient(90deg, transparent, var(--border), transparent) 1 !important;
    }
    .section.advantages .adv-list .adv-block::before { content: none; }
}

/* ===== Exchange Cards (v2raytun pricing style) ===== */
.section.exchanges {
    gap: var(--padding);
    display: grid;
}
.exchange-list {
    gap: var(--padding-3);
    display: flex;
    flex-direction: column;
}
.exchange-card {
    padding: var(--padding-3);
    border: var(--border-size) var(--border);
    border-radius: var(--border-radius-2);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    background: radial-gradient(70% 93% at 100% 100%, #343434b3 0%, #000000b3 100%);
    display: grid;
    gap: var(--padding-4);
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .exchange-card {
    background: radial-gradient(70% 93% at 100% 100%, #e8e8f0b3 0%, #ffffffb3 100%);
}
.exchange-card:hover {
    opacity: 1;
    box-shadow: 0 0 60px -10px rgba(139,92,246,.15), 0 8px 40px -15px rgba(0,0,0,.4);
    border-color: var(--border-2);
}
.exchange-card:active { transform: scale(.995); }
[data-theme="light"] .exchange-card:hover {
    box-shadow: 0 0 60px -10px rgba(139,92,246,.1), 0 8px 40px -15px rgba(0,0,0,.08);
}

.exchange-card .rank-badge {
    position: absolute;
    top: var(--padding-5);
    right: var(--padding-3);
    font-size: var(--font-size-3);
    font-weight: 600;
    color: var(--text-5);
    opacity: .3;
    -webkit-user-select: none;
    user-select: none;
}
.exchange-card.featured {
    border-color: var(--accent);
    background: radial-gradient(70% 93% at 100% 100%, #2d1b69b3 0%, #000000b3 100%);
}
[data-theme="light"] .exchange-card.featured {
    background: radial-gradient(70% 93% at 100% 100%, #e0d4ffb3 0%, #ffffffb3 100%);
}
.exchange-card.featured .button.cta-btn {
    border-color: var(--accent);
    background: linear-gradient(130deg, #2d1b69 25%, var(--background) 40%, var(--background) 60%, #2d1b69 75%);
}
[data-theme="light"] .exchange-card.featured .button.cta-btn {
    background: linear-gradient(130deg, #5b3cc4 0%, #7c5ce7 50%, #5b3cc4 100%);
    border-color: #7c5ce7;
}
[data-theme="light"] .exchange-card.featured .button.cta-btn span {
    color: #fff;
}
[data-theme="light"] .exchange-card.featured .button.cta-btn svg {
    stroke: #fff;
}
[data-theme="light"] .button.cta-btn {
    background: linear-gradient(130deg, var(--background-2) 25%, #fff 50%, var(--background-2) 75%);
}
[data-theme="light"] .button.cta-btn span {
    color: #1a1a2e;
}
[data-theme="light"] .button.cta-btn svg {
    stroke: #1a1a2e;
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: var(--padding-6);
    flex-wrap: wrap;
}
.exchange-logo {
    width: 56px; height: 56px;
    border-radius: var(--border-radius-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--background-gradient-2);
    border: var(--border-size) var(--border);
}
.exchange-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: auto;
}
.card-header-info { display: grid; gap: 2px; }
.card-header-info h3 {
    font-size: var(--font-size-4);
    font-weight: 500;
}
.card-header-info .top-label {
    font-size: var(--font-size-9);
    color: var(--accent);
    font-weight: 400;
}
.card-header .rating {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}
.card-header .rating .rating-number {
    font-size: var(--font-size-3);
    font-weight: 400;
}
.card-header .rating .rating-label {
    font-size: var(--font-size-9);
    color: var(--text-3);
    font-weight: 300;
}
.card-header .rating .rating-stars {
    color: var(--star);
    font-size: var(--font-size-9);
    letter-spacing: 2px;
}

/* Card Body */
.card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-3);
}

/* Stats */
.stats-grid {
    gap: var(--padding-5);
    display: grid;
}
.stat-item {
    gap: var(--padding-8);
    font-size: var(--font-size-8);
    align-items: center;
    font-weight: 300;
    display: flex;
}
.stat-item svg {
    width: 21px; min-width: 21px;
    height: 21px; min-height: 21px;
    stroke: var(--text);
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
}
.stat-item .stat-label {
    color: var(--text-3);
    min-width: 140px;
}
.stat-item .stat-value {
    font-weight: 500;
}

/* Pros / Cons */
.pros-cons {
    gap: var(--padding-5);
    display: grid;
}
.pros h4, .cons h4 {
    font-size: var(--font-size-8);
    font-weight: 500;
    margin-bottom: var(--padding-9);
}
.pros h4 { color: var(--green); }
.cons h4 { color: var(--red); }
.pros li, .cons li {
    font-size: var(--font-size-8);
    color: var(--text-3);
    padding: 3px 0;
    padding-left: 20px;
    position: relative;
    font-weight: 300;
}
.pros li::before {
    content: '✓';
    position: absolute; left: 0;
    color: var(--green);
    font-weight: 600;
}
.cons li::before {
    content: '✗';
    position: absolute; left: 0;
    color: var(--red);
    font-weight: 600;
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--padding-8);
}
.button.cta-btn {
    padding: var(--padding-7) var(--padding-4);
    font-size: var(--font-size-7);
    gap: var(--padding-8);
}
.card-footer .bonus {
    font-size: var(--font-size-9);
    color: var(--text-3);
    font-weight: 300;
}
.card-footer .bonus strong {
    color: var(--accent);
    font-weight: 500;
}

/* Review bar */
.user-reviews {
    display: flex;
    align-items: center;
    gap: var(--padding-8);
}
.review-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border-3);
    overflow: hidden;
}
.review-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 1s ease;
}
.review-label {
    font-size: var(--font-size-9);
    color: var(--text-5);
    white-space: nowrap;
    font-weight: 300;
}

@media screen and (max-width: 768px) {
    .exchange-card { padding: var(--padding-5); gap: var(--padding-5); }
    .card-body { grid-template-columns: 1fr; }
    .card-header { flex-direction: column; align-items: flex-start; }
    .card-header .rating { margin-left: 0; }
    .section.exchanges { gap: var(--padding-2); }
}

/* ===== Comparison Table ===== */
.section.comparison {
    gap: var(--padding);
    display: grid;
}
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--border-radius-2);
    border: var(--border-size) var(--border);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    background: radial-gradient(70% 93% at 100% 100%, #343434b3 0%, #000000b3 100%);
}
[data-theme="light"] .table-wrapper {
    background: radial-gradient(70% 93% at 100% 100%, #e8e8f0b3 0%, #ffffffb3 100%);
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}
.comparison-table th {
    padding: var(--padding-7) var(--padding-6);
    text-align: left;
    font-size: var(--font-size-9);
    font-weight: 500;
    color: var(--text-5);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: var(--border-size) var(--border-3);
    white-space: nowrap;
    background: transparent;
}
.comparison-table td {
    padding: var(--padding-7) var(--padding-6);
    font-size: var(--font-size-8);
    border-bottom: var(--border-size) var(--border-3);
    white-space: nowrap;
    font-weight: 300;
    background: transparent;
}
.comparison-table tr:hover td {
    background: rgba(255,255,255,.03);
}
[data-theme="light"] .comparison-table tr:hover td {
    background: rgba(0,0,0,.03);
}
.comparison-table .exchange-name-cell {
    display: flex;
    align-items: center;
    gap: var(--padding-8);
    font-weight: 500;
}
.comparison-table .mini-logo {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.comparison-table .mini-logo img {
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.badge-yes, .badge-no, .badge-optional {
    display: inline-block;
    padding: var(--padding-10) var(--padding-8);
    border-radius: var(--border-radius);
    font-size: var(--font-size-9);
    font-weight: 400;
}
.badge-yes { background: rgba(34,197,94,.12); color: var(--green); }
.badge-no { background: rgba(239,68,68,.1); color: var(--red); }
.badge-optional { background: rgba(234,179,8,.1); color: var(--gold); }

.table-btn {
    font-size: var(--font-size-9) !important;
    padding: var(--padding-10) var(--padding-7) !important;
    border-radius: var(--border-radius) !important;
}

/* ===== FAQ (v2raytun exact) ===== */
.section.faq {
    gap: var(--padding);
    display: grid;
}
.faq-flex {
    gap: var(--padding-4);
    display: flex;
}
.faq-flex .faq-col {
    align-content: start;
    width: 100%;
    display: grid;
}
.faq-flex .faq-col .question {
    grid-template-rows: min-content 0fr;
    -webkit-user-select: none;
    user-select: none;
    padding: var(--padding-4) 0;
    display: grid;
    cursor: pointer;
}
.faq-flex .faq-col .question:first-child { padding-top: 0; }
.faq-flex .faq-col .question:active {
    opacity: var(--opacity);
    transform: scale(1);
}
.faq-flex .faq-col .question:not(:first-child) {
    border-top: var(--border-size) #8889;
}
.faq-flex .faq-col .question.active .q-title svg {
    opacity: var(--opacity);
    transform: rotate(180deg);
}
.faq-flex .faq-col .question.active .q-answer {
    display: block;
    animation: faqOpen .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.faq-flex .faq-col .question .q-title {
    font-size: var(--font-size-5);
    color: var(--text-3);
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-4);
    font-weight: 400;
    display: flex;
}
[data-theme="light"] .faq-flex .faq-col .question .q-title {
    color: #333;
}
.faq-flex .faq-col .question .q-title svg {
    width: 32px; min-width: 32px;
    height: 16px; min-height: 16px;
    stroke: var(--text-3);
    fill: none;
    stroke-width: 2;
    transition: transform var(--transition), opacity var(--transition);
}
.faq-flex .faq-col .question .q-answer {
    margin-top: var(--padding-5);
    font-size: var(--font-size-7);
    color: var(--text-3);
    font-weight: 300;
    display: none;
    line-height: 1.6;
}
[data-theme="light"] .faq-flex .faq-col .question .q-answer {
    color: #555;
}
.faq-flex .faq-col .question .q-answer a {
    color: var(--accent);
    font-weight: 400;
}

@media screen and (max-width: 768px) {
    .section.faq { gap: var(--padding-2); }
    .faq-flex { gap: 0; display: grid; }
    .faq-flex .faq-col:first-child {
        border-bottom: var(--border-size) #8889;
        margin-bottom: var(--padding-5);
    }
    .faq-flex .faq-col:first-child .question { padding: var(--padding-5) 0; }
    .faq-flex .faq-col:first-child .question:first-child { padding-top: 0; }
}

/* ===== Reviews Section ===== */
.section.reviews {
    gap: var(--padding);
    display: grid;
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-4);
}
.review-card {
    padding: var(--padding-3);
    border: var(--border-size) var(--border);
    border-radius: var(--border-radius-2);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    background: radial-gradient(70% 93% at 100% 100%, #343434b3 0%, #000000b3 100%);
    display: grid;
    gap: var(--padding-6);
    align-content: start;
}
[data-theme="light"] .review-card {
    background: radial-gradient(70% 93% at 100% 100%, #e8e8f0b3 0%, #ffffffb3 100%);
}
.review-card .review-header {
    display: flex;
    align-items: center;
    gap: var(--padding-8);
}
.review-card .review-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--background-gradient-2);
    border: var(--border-size) var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-7);
    font-weight: 600;
    color: var(--text-3);
    flex-shrink: 0;
}
.review-card .review-author {
    display: grid;
    gap: 2px;
}
.review-card .review-author .name {
    font-size: var(--font-size-8);
    font-weight: 500;
}
.review-card .review-author .exchange-used {
    font-size: var(--font-size-9);
    color: var(--accent);
    font-weight: 400;
}
.review-card .review-stars {
    color: var(--star);
    font-size: var(--font-size-9);
    letter-spacing: 2px;
}
.review-card .review-text {
    font-size: var(--font-size-8);
    color: var(--text-3);
    font-weight: 300;
    line-height: 1.6;
}
.review-card .review-date {
    font-size: var(--font-size-9);
    color: var(--text-5);
    font-weight: 300;
}
@media screen and (max-width: 1024px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
    .reviews-grid { grid-template-columns: 1fr; }
}

/* ===== Phone Mockup ===== */
.phone-mockup {
    width: 100%;
    max-width: 320px;
    margin: auto;
    position: relative;
}
.phone-mockup .phone-frame {
    border-radius: var(--border-radius-2);
    border: var(--border-size-2) var(--border-2);
    overflow: hidden;
    background: #000;
    aspect-ratio: 9/19.5;
    position: relative;
    box-shadow: 0 20px 60px -10px rgba(0,0,0,.5), 0 0 80px -20px rgba(139,92,246,.15);
}
.phone-mockup .phone-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: auto;
}
.phone-mockup .phone-notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 28px;
    background: #000;
    border-radius: 0 0 18px 18px;
    z-index: 2;
}

/* ===== Crypto Ticker Widgets ===== */
.crypto-ticker {
    width: var(--width);
    max-width: var(--max-width);
    margin: var(--padding-3) auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--padding-6);
    position: relative;
    z-index: 1;
}
.ticker-card {
    padding: var(--padding-5) var(--padding-4);
    border: var(--border-size) var(--border);
    border-radius: var(--border-radius-3);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    background: radial-gradient(70% 93% at 100% 100%, #343434b3 0%, #000000b3 100%);
    display: flex;
    align-items: center;
    gap: var(--padding-8);
}
[data-theme="light"] .ticker-card {
    background: radial-gradient(70% 93% at 100% 100%, #e8e8f0b3 0%, #ffffffb3 100%);
}
.ticker-card .ticker-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ticker-card .ticker-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: auto;
}
.ticker-card .ticker-info {
    display: grid; gap: 2px; flex: 1; min-width: 0;
}
.ticker-card .ticker-name {
    font-size: var(--font-size-9); color: var(--text-3); font-weight: 400;
}
.ticker-card .ticker-price {
    font-size: var(--font-size-7); font-weight: 500;
}
.ticker-card .ticker-change {
    font-size: var(--font-size-9); font-weight: 400;
}
.ticker-card .ticker-change.up { color: var(--green); }
.ticker-card .ticker-change.down { color: var(--red); }
.ticker-card .ticker-chart {
    width: 80px; height: 32px; flex-shrink: 0;
}
.ticker-card .ticker-chart svg {
    width: 100%; height: 100%;
}
@media screen and (max-width: 1024px) {
    .crypto-ticker { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
    .crypto-ticker { grid-template-columns: 1fr 1fr; gap: var(--padding-9); }
    .ticker-card .ticker-chart { display: none; }
}

/* ===== Footer (v2raytun exact) ===== */
footer {
    z-index: 1;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-top: var(--border-size) var(--border-3);
    border-left: var(--border-size) var(--border-3);
    border-right: var(--border-size) var(--border-3);
    background: linear-gradient(100deg, var(--background-2) -3%, var(--background) 18%, var(--background) 82%, var(--background-2) 104%);
    scroll-margin-top: calc(var(--header) + var(--padding-2));
    align-items: center;
    display: flex;
    position: relative;
}
footer .footer-content {
    width: var(--width);
    max-width: var(--max-width);
    gap: var(--padding-7);
    margin: auto;
    margin-top: var(--padding-5);
    margin-bottom: var(--padding-7);
    display: grid;
}
footer .footer-content .up {
    justify-content: space-between;
    gap: var(--padding-3);
    display: flex;
}
footer .footer-content .up .company {
    align-content: center;
    display: grid;
}
footer .footer-content .up .company .logotype {
    align-items: center;
    gap: var(--padding-7);
    font-size: var(--font-size-5);
    width: fit-content;
    font-weight: 600;
    display: flex;
}
footer .footer-content .up .f-links {
    gap: var(--padding-2);
    display: flex;
}
footer .footer-content .up .f-links .f-block {
    gap: var(--padding-9);
    align-content: start;
    display: grid;
}
footer .footer-content .up .f-links .f-block h2 {
    font-size: var(--font-size-7);
    margin-bottom: var(--padding-10);
    font-weight: 400;
}
footer .footer-content .up .f-links .f-block a {
    font-size: var(--font-size-9);
    color: var(--text-3);
    font-weight: 300;
}
footer .footer-content .up .f-links .f-block a:hover { color: var(--text); }
footer .footer-content .down {
    border-top: var(--border-size) var(--border-3);
    padding-top: var(--padding-7);
    justify-content: space-between;
    gap: var(--padding-4);
    font-size: var(--font-size-9);
    color: var(--text-3);
    align-items: center;
    font-weight: 300;
    display: flex;
}
footer .footer-content .down .f-desc {
    text-align: right;
    max-width: 380px;
    line-height: 1.4;
    color: var(--text-5);
}

@media screen and (max-width: 1024px) {
    footer .footer-content { gap: var(--padding-7); margin-top: var(--padding-7); }
    footer .footer-content .up { gap: var(--padding-4); }
    footer .footer-content .up .f-links { gap: var(--padding-5); }
}
@media screen and (max-width: 768px) {
    footer .footer-content .up { gap: var(--padding-3); display: grid; }
    footer .footer-content .up .company { text-align: center; }
    footer .footer-content .up .company .logotype { margin: auto; }
    footer .footer-content .up .f-links { gap: var(--padding-6); flex-wrap: wrap; }
    footer .footer-content .up .f-links .f-block {
        flex: 1 1 calc((100% - var(--padding-6))/2);
    }
    footer .footer-content .down { gap: var(--padding-8); display: grid; text-align: center; }
    footer .footer-content .down .f-desc { text-align: center; max-width: none; }
}

/* ===== Animations ===== */
@keyframes fade {
    0%, 10% { opacity: 0; filter: blur(12px) grayscale(); }
    to { opacity: 1; filter: none; }
}
@keyframes gliding {
    50% { translate: 0 12px; }
}

/* Card hover glow shimmer */
.exchange-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
    transition: left .6s ease;
    pointer-events: none;
}
.exchange-card:hover::after {
    left: 120%;
}
[data-theme="light"] .exchange-card::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.02), transparent);
}

/* Logo icon Bitcoin style */
.logo-icon {
    position: relative;
}
.logo-icon svg {
    width: 20px; height: 20px;
    fill: #fff;
}

/* Staggered reveal with blur */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(6px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* Hero text stagger animation */
.hero-content > * {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    animation: heroIn .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: .15s; }
.hero-content > *:nth-child(2) { animation-delay: .3s; }
.hero-content > *:nth-child(3) { animation-delay: .45s; }
.hero-content > *:nth-child(4) { animation-delay: .6s; }
.hero-list {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    animation: heroIn .8s cubic-bezier(.22,1,.36,1) .75s forwards;
}
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Advantage blocks stagger */
.adv-block {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    animation: heroIn .6s cubic-bezier(.22,1,.36,1) forwards;
    animation-play-state: paused;
}
.adv-block.animate {
    animation-play-state: running;
}
.adv-block:nth-child(1) { animation-delay: 0s; }
.adv-block:nth-child(2) { animation-delay: .07s; }
.adv-block:nth-child(3) { animation-delay: .14s; }
.adv-block:nth-child(4) { animation-delay: .21s; }
.adv-block:nth-child(5) { animation-delay: .28s; }
.adv-block:nth-child(6) { animation-delay: .35s; }
.adv-block:nth-child(7) { animation-delay: .42s; }
.adv-block:nth-child(8) { animation-delay: .49s; }

/* ===== Back to Top ===== */
.back-to-top {
    position: fixed;
    bottom: var(--padding-3);
    right: var(--padding-3);
    z-index: 900;
    width: 48px; height: 48px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--background-gradient-2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-7);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ===== Responsive landing gap ===== */
@media screen and (max-width: 1280px) {
    .section.advantages { margin-top: calc(var(--padding) / -1) !important; }
    .section.advantages .adv-list .adv-block {
        flex: 1 1 calc(25% - var(--padding-5)*2);
        padding: var(--padding-4) var(--padding-5);
    }
}
@media screen and (max-width: 768px) {
    .app.landing { gap: var(--padding); }
}