:root {
    --glass-blur: 24px;
    --glass-light: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .32));
    --glass-light-border: rgba(255, 255, 255, .76);
    --glass-dark: linear-gradient(135deg, rgba(25, 47, 74, .48), rgba(7, 17, 31, .28));
    --glass-dark-border: rgba(255, 255, 255, .2);
    --glass-light-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), inset 1px 0 0 rgba(255, 255, 255, .42), 0 22px 60px rgba(7, 17, 31, .11);
    --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 1px 0 0 rgba(255, 255, 255, .08), 0 28px 70px rgba(0, 0, 0, .26);
}

.site-header {
    background: linear-gradient(110deg, rgba(7, 17, 31, .7), rgba(16, 36, 60, .48));
    border-bottom-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 16px 42px rgba(0, 0, 0, .17);
}

.hero,
.inner-hero,
.section-steps {
    background:
        radial-gradient(circle at 78% 22%, rgba(73, 137, 255, .2), transparent 31%),
        radial-gradient(circle at 20% 82%, rgba(57, 231, 178, .11), transparent 34%),
        var(--ink-950);
}

.section-use-cases,
.section-features,
.section-pricing,
.section-soft {
    background:
        radial-gradient(circle at 12% 18%, rgba(73, 137, 255, .18), transparent 27%),
        radial-gradient(circle at 86% 72%, rgba(57, 231, 178, .17), transparent 29%),
        linear-gradient(145deg, #f5f8fb, #eaf2f4 52%, #f6f8fc);
}

.button-primary,
.button-dark,
.button-outline,
.button-ghost,
.button-disabled,
.glass-toggle,
.menu-toggle {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(7, 17, 31, .09), 0 14px 34px rgba(7, 17, 31, .13);
}

.button-primary {
    background: rgba(97, 241, 195, .9);
    border-color: rgba(255, 255, 255, .42);
}

.button-dark {
    background: rgba(7, 17, 31, .9);
    border-color: rgba(255, 255, 255, .14);
}

.button-outline {
    background: rgba(255, 255, 255, .42);
    border-color: rgba(203, 213, 223, .78);
}

.button-ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .26);
}

.button-disabled {
    background: rgba(238, 243, 246, .7);
    border-color: rgba(255, 255, 255, .54);
}

.button-primary::after,
.button-dark::after,
.button-outline::after,
.button-ghost::after,
.glass-toggle::after,
.menu-toggle::after {
    content: "";
    position: absolute;
    inset: 2px 18% auto;
    height: 30%;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .2), transparent);
    filter: blur(1px);
    pointer-events: none;
}

.phone-card {
    background: var(--glass-dark);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 1px 0 0 rgba(255, 255, 255, .08), 0 40px 100px rgba(0, 0, 0, .35);
}

.stage-glow {
    position: absolute;
    width: min(110%, 470px);
    aspect-ratio: 1;
    display: block;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 32%, rgba(73, 137, 255, .95), transparent 34%),
        radial-gradient(circle at 72% 62%, rgba(57, 231, 178, .75), transparent 32%),
        radial-gradient(circle at 45% 78%, rgba(141, 93, 255, .58), transparent 29%);
    filter: blur(32px);
    opacity: .72;
    transform: rotate(-12deg) scale(.92);
}

.phone-top { background: rgba(7, 17, 31, .4); }
.phone-chat { background: rgba(7, 17, 31, .28); }

.message {
    background: linear-gradient(135deg, rgba(44, 68, 96, .54), rgba(21, 38, 60, .34));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.message-user { background: linear-gradient(135deg, rgba(50, 133, 118, .62), rgba(27, 83, 78, .42)); }
.editor-message { background: linear-gradient(135deg, rgba(45, 73, 112, .54), rgba(22, 38, 60, .34)); border-color: rgba(132, 175, 255, .32); }

.chat-event {
    background: rgba(12, 28, 48, .38);
    border-color: rgba(255, 255, 255, .24);
    box-shadow: var(--glass-dark-shadow);
}

.use-case-card,
.feature-card,
.result-card,
.price-card,
.benefit-card,
.seo-process-grid li,
.use-list-grid li,
.related-grid a,
.format-details-grid article,
.explain-grid article {
    background: var(--glass-light);
    border-color: var(--glass-light-border);
    box-shadow: var(--glass-light-shadow);
}

.feature-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s ease, border-color .32s ease, box-shadow .32s ease, color .32s ease;
}

.feature-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(73, 137, 255, .88), rgba(52, 102, 210, .68));
    opacity: 0;
    transition: opacity .32s ease;
    pointer-events: none;
}

.feature-card > * {
    position: relative;
    z-index: 1;
}

.feature-card .icon-box,
.feature-card h3,
.feature-card p {
    transition: color .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), inset 1px 0 0 rgba(255, 255, 255, .42), 0 28px 72px rgba(7, 17, 31, .16);
}

.use-case-grid {
    gap: 14px;
    border: 0;
}

.use-case-card {
    border: 1px solid var(--glass-light-border);
    border-radius: var(--radius-md);
}

.feature-card-accent {
    border-color: rgba(255, 255, 255, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .16), 0 24px 64px rgba(73, 137, 255, .24);
}

.feature-card-accent::after { opacity: 1; }

.price-card-active {
    border-color: rgba(7, 17, 31, .76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 20px 55px rgba(7, 17, 31, .14);
}

.step-card {
    background: var(--glass-dark);
    border-color: var(--glass-dark-border);
    box-shadow: var(--glass-dark-shadow);
}

.formats-panel {
    background:
        radial-gradient(circle at 82% 20%, rgba(73, 137, 255, .24), transparent 34%),
        linear-gradient(135deg, rgba(11, 23, 40, .68), rgba(20, 42, 72, .48));
    border: 1px solid rgba(255, 255, 255, .23);
    box-shadow: var(--glass-dark-shadow);
}

.format-cloud span {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 32px rgba(0, 0, 0, .13);
}

.final-cta-inner {
    background:
        radial-gradient(circle at 82% 20%, rgba(57, 231, 178, .15), transparent 32%),
        linear-gradient(135deg, rgba(7, 17, 31, .72), rgba(18, 40, 65, .48));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: var(--glass-dark-shadow);
}

.inner-visual {
    background: linear-gradient(135deg, rgba(73, 137, 255, .2), rgba(18, 36, 59, .3));
    border-color: rgba(255, 255, 255, .25);
    box-shadow: var(--glass-dark-shadow);
}

.icon-box,
.tag-list span,
.price-badge,
.legal-label {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px rgba(7, 17, 31, .07);
}

.legal-notice {
    background: rgba(255, 250, 235, .78);
    border-color: rgba(242, 211, 140, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 42px rgba(124, 75, 0, .08);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header,
    .button-primary,
    .button-dark,
    .button-outline,
    .button-ghost,
    .button-disabled,
    .glass-toggle,
    .menu-toggle,
    .phone-card,
    .phone-top,
    .phone-chat,
    .message,
    .chat-event,
    .use-case-card,
    .feature-card,
    .result-card,
    .price-card,
    .step-card,
    .formats-panel,
    .format-cloud span,
    .final-cta-inner,
    .inner-visual,
    .benefit-card,
    .seo-process-grid li,
    .use-list-grid li,
    .related-grid a,
    .format-details-grid article,
    .explain-grid article,
    .legal-notice {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.04);
        backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.04);
    }
}

@media (max-width: 620px) {
    :root { --glass-blur: 16px; }
    .main-nav { background: rgba(7, 17, 31, .68); }
    .main-nav.is-open {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
        backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .main-nav,
    .button,
    .phone-card,
    .phone-top,
    .phone-chat,
    .message,
    .chat-event,
    .use-case-card,
    .feature-card,
    .result-card,
    .price-card,
    .step-card,
    .formats-panel,
    .format-cloud span,
    .final-cta-inner,
    .inner-visual,
    .benefit-card,
    .seo-process-grid li,
    .use-list-grid li,
    .related-grid a,
    .format-details-grid article,
    .explain-grid article,
    .legal-notice {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .site-header,
    .main-nav,
    .phone-card,
    .phone-top,
    .phone-chat,
    .message,
    .chat-event,
    .step-card,
    .formats-panel,
    .final-cta-inner,
    .inner-visual { background: var(--ink-900); }

    .use-case-card,
    .feature-card:not(.feature-card-accent),
    .result-card,
    .price-card,
    .benefit-card,
    .seo-process-grid li,
    .use-list-grid li,
    .related-grid a,
    .format-details-grid article,
    .explain-grid article { background: var(--white); }
}

@media (prefers-contrast: more) {
    :root {
        --glass-light: rgba(255, 255, 255, .9);
        --glass-dark: rgba(7, 17, 31, .86);
    }
}