:root {
    --color-light-blue: #c1e3f9;
    --color-sky-blue: #54a5ea;
    --color-cornflower: #3f7fe1;
    --color-periwinkle: #5357d7;
    --color-purple: #7c2acc;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-text: #1a1a2e;
    --color-text-muted: #4a5568;
    --color-bg: #f5f8fc;
    --color-accent: var(--color-periwinkle);
    --color-accent-dark: var(--color-cornflower);
    --color-accent-light: var(--color-sky-blue);
    --color-accent-soft: rgba(83, 87, 215, 0.12);
    --color-accent-bg: rgba(193, 227, 249, 0.55);
    --gradient-brand: linear-gradient(135deg, var(--color-sky-blue) 0%, var(--color-periwinkle) 55%, var(--color-purple) 100%);
    --gradient-soft: linear-gradient(135deg, var(--color-light-blue) 0%, var(--color-sky-blue) 100%);
}

* {
    box-sizing: border-box;
}

html {
    font-family: "Poppins", Arial, sans-serif;
}

body {
    margin: 0;
    font-family: "Poppins", Arial, sans-serif;
    color: #202124;
    background: #f6f8fb;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea,
label {
    font: inherit;
}

body.modal-open {
    overflow: hidden;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px clamp(16px, 5vw, 72px);
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.top-bar__logo {
    display: inline-flex;
    align-items: center;
}

.top-bar__logo img {
    display: block;
    width: min(280px, 62vw);
    height: auto;
}

.top-bar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-bar__logo--text {
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.top-bar__logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--color-white);
    background: var(--gradient-brand);
    font-size: 15px;
    font-weight: 900;
}

.top-bar__logo-name {
    font-size: clamp(18px, 2.4vw, 24px);
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.top-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--color-periwinkle);
    background: var(--color-accent-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.top-bar__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-bar__icon:hover,
.top-bar__icon:focus-visible {
    transform: translateY(-2px);
    color: var(--color-white);
    background: var(--gradient-brand);
    box-shadow: 0 8px 18px rgba(83, 87, 215, 0.28);
}

.top-bar__icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.site-main {
    width: 100%;
}

.hero-section {
    display: block;
    min-height: clamp(560px, 72vh, 820px);
    padding: clamp(48px, 7vw, 88px) clamp(16px, 5vw, 72px);
    background-color: var(--color-bg);
    background-image:
        linear-gradient(90deg, rgba(245, 248, 252, 0.94) 0%, rgba(245, 248, 252, 0.55) 42%, rgba(245, 248, 252, 0.15) 62%, transparent 78%),
        radial-gradient(circle at 85% 40%, rgba(84, 165, 234, 0.28) 0%, rgba(83, 87, 215, 0.14) 38%, rgba(124, 42, 204, 0.08) 68%, transparent 100%),
        linear-gradient(160deg, var(--color-light-blue) 0%, rgba(193, 227, 249, 0.35) 35%, rgba(255, 255, 255, 0.9) 100%);
    background-position: left center, center right, center;
    background-size: 100% 100%, cover, cover;
    background-repeat: no-repeat;
}

.hero-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.hero-section__content {
    width: min(100%, 620px);
}

.hero-section__form {
    width: 100%;
}

.quote-form--hero {
    padding: clamp(22px, 3vw, 28px);
    border: 1px solid rgba(193, 227, 249, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 60px rgba(83, 87, 215, 0.14);
    backdrop-filter: blur(8px);
}

.quote-form--hero .quote-form__header--compact h2 {
    margin: 0 0 14px;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.2;
}

.quote-form--hero .quote-step__title {
    margin: 0 0 16px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 800;
}

.quote-form--hero .quote-step__intro {
    margin: 0 0 12px;
    color: #5f6c80;
    font-size: 13px;
    line-height: 1.55;
}

.quote-form--hero .quote-step__subtitle {
    margin: 18px 0 14px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
}

.quote-form--hero .quote-form__estimate {
    display: block;
    margin-bottom: 4px;
    color: var(--color-cornflower);
    font-size: 12px;
    font-weight: 700;
}

.quote-form--hero .quote-field > span {
    font-size: 12px;
}

.quote-form--hero .quote-field input,
.quote-form--hero .quote-field select,
.quote-form--hero .quote-field textarea {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
}

.quote-form--hero .quote-checkbox-list legend {
    font-size: 12px;
}

.quote-form--hero .quote-checkbox-list label {
    font-size: 13px;
}

.quote-checkbox-list--nested {
    margin-top: -4px;
    margin-bottom: 14px;
    padding: 12px 14px 6px;
    border: 1px solid rgba(193, 227, 249, 0.9);
    border-radius: 14px;
    background: rgba(193, 227, 249, 0.18);
}

.quote-checkbox-list--nested legend {
    margin-bottom: 8px;
    color: var(--color-cornflower);
    font-size: 11px !important;
}

.quote-form--hero .quote-form__actions .button {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
}

.hero-section__eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--color-periwinkle);
    background: var(--color-accent-bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-section h1 {
    max-width: 560px;
    margin: 0 0 18px;
    color: var(--color-text);
    font-size: clamp(29px, 4.2vw, 53px);
    line-height: 1.12;
}

.hero-section p {
    max-width: 560px;
    margin: 0;
    color: #3a4b5f;
    font-size: 18px;
    line-height: 1.7;
}

.hero-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.button--primary {
    color: var(--color-white);
    background: var(--gradient-brand);
}

.button--secondary {
    color: var(--color-text);
    background: #ffffff;
    border-color: rgba(16, 35, 63, 0.12);
}

.hero-section__bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-periwinkle);
    font-size: 13px;
    font-weight: 700;
}

.hero-section__bullets li {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    padding-left: 24px;
}

.hero-section__bullets li::before {
    content: "✓";
    position: absolute;
    top: 0.05em;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--color-cornflower);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.performance-cost-section {
    position: relative;
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(193, 227, 249, 0.26), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(208, 216, 228, 0.44), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
}

.performance-cost-section::before,
.performance-cost-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.performance-cost-section::before {
    top: 48px;
    right: 7%;
    width: 180px;
    height: 180px;
    border: 2px dashed rgba(63, 127, 225, 0.18);
}

.performance-cost-section::after {
    bottom: 58px;
    left: 4%;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(63, 127, 225, 0.22) 1px, transparent 1px);
    background-size: 13px 13px;
}

.performance-cost-section__header {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}

.performance-cost-section__header h2 {
    margin: 0 0 14px;
    color: var(--color-text);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
}

.performance-cost-section__header h2 strong {
    color: var(--color-accent);
}

.performance-cost-section__header p {
    max-width: 560px;
    margin: 0 auto;
    color: #3a4b5f;
    font-size: 15px;
    line-height: 1.6;
}

.impact-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.impact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(208, 216, 228, 0.74);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(9, 28, 58, 0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.impact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 76px rgba(9, 28, 58, 0.14);
}

.impact-card::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -54px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    opacity: 0.3;
    background: currentColor;
}

.impact-card__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 18px;
    color: currentColor;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.56)),
        currentColor;
    box-shadow: 0 14px 28px rgba(9, 28, 58, 0.1);
}

.impact-card__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.impact-card__number {
    position: absolute;
    top: 22px;
    right: 22px;
    color: rgba(9, 28, 58, 0.42);
    font-size: 12px;
    font-weight: 900;
}

.impact-card h3 {
    max-width: 220px;
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.15;
}

.impact-card h3::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 10px;
    background: currentColor;
}

.impact-card p {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: #3a4b5f;
    font-size: 13px;
    line-height: 1.55;
}

.impact-card__metric {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 10px;
    margin-top: auto;
    min-height: 78px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(208, 216, 228, 0.58);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(9, 28, 58, 0.07);
}

.impact-card__metric::before {
    content: "Impact estimé";
    position: absolute;
    top: 10px;
    left: 14px;
    color: currentColor;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.impact-card__metric::after {
    content: none;
}

.impact-card__metric strong {
    position: relative;
    z-index: 1;
    color: currentColor;
    margin-top: 22px;
    font-size: 24px;
    line-height: 1;
}

.impact-card__metric span {
    position: relative;
    z-index: 1;
    color: #3a4b5f;
    font-size: 11px;
    font-weight: 700;
}

.impact-card--green {
    color: var(--color-accent);
    border-color: rgba(83, 87, 215, 0.18);
    background:
        radial-gradient(circle at 88% 82%, rgba(83, 87, 215, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(232, 244, 253, 0.98), rgba(255, 255, 255, 0.94));
}

.impact-card--blue {
    color: var(--color-cornflower);
    border-color: rgba(63, 127, 225, 0.2);
    background:
        radial-gradient(circle at 88% 82%, rgba(63, 127, 225, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(239, 245, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.impact-card--orange {
    color: #bf7f2f;
    border-color: rgba(191, 127, 47, 0.24);
    background:
        radial-gradient(circle at 88% 82%, rgba(191, 127, 47, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(255, 246, 235, 0.98), rgba(255, 255, 255, 0.94));
}

.impact-card--blue-soft {
    color: var(--color-cornflower);
    border-color: rgba(60, 96, 152, 0.22);
    background:
        radial-gradient(circle at 88% 82%, rgba(60, 96, 152, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(242, 247, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.impact-card--dark {
    color: #ffffff;
    border-color: rgba(63, 127, 225, 0.38);
    background:
        linear-gradient(135deg, rgba(9, 28, 58, 0.94), rgba(60, 96, 152, 0.9)),
        radial-gradient(circle at 72% 18%, rgba(193, 227, 249, 0.45), transparent 24%);
}

.impact-card--dark h3,
.impact-card--dark p,
.impact-card--dark .impact-card__number,
.impact-card--dark .impact-card__metric span {
    color: #ffffff;
}

.impact-card--dark .impact-card__metric {
    border-color: rgba(208, 216, 228, 0.58);
    background: #ffffff;
}

.performance-cost-section__cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0 0;
    padding: 18px 22px;
    border: 1px solid rgba(208, 216, 228, 0.72);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 38px rgba(9, 28, 58, 0.07);
}

.performance-cost-section__cta strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-accent);
    font-size: 15px;
}

.performance-cost-section__cta p {
    max-width: 760px;
    margin: 0;
    color: #3a4b5f;
    font-size: 13px;
    line-height: 1.55;
}

.diagnostic-section {
    padding: clamp(72px, 8vw, 120px) clamp(16px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(193, 227, 249, 0.28), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.diagnostic-section__intro {
    max-width: 1360px;
    margin-bottom: clamp(82px, 8vw, 118px);
}

.section-eyebrow {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--color-accent);
    background: rgba(193, 227, 249, 0.28);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.diagnostic-section h2 {
    max-width: 1280px;
    margin: 0 0 18px;
    color: var(--color-text);
    font-size: clamp(36px, 4.4vw, 58px);
    line-height: 1.04;
}

.diagnostic-section__intro p {
    max-width: 1160px;
    margin: 0;
    color: #3a4b5f;
    font-size: 18px;
    line-height: 1.7;
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(20px, 2.5vw, 32px);
    align-items: start;
    max-width: 1440px;
    margin: 16px auto 0;
}

.diagnostic-form,
.live-dashboard {
    border: 1px solid rgba(208, 216, 228, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(9, 28, 58, 0.1);
    backdrop-filter: blur(16px);
}

.diagnostic-form {
    position: relative;
    display: grid;
    gap: 20px;
    padding: clamp(20px, 2.2vw, 30px);
    border-color: rgba(83, 87, 215, 0.22);
    box-shadow: 0 34px 95px rgba(9, 28, 58, 0.18), 0 0 0 8px rgba(193, 227, 249, 0.12);
}

.diagnostic-form::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 36px;
    background: radial-gradient(circle at 24% 16%, rgba(83, 87, 215, 0.18), transparent 42%);
}

.diagnostic-callout {
    position: absolute;
    top: -82px;
    right: -6px;
    display: grid;
    grid-template-columns: 190px 82px;
    gap: 8px;
    align-items: center;
    color: var(--color-accent);
    font-weight: 900;
    transform: rotate(-2deg);
}

.diagnostic-callout span {
    font-size: 15px;
    line-height: 1.2;
    text-align: right;
}

.diagnostic-callout svg {
    width: 92px;
    height: 50px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diagnostic-step {
    display: block;
}

.diagnostic-step--inline > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.diagnostic-step--inline h3 {
    max-width: none;
    margin: 0;
}

.diagnostic-step h3 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 16px;
}

.diagnostic-step--compact h3 {
    font-size: 14px;
}

.diagnostic-step__hint {
    margin: 0 0 14px;
    color: var(--color-cornflower);
    font-size: 11px;
    font-weight: 700;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 9px;
}

.choice-card input,
.segmented-control input,
.chip-grid input,
.funnel-choice-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card span,
.segmented-control span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px;
    border: 1px solid #d0d8e4;
    border-radius: 13px;
    color: #3a4b5f;
    background: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.choice-card span {
    flex-direction: column;
    min-height: 82px;
    gap: 8px;
}

.choice-card svg {
    width: 22px;
    height: 22px;
    color: var(--color-cornflower);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.choice-card input:checked + span svg {
    color: var(--color-accent);
}

.choice-card input:checked + span,
.segmented-control input:checked + span,
.chip-grid input:checked + span,
.funnel-choice-grid input:checked + span {
    color: #0d6241;
    border-color: var(--color-accent);
    background: rgba(193, 227, 249, 0.22);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.chip-grid,
.funnel-choice-grid {
    display: grid;
    gap: 7px;
}

.chip-grid--levers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chip-grid--intents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chip-grid--intents span {
    min-height: 44px;
    font-size: 10px;
    line-height: 1.25;
}

.chip-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chip-grid span,
.funnel-choice-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 8px;
    border: 1px solid #d0d8e4;
    border-radius: 11px;
    color: #3a4b5f;
    background: #ffffff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.funnel-choice-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding-top: 4px;
}

.funnel-choice-grid label {
    position: relative;
    padding-top: calc(var(--bar-height, 26px) + 6px);
}

.funnel-choice-grid label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 72%;
    height: var(--bar-height, 26px);
    border-radius: 5px;
    background: linear-gradient(180deg, var(--color-cornflower), var(--color-light-blue));
    transform: translateX(-50%);
    opacity: 0.38;
    clip-path: polygon(12% 0, 88% 0, 74% 100%, 26% 100%);
}

.funnel-choice-grid label:nth-child(1) {
    --bar-height: 34px;
}

.funnel-choice-grid label:nth-child(2) {
    --bar-height: 30px;
}

.funnel-choice-grid label:nth-child(3) {
    --bar-height: 26px;
}

.funnel-choice-grid label:nth-child(4) {
    --bar-height: 22px;
}

.funnel-choice-grid label:nth-child(5) {
    --bar-height: 18px;
}

.range-input {
    width: 100%;
    accent-color: var(--color-accent);
}

.range-input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-light-blue), var(--color-accent));
}

.range-input::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-light-blue), var(--color-accent));
}

.range-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    color: #6f7b8a;
    font-size: 10px;
    font-weight: 700;
}

.range-labels span:first-child {
    color: #d44949;
}

.range-labels span:last-child {
    color: var(--color-accent);
}

.toggle-row {
    display: flex;
    width: 100%;
}

.toggle-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #d0d8e4;
    border-radius: 12px;
    background: #ffffff;
    color: #3a4b5f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.toggle-field input {
    position: absolute;
    opacity: 0;
}

.toggle-field__switch {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #d0d8e4;
    transition: background 0.2s ease;
}

.toggle-field__switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(9, 28, 58, 0.18);
    transition: transform 0.2s ease;
}

.toggle-field input:checked + .toggle-field__switch {
    background: var(--color-accent);
}

.toggle-field input:checked + .toggle-field__switch::after {
    transform: translateX(18px);
}

.toggle-field > span:last-child {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.segmented-control span {
    gap: 8px;
    min-height: 48px;
}

.shield-icon {
    display: inline-block;
    width: 14px;
    height: 16px;
    clip-path: polygon(50% 0, 92% 17%, 84% 72%, 50% 100%, 16% 72%, 8% 17%);
    background: currentColor;
}

.shield-icon--red {
    color: #e55e5e;
}

.shield-icon--orange {
    color: #d99032;
}

.shield-icon--green {
    color: var(--color-accent);
}

.diagnostic-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
    color: var(--color-cornflower);
    background: transparent;
}

.diagnostic-result-card > div > span {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.86;
}

.diagnostic-result-card strong {
    color: var(--color-text);
    font-size: 26px;
    line-height: 1;
}

.diagnostic-result-card .button {
    min-width: 190px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 12px;
}

.diagnostic-result-card small {
    color: #6f7b8a;
    font-size: 10px;
    font-weight: 800;
}

.live-dashboard {
    position: sticky;
    top: 24px;
    padding: clamp(22px, 3vw, 34px);
}

.live-dashboard__header,
.dashboard-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.live-dashboard__header {
    margin-bottom: 22px;
}

.live-dashboard__header span,
.dashboard-card__head span,
.kpi-card > span,
.recommendation-card span {
    color: #6f7b8a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.live-dashboard h3 {
    margin: 6px 0 0;
    color: var(--color-text);
    font-size: clamp(24px, 3vw, 36px);
}

.status-pill {
    padding: 8px 12px;
    border-radius: 999px;
    color: #8f2d2d;
    background: rgba(229, 94, 94, 0.12);
    white-space: nowrap;
}

.status-pill.is-medium {
    color: #6b5216;
    background: rgba(225, 198, 171, 0.35);
}

.status-pill.is-high {
    color: #0d6241;
    background: rgba(193, 227, 249, 0.28);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-card,
.dashboard-card,
.alert-panel,
.recommendation-card {
    border: 1px solid rgba(208, 216, 228, 0.7);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(9, 28, 58, 0.06);
}

.kpi-card {
    padding: 18px;
}

.kpi-card strong {
    display: block;
    margin: 8px 0 14px;
    color: var(--color-accent);
    font-size: 32px;
    line-height: 1;
}

.mini-line {
    height: 34px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, transparent 0 18%, rgba(63, 127, 225, 0.22) 18% 22%, transparent 22% 42%, rgba(83, 87, 215, 0.38) 42% 47%, transparent 47% 68%, rgba(83, 87, 215, 0.55) 68% 72%, transparent 72%),
        linear-gradient(180deg, rgba(193, 227, 249, 0.16), rgba(63, 127, 225, 0.08));
}

.mini-line--warning {
    background-color: rgba(225, 198, 171, 0.2);
}

.mini-line--danger {
    background-color: rgba(229, 94, 94, 0.12);
}

.dashboard-modules {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 14px;
}

.dashboard-card {
    padding: 18px;
}

.dashboard-card--wide {
    grid-row: span 2;
}

.dashboard-card h4,
.alert-panel h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 11px;
}

.funnel-visual {
    display: grid;
    justify-items: center;
    gap: 9px;
    margin-top: 22px;
}

.funnel-visual span {
    display: block;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--color-cornflower), var(--color-light-blue));
    transition: width 0.25s ease, opacity 0.25s ease;
}

.funnel-visual span:nth-child(1) {
    width: 88%;
}

.funnel-visual span:nth-child(2) {
    width: 66%;
}

.funnel-visual span:nth-child(3) {
    width: 45%;
}

.funnel-visual span:nth-child(4) {
    width: 24%;
}

.funnel-visual[data-funnel="low"] span:nth-child(3),
.funnel-visual[data-funnel="low"] span:nth-child(4) {
    opacity: 0.34;
}

.funnel-visual[data-funnel="high"] span {
    background: linear-gradient(90deg, var(--color-accent), var(--color-light-blue));
}

.tool-flow {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.tool-flow span {
    padding: 10px 12px;
    border-radius: 12px;
    color: #3a4b5f;
    background: #f4f8fb;
    font-size: 13px;
    font-weight: 800;
}

.tool-flow span.is-active {
    color: #0d6241;
    background: rgba(193, 227, 249, 0.28);
}

.compliance-ring {
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin: 18px auto 0;
    border-radius: 50%;
    background: conic-gradient(var(--color-accent) var(--compliance, 25%), #e7edf4 0);
}

.compliance-ring span {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    color: var(--color-text);
    background: #ffffff;
    font-size: 24px;
    font-weight: 900;
}

.alert-panel,
.recommendation-card {
    margin-top: 14px;
    padding: 20px;
}

.alert-panel ul {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.alert-panel li {
    position: relative;
    padding-left: 16px;
    color: #3a4b5f;
    font-size: 9px;
    font-weight: 700;
}

.alert-panel li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e55e5e;
}

.alert-panel.is-medium li::before {
    background: #bf9b79;
}

.alert-panel.is-high li::before {
    background: var(--color-accent);
}

.recommendation-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 22px;
    align-items: center;
}

.recommendation-card p {
    grid-column: 1 / -1;
    margin: 0;
    color: #3a4b5f;
    font-size: 16px;
    line-height: 1.6;
}

.live-dashboard {
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
}

.dashboard-sidebar {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 12px;
    padding: 18px 12px;
    border-right: 1px solid rgba(208, 216, 228, 0.72);
    background: rgba(248, 251, 253, 0.86);
}

.dashboard-sidebar span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--color-cornflower);
    font-size: 15px;
    font-weight: 900;
}

.dashboard-sidebar__logo {
    background: var(--color-accent);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.dashboard-sidebar span.is-active {
    color: var(--color-accent);
    background: rgba(193, 227, 249, 0.26);
}

.dashboard-main {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
    overflow: hidden;
}

.dashboard-card {
    min-width: 0;
    padding: 12px;
    border-radius: 15px;
}

.dashboard-card--quality,
.dashboard-card.alert-panel {
    min-height: 118px;
}

.live-dashboard__header {
    align-items: center;
    margin-bottom: 14px;
}

.live-dashboard__header h3 {
    font-size: clamp(18px, 1.6vw, 24px);
}

.kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.kpi-card {
    min-height: 118px;
    padding: 13px;
}

.kpi-card > span,
.kpi-card em {
    display: block;
}

.kpi-card strong {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    margin: 8px 0 3px;
    color: var(--color-accent);
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kpi-card strong span {
    display: inline;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

.kpi-card strong small {
    color: #3a4b5f;
    font-size: 11px;
}

.kpi-card em {
    color: #6f7b8a;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.kpi-card:nth-child(1) strong,
.kpi-card:nth-child(3) strong {
    color: #2e6fb8;
}

.kpi-card:nth-child(2) strong,
.kpi-card:nth-child(5) strong {
    color: var(--color-accent);
}

.kpi-card:nth-child(4) strong {
    color: #4030a8;
}

.mini-chart {
    display: block;
    width: 100%;
    height: 30px;
    margin-top: 8px;
    overflow: visible;
}

.mini-chart polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-chart circle {
    fill: #ffffff;
    stroke: currentColor;
    stroke-width: 2;
}

.mini-chart--green {
    color: var(--color-accent);
}

.mini-chart--blue {
    color: #2e6fb8;
}

.mini-chart--purple {
    color: #4030a8;
}

.time-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 10px 0 0 auto;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 19px;
}

.mini-line--blue {
    background-color: rgba(63, 127, 225, 0.14);
}

.mini-line--purple {
    background-color: rgba(77, 59, 176, 0.12);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 12px;
    margin-top: 10px;
    align-items: start;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dashboard-column--side .dashboard-card--tasks {
    flex: 1;
}

.dashboard-column--side .dashboard-score-card {
    margin-top: 0;
}

.dashboard-card__head {
    align-items: center;
}

.funnel-row {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.funnel-row ul,
.source-chart ul,
.task-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.funnel-row li,
.task-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #3a4b5f;
    font-size: 9px;
    line-height: 1.55;
}

.funnel-row li span,
.task-list li span {
    color: #6f7b8a;
    font-weight: 700;
}

.funnel-visual {
    margin-top: 0;
}

.funnel-visual span {
    height: 23px;
    clip-path: polygon(9% 0, 91% 0, 78% 100%, 22% 100%);
    border-radius: 2px;
}

.funnel-visual--seo span {
    height: 16px;
}

.funnel-visual--seo span:nth-child(1) {
    width: 92%;
}

.funnel-visual--seo span:nth-child(2) {
    width: 76%;
}

.funnel-visual--seo span:nth-child(3) {
    width: 58%;
}

.funnel-visual--seo span:nth-child(4) {
    width: 40%;
}

.funnel-visual--seo span:nth-child(5) {
    width: 24%;
}

.funnel-visual--seo span:not(.is-active) {
    opacity: 0.3;
}

.funnel-visual--seo span.is-active {
    background: linear-gradient(90deg, var(--color-accent), var(--color-light-blue));
}

.dashboard-card--funnel p {
    margin: 10px 0 0;
    color: #3a4b5f;
    font-size: 9px;
}

.dashboard-card--funnel mark {
    margin-left: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #0d6241;
    background: rgba(193, 227, 249, 0.24);
}

.source-chart {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.source-donut {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--color-accent) 0 38%, var(--color-sky-blue) 38% 64%, var(--color-cornflower) 64% 82%, var(--color-light-blue) 82% 100%);
    box-shadow: inset 0 0 0 15px #ffffff;
}

.source-chart li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 6px;
    align-items: center;
    color: #3a4b5f;
    font-size: 9px;
    line-height: 1.55;
}

.source-chart i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--source-color, var(--color-accent));
}

.task-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.status-badge {
    display: inline-flex;
    margin-top: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #0d6241;
    background: rgba(193, 227, 249, 0.24);
    font-size: 9px;
    font-weight: 900;
}

.quality-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 9px;
    align-items: center;
    margin-top: 10px;
}

.quality-row .compliance-ring {
    width: 52px;
    height: 52px;
    margin: 0;
}

.quality-row .compliance-ring span {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.quality-row p {
    margin: 0;
    color: #3a4b5f;
    font-size: 9px;
    line-height: 1.4;
}

.dashboard-card a {
    display: inline-flex;
    margin-top: 7px;
    color: var(--color-accent);
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
}

.tool-flow {
    grid-template-columns: repeat(4, 1fr);
}

.tool-flow span {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 6px;
    font-size: 9px;
}

.alert-panel {
    margin-top: 0;
}

.dashboard-score-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    border: 1px solid rgba(208, 216, 228, 0.7);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(9, 28, 58, 0.16);
    text-align: center;
}

.dashboard-score-card h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 12px;
}

.score-gauge {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--score-color, #f0b34f) var(--score, 42%), #eef2f6 0);
}

.score-gauge span {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--color-text);
    background: #ffffff;
}

.score-gauge strong {
    color: var(--score-color, #f0b34f);
    font-size: 26px;
}

.dashboard-score-card > strong {
    color: var(--score-color, #f0b34f);
    font-size: 10px;
}

.dashboard-score-card p {
    margin: 0;
    color: #3a4b5f;
    font-size: 9px;
    line-height: 1.45;
}

.dashboard-score-card .button {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 9px;
}

.dashboard-benefits {
    position: relative;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(208, 216, 228, 0.62);
    border-radius: 22px;
    background:
        radial-gradient(circle at 4% 50%, rgba(193, 227, 249, 0.24), transparent 22%),
        linear-gradient(135deg, #ffffff, #f7fbff);
    box-shadow: 0 18px 42px rgba(9, 28, 58, 0.08);
}

.dashboard-benefits h4 {
    margin: 0 0 14px;
    color: var(--color-text);
    text-align: center;
    font-size: 14px;
}

.dashboard-benefits > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-benefits article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 78px;
    padding: 16px 14px;
    border: 1px solid rgba(208, 216, 228, 0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(9, 28, 58, 0.06);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-benefits article:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(9, 28, 58, 0.1);
}

.dashboard-benefits i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: var(--color-accent);
    background: linear-gradient(135deg, rgba(193, 227, 249, 0.45), rgba(255, 255, 255, 0.88));
    font-style: normal;
    font-weight: 900;
    font-size: 18px;
}

.dashboard-benefits article:nth-child(2) i {
    color: var(--color-accent);
    background: linear-gradient(135deg, rgba(68, 172, 107, 0.28), rgba(255, 255, 255, 0.9));
}

.dashboard-benefits article:nth-child(3) i {
    color: var(--color-cornflower);
    background: linear-gradient(135deg, rgba(63, 127, 225, 0.24), rgba(255, 255, 255, 0.9));
}

.dashboard-benefits article:nth-child(4) i {
    color: #4030a8;
    background: linear-gradient(135deg, rgba(64, 48, 168, 0.18), rgba(255, 255, 255, 0.9));
}

.dashboard-benefits strong {
    color: var(--color-cornflower);
    font-size: 13px;
}

.dashboard-benefits span {
    color: #3a4b5f;
    font-size: 10px;
    line-height: 1.35;
}

.dashboard-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.dashboard-actions .button {
    min-width: 190px;
    min-height: 42px;
    padding: 10px 18px;
    font-size: 12px;
}

.transformation-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 10% 20%, rgba(193, 227, 249, 0.2), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.transformation-section__header {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.transformation-section__header h2 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
}

.transformation-section__header h2 strong {
    color: var(--color-accent);
}

.transformation-section__header p {
    max-width: 560px;
    margin: 0 auto 20px;
    color: #3a4b5f;
    font-size: 14px;
    line-height: 1.6;
}

.transformation-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    padding: 4px;
    border: 1px solid rgba(208, 216, 228, 0.8);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(9, 28, 58, 0.06);
}

.transformation-switch button {
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    color: var(--color-cornflower);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.transformation-switch button.is-active {
    color: #ffffff;
    background: var(--color-accent);
    box-shadow: 0 10px 24px rgba(83, 87, 215, 0.24);
}

.transformation-section[data-mode="fragmented"] .transformation-switch button.is-active {
    background: #d7654d;
    box-shadow: 0 10px 24px rgba(215, 101, 77, 0.18);
}

.transformation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.transformation-card {
    --accent: #d7654d;
    --accent-soft: rgba(215, 101, 77, 0.12);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 20px 20px 18px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(9, 28, 58, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.transformation-card.is-highlighted,
.transformation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(9, 28, 58, 0.1);
}

.transformation-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.transformation-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-soft);
}

.transformation-card__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transformation-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transformation-card__tag i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.transformation-card h3 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 17px;
    line-height: 1.15;
}

.transformation-card p {
    max-width: 460px;
    margin: 0 0 16px;
    color: #5f6c80;
    font-size: 12.5px;
    line-height: 1.55;
}

.mini-system {
    position: relative;
    margin-top: auto;
    padding: 12px 4px 2px;
}

.mini-system svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.mini-visual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.mini-visual img,
.mini-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.25s ease;
}

.mini-visual__after {
    opacity: 0;
}

.transformation-section[data-mode="structured"] .mini-visual__before {
    opacity: 0;
}

.transformation-section[data-mode="structured"] .mini-visual__after {
    opacity: 1;
}

.mini-tools,
.mini-tasks {
    display: grid;
    gap: 8px;
}

.mini-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mini-tasks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-tools span,
.mini-tasks span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(9, 28, 58, 0.06), inset 0 0 0 1px rgba(208, 216, 228, 0.55);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mini-funnel {
    display: grid;
    place-items: center;
    padding-top: 6px;
}

.mini-funnel svg {
    max-width: 220px;
    height: 110px;
}

.mini-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mini-kpis article {
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(9, 28, 58, 0.06);
}

.mini-kpis span {
    display: block;
    color: #6f7b8a;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mini-kpis strong {
    display: block;
    margin: 4px 0;
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
}

.mini-kpis svg {
    width: 100%;
    height: 24px;
    color: rgba(149, 162, 178, 0.7);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-growth {
    display: grid;
}

.mini-growth svg {
    width: 100%;
    height: 110px;
}

.mini-growth__grid path {
    stroke: rgba(149, 162, 178, 0.22);
    stroke-width: 1;
    fill: none;
}

.mini-growth__danger {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transformation-section[data-mode="structured"] .transformation-card {
    --accent: var(--color-accent);
    --accent-soft: rgba(83, 87, 215, 0.12);
}

.transformation-section[data-mode="structured"] .mini-kpis strong {
    font-size: 18px;
}

.transformation-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
    padding: 16px 22px;
    border: 1px solid rgba(208, 216, 228, 0.72);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(9, 28, 58, 0.06);
}

.transformation-footer strong {
    color: var(--color-text);
    font-size: 14px;
}

.deliverables-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 12% 8%, rgba(193, 227, 249, 0.18), transparent 26%),
        radial-gradient(circle at 90% 92%, rgba(208, 216, 228, 0.34), transparent 28%),
        #f7fafc;
}

.deliverables-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: auto auto;
    gap: 22px;
}

.deliverables-card {
    position: relative;
    padding: 32px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(9, 28, 58, 0.08);
}

.deliverables-card__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.deliverables-card h2 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
    font-weight: 800;
}

.deliverables-card h4 {
    margin: 0 0 4px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
}

.deliverables-card > p {
    margin: 0 0 22px;
    color: #5f6c80;
    font-size: 13.5px;
    line-height: 1.55;
}

.deliverables-card--list {
    grid-column: 1;
    grid-row: 1;
}

.deliverables-card--dashboard {
    grid-column: 2;
    grid-row: 1 / span 2;
    background:
        linear-gradient(180deg, rgba(247, 250, 252, 0.85), rgba(255, 255, 255, 1));
}

.deliverables-card--approach {
    grid-column: 1;
    grid-row: 2;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 12%, rgba(63, 127, 225, 0.32), transparent 38%),
        linear-gradient(135deg, #0d1d3d 0%, #091428 100%);
}

.deliverables-card--approach h2,
.deliverables-card--approach > p {
    color: #ffffff;
}

.deliverables-card--approach > p {
    color: rgba(255, 255, 255, 0.72);
}

.deliverables-card--approach .deliverables-card__eyebrow {
    color: #9bb1d8;
}

.deliverables-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deliverables-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(9, 28, 58, 0.06);
    border: 1px solid rgba(208, 216, 228, 0.5);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.deliverables-list li span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(63, 127, 225, 0.12);
    color: var(--color-cornflower);
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.dashboard-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.dashboard-modules-grid article {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(9, 28, 58, 0.05);
    border: 1px solid rgba(208, 216, 228, 0.45);
}

.dashboard-modules-grid span {
    color: #5f6c80;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 500;
}

.dashboard-showcase {
    position: relative;
    min-height: 480px;
    padding: 28px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(193, 227, 249, 0.14), rgba(63, 127, 225, 0.08));
    overflow: hidden;
}

.dashboard-showcase__main {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 720px;
    border-radius: 14px;
    box-shadow: 0 28px 60px rgba(9, 28, 58, 0.22);
    display: block;
}

.dashboard-showcase__overlay {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 24px 50px rgba(9, 28, 58, 0.26);
    z-index: 2;
}

.dashboard-showcase__overlay--1 {
    top: 18%;
    left: 32%;
    width: 52%;
    max-width: 420px;
    transform: rotate(-2.5deg);
    z-index: 3;
}

.dashboard-showcase__overlay--2 {
    bottom: 28%;
    left: 8%;
    width: 44%;
    max-width: 360px;
    transform: rotate(2.5deg);
    z-index: 4;
}

.dashboard-showcase__overlay--3 {
    top: 8%;
    right: 6%;
    width: 42%;
    max-width: 340px;
    transform: rotate(3deg);
    z-index: 5;
}

.dashboard-showcase__cta {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 6;
    width: min(300px, 92%);
    padding: 20px 22px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(83, 87, 215, 0.96), rgba(124, 42, 204, 0.96));
    color: #ffffff;
    box-shadow: 0 22px 44px rgba(83, 87, 215, 0.4);
}

.dashboard-showcase__cta strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 800;
}

.dashboard-showcase__cta p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12.5px;
    line-height: 1.5;
}

.dashboard-showcase__cta .button {
    min-height: 40px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--color-text);
    color: #ffffff;
    font-size: 13px;
}

.dashboard-showcase__cta .button:hover {
    background: #ffffff;
    color: var(--color-text);
}

.approach-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.approach-steps article {
    min-width: 0;
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.approach-step__num {
    display: inline-block;
    margin-bottom: 8px;
    color: rgba(155, 177, 216, 0.7);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.approach-steps strong {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: break-word;
}

.approach-steps span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    line-height: 1.45;
}

.risks-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 12% 8%, rgba(193, 227, 249, 0.16), transparent 26%),
        radial-gradient(circle at 88% 92%, rgba(208, 216, 228, 0.32), transparent 28%),
        #ffffff;
}

.risks-section__header {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.risks-section__header h2 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
    font-weight: 800;
}

.risks-section__header p {
    margin: 0 auto;
    max-width: 580px;
    color: #5f6c80;
    font-size: 14px;
    line-height: 1.6;
}

.risks-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.risk-step {
    position: relative;
    padding: 24px 22px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(9, 28, 58, 0.07);
    text-align: center;
}

.risk-step::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    color: rgba(149, 162, 178, 0.55);
    font-size: 22px;
    font-weight: 900;
    pointer-events: none;
}

.risk-step:last-child::after {
    content: none;
}

.risk-step__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(149, 162, 178, 0.18);
    color: var(--color-cornflower);
}

.risk-step__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.risk-step strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: 14.5px;
    font-weight: 800;
}

.risk-step p {
    margin: 0;
    color: #5f6c80;
    font-size: 12.5px;
    line-height: 1.5;
}

.risk-step--danger {
    background:
        linear-gradient(180deg, rgba(255, 233, 226, 0.85), rgba(255, 245, 240, 0.6));
    box-shadow: 0 18px 44px rgba(215, 101, 77, 0.15);
}

.risk-step--danger .risk-step__icon {
    background: rgba(215, 101, 77, 0.18);
    color: #d7654d;
}

.risks-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 12%, rgba(83, 87, 215, 0.22), transparent 30%),
        radial-gradient(circle at 10% 88%, rgba(63, 127, 225, 0.32), transparent 32%),
        linear-gradient(135deg, #0d1d3d 0%, #091428 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(7, 18, 40, 0.32);
}

.risks-cta__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border: 1px solid rgba(63, 127, 225, 0.45);
    border-radius: 999px;
    color: #9bb1d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.risks-cta__content h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.18;
    font-weight: 800;
}

.risks-cta__content > p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}

.risks-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.risks-cta__actions .button {
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
}

.button--ghost {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.button--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.risks-cta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.risks-cta__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(155, 177, 216, 0.85);
    font-size: 12.5px;
    font-weight: 600;
}

.risks-cta__meta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(155, 177, 216, 0.9);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.risks-cta__visual {
    display: grid;
    place-items: center;
}

.risks-cta__visual svg {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.express-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 12% 12%, rgba(193, 227, 249, 0.18), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(208, 216, 228, 0.32), transparent 28%),
        #f7fafc;
}

.strategy-benefits-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 88% 18%, rgba(84, 165, 234, 0.12), transparent 32%),
        radial-gradient(circle at 8% 82%, rgba(124, 42, 204, 0.06), transparent 28%),
        #ffffff;
}

.strategy-benefits-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}

.strategy-benefits-section__content h2 {
    margin: 0 0 clamp(24px, 3vw, 36px);
    color: var(--color-text);
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.08;
    font-weight: 800;
}

.strategy-benefits-list {
    display: grid;
    gap: 16px;
    margin: 0 0 clamp(28px, 3vw, 40px);
    padding: 0;
    list-style: none;
}

.strategy-benefits-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    border: 1px solid rgba(193, 227, 249, 0.9);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.92) 100%);
    box-shadow: 0 14px 36px rgba(83, 87, 215, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.strategy-benefits-item:hover {
    transform: translateY(-2px);
    border-color: rgba(83, 87, 215, 0.28);
    box-shadow: 0 18px 44px rgba(83, 87, 215, 0.14);
}

.strategy-benefits-item__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: #ffffff;
    background: var(--gradient-brand);
    box-shadow: 0 10px 22px rgba(83, 87, 215, 0.28);
}

.strategy-benefits-item__icon svg {
    width: 24px;
    height: 24px;
}

.strategy-benefits-item__icon--star svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.strategy-benefits-item__icon--network svg,
.strategy-benefits-item__icon--check svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.strategy-benefits-item__icon--check svg {
    stroke-width: 2.6;
}

.strategy-benefits-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.25;
    font-weight: 800;
}

.strategy-benefits-item p {
    margin: 0;
    color: #5f6c80;
    font-size: 14px;
    line-height: 1.6;
}

.strategy-benefits-section__cta {
    padding: clamp(22px, 3vw, 28px);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(193, 227, 249, 0.45) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(84, 165, 234, 0.35);
}

.strategy-benefits-section__cta h3 {
    margin: 0 0 18px;
    color: var(--color-text);
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.2;
    font-weight: 800;
}

.strategy-benefits-section__cta .button {
    width: 100%;
    max-width: 360px;
}

.strategy-benefits-section__visual {
    margin: 0;
    padding: clamp(12px, 2vw, 18px);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(193, 227, 249, 0.35) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(193, 227, 249, 0.9);
    box-shadow: 0 28px 70px rgba(83, 87, 215, 0.12);
}

.strategy-benefits-section__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.seo-strategy-mockup {
    position: relative;
    min-height: 420px;
    padding: 8px 4px 4px;
}

.seo-strategy-mockup__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.seo-strategy-mockup__document {
    position: relative;
    z-index: 2;
    width: min(100%, 300px);
    margin: 88px auto 72px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(193, 227, 249, 0.95);
    box-shadow: 0 22px 48px rgba(83, 87, 215, 0.16);
}

.seo-strategy-mockup__cover {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(193, 227, 249, 0.8);
    text-align: center;
}

.seo-strategy-mockup__cover strong {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.seo-strategy-mockup__cover span {
    color: #5f6c80;
    font-size: 11px;
    font-weight: 700;
}

.seo-strategy-mockup__document img {
    border-radius: 12px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.seo-strategy-mockup__note {
    position: absolute;
    z-index: 3;
    width: min(168px, 42%);
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(193, 227, 249, 0.95);
    box-shadow: 0 14px 32px rgba(83, 87, 215, 0.12);
}

.seo-strategy-mockup__note strong {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
}

.seo-strategy-mockup__note p {
    margin: 0;
    color: #5f6c80;
    font-size: 9.5px;
    line-height: 1.45;
}

.seo-strategy-mockup__note--1 {
    top: 8px;
    left: 0;
}

.seo-strategy-mockup__note--2 {
    top: 8px;
    right: 0;
}

.seo-strategy-mockup__note--3 {
    bottom: 8px;
    left: 0;
}

.seo-strategy-mockup__note--4 {
    bottom: 8px;
    right: 0;
}

.express-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.express-card {
    position: relative;
    padding: 32px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(9, 28, 58, 0.08);
}

.express-card--quiz {
    background:
        radial-gradient(circle at 8% 4%, rgba(193, 227, 249, 0.32), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

.express-card__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.express-card h2 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.1;
    font-weight: 800;
}

.express-card h3 {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.express-card h4 {
    margin: 18px 0 14px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 800;
}

.express-card > p {
    margin: 0 0 22px;
    color: #5f6c80;
    font-size: 14px;
    line-height: 1.55;
}

.express-questions {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.express-questions li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(9, 28, 58, 0.05);
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.express-questions li.is-active {
    border-color: rgba(83, 87, 215, 0.45);
    background:
        linear-gradient(180deg, rgba(83, 87, 215, 0.06), rgba(255, 255, 255, 1));
}

.express-question__num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(63, 127, 225, 0.12);
    color: var(--color-cornflower);
    font-size: 11px;
    font-weight: 800;
}

.express-question__text {
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.express-toggle {
    display: inline-flex;
    gap: 6px;
}

.express-toggle button {
    min-width: 44px;
    padding: 6px 12px;
    border: 1px solid rgba(149, 162, 178, 0.45);
    border-radius: 999px;
    background: #ffffff;
    color: #5f6c80;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.express-toggle button:hover {
    border-color: rgba(83, 87, 215, 0.5);
}

.express-toggle button.is-on[data-yes] {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

.express-toggle button.is-on[data-no] {
    background: var(--color-text);
    color: #ffffff;
    border-color: var(--color-text);
}

.express-status {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(83, 87, 215, 0.08);
    color: var(--color-periwinkle);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid rgba(83, 87, 215, 0.2);
}

.express-form__submit {
    width: 100%;
    margin-top: 12px;
    min-height: 50px;
    border-radius: 999px;
    font-size: 14px;
}

.results-section {
    padding: clamp(48px, 6vw, 80px) clamp(24px, 9vw, 160px);
    background: #0b1830;
}

.results-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(36px, 4vw, 52px) clamp(28px, 4vw, 56px);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 18%, rgba(63, 127, 225, 0.28), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(83, 87, 215, 0.18), transparent 32%),
        linear-gradient(135deg, #0d1d3d 0%, #091428 100%);
    box-shadow: 0 30px 70px rgba(7, 18, 40, 0.4);
}

.results-section__intro {
    color: #ffffff;
}

.results-section__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border: 1px solid rgba(63, 127, 225, 0.45);
    border-radius: 999px;
    color: #9bb1d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.results-section__intro h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    font-weight: 800;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.result-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #ffffff;
}

.result-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
    border-radius: 10px;
    color: var(--result-color);
    background: rgba(255, 255, 255, 0.06);
}

.result-card__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.result-card__value {
    color: var(--result-color);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 800;
    line-height: 1.15;
}

.result-card__label {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
}

.faq-section {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 9vw, 160px);
    background:
        radial-gradient(circle at 10% 12%, rgba(193, 227, 249, 0.22), transparent 28%),
        #f7fafc;
}

.faq-section__header {
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 48px);
    text-align: center;
}

.faq-section__header h2 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    font-weight: 800;
}

.faq-section__header p {
    margin: 0;
    color: #5f6c80;
    font-size: 15px;
    line-height: 1.6;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 24px);
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

.faq-column {
    display: grid;
    gap: 12px;
    align-content: start;
}

.faq-item {
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(83, 87, 215, 0.08);
    border: 1px solid rgba(208, 216, 228, 0.7);
}

.faq-item__trigger {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: var(--color-periwinkle);
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.2s ease;
}

.faq-item__trigger:hover,
.faq-item__trigger:focus-visible {
    background: var(--color-cornflower);
    outline: none;
}

.faq-item.is-open .faq-item__trigger {
    background: var(--gradient-brand);
}

.faq-item__toggle {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.faq-item__question {
    font-size: clamp(14px, 1.2vw, 15px);
    font-weight: 700;
    line-height: 1.35;
}

.faq-item__chevron {
    display: inline-grid;
    place-items: center;
    transition: transform 0.25s ease;
}

.faq-item__chevron svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faq-item.is-open .faq-item__chevron {
    transform: rotate(180deg);
}

.faq-item__panel {
    border-top: 1px solid rgba(208, 216, 228, 0.5);
}

.faq-item__content {
    padding: 18px 20px 20px;
    color: #3a4b5f;
    font-size: 14px;
    line-height: 1.65;
}

.faq-item__content p {
    margin: 0 0 12px;
}

.faq-item__content p:last-child {
    margin-bottom: 0;
}

.faq-item__content ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.faq-item__content li {
    margin-bottom: 6px;
}

.faq-item__content a {
    color: var(--color-cornflower);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-item__content strong {
    color: var(--color-text);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal.is-open {
    display: flex;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 35, 63, 0.62);
}

.modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 32px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.modal--large .modal__panel {
    width: min(100%, 920px);
}

.modal--quote .modal__panel {
    width: min(100%, 640px);
    padding: 36px 36px 28px;
}

.quote-form {
    display: block;
}

.quote-form__header {
    margin-bottom: 22px;
}

.quote-form__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.quote-form__header h2 {
    margin: 0 44px 10px 0;
    color: var(--color-text);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.quote-form__header p {
    margin: 0 0 14px;
    color: #5f6c80;
    font-size: 13.5px;
    line-height: 1.55;
}

.quote-form__estimate {
    display: block;
    margin-bottom: 14px;
    color: var(--color-cornflower);
    font-size: 13px;
    font-weight: 700;
}

.quote-form__progress {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(208, 216, 228, 0.7);
    overflow: hidden;
}

.quote-form__progress span {
    position: absolute;
    inset: 0 50% 0 0;
    background: var(--color-accent);
    border-radius: 999px;
    transition: inset 0.3s ease;
}

.quote-form[data-step="2"] .quote-form__progress span {
    inset: 0 0 0 0;
}

.quote-step h3 {
    margin: 0 0 16px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 800;
}

.quote-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.quote-field {
    display: block;
    margin-bottom: 16px;
}

.quote-field > span {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
}

.quote-field > span em {
    margin-left: 4px;
    color: #95a2b2;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
}

.quote-field input,
.quote-field select,
.quote-field textarea,
.quote-checkbox-list label,
.quote-consent {
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
}

.quote-field input,
.quote-field select,
.quote-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(149, 162, 178, 0.45);
    border-radius: 999px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quote-field textarea {
    border-radius: 16px;
    resize: vertical;
    min-height: 96px;
}

.quote-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235357d7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;
    padding-right: 40px;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(83, 87, 215, 0.12);
}

.quote-checkbox-list {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.quote-checkbox-list legend {
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
}

.quote-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(149, 162, 178, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.quote-checkbox-list label:hover {
    border-color: rgba(83, 87, 215, 0.5);
    background: rgba(83, 87, 215, 0.04);
}

.quote-checkbox-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}

.quote-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 8px;
    padding: 14px 16px;
    border: 1px solid rgba(149, 162, 178, 0.3);
    border-radius: 14px;
    background: rgba(247, 250, 252, 0.7);
    color: #3a4b5f;
    font-size: 12.5px;
    line-height: 1.5;
}

.quote-consent input {
    margin-top: 2px;
    accent-color: var(--color-accent);
}

.quote-consent a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quote-form__delay {
    margin: 4px 0 18px;
    color: var(--color-cornflower);
    font-size: 12.5px;
    font-weight: 600;
}

.quote-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.quote-form__actions--split {
    justify-content: space-between;
}

.quote-form__actions .button {
    flex: 1;
    min-height: 48px;
    border-radius: 999px;
    font-size: 14px;
}

.quote-form__continue {
    flex: 1;
}

.modal__panel h2 {
    margin: 0 44px 20px 0;
    color: var(--color-text);
}

.modal__panel p {
    margin: 0;
    color: #3a4b5f;
    line-height: 1.6;
}

.modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--color-text);
    background: #eef2f6;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

@media (max-width: 1320px) {
    .diagnostic-grid {
        grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
        gap: 18px;
    }
}

@media (max-width: 1180px) {
    .diagnostic-grid {
        grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
        gap: 16px;
    }

    .chip-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-step h3 {
        font-size: 14px;
    }

    .diagnostic-step--compact h3 {
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    .hero-section__bullets {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 960px) {
    .hero-section {
        min-height: auto;
        padding-top: clamp(40px, 7vw, 72px);
        padding-bottom: clamp(40px, 7vw, 72px);
        background-image:
            linear-gradient(180deg, rgba(245, 248, 252, 0.96) 0%, rgba(245, 248, 252, 0.72) 55%, rgba(193, 227, 249, 0.25) 100%);
        background-position: center;
        background-size: cover;
    }

    .hero-section__inner {
        grid-template-columns: 1fr;
    }

    .hero-section__form {
        order: 2;
    }

    .hero-section h1 {
        font-size: clamp(22px, 3.92vw, 34px);
    }

    .hero-section p {
        font-size: 16px;
    }

    .hero-section__bullets {
        flex-wrap: wrap;
        gap: 12px 22px;
        white-space: normal;
    }

    .approach-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-showcase {
        min-height: 360px;
    }

    .dashboard-showcase__overlay--1 {
        top: 28%;
        left: 28%;
        width: 56%;
    }

    .dashboard-showcase__overlay--2 {
        bottom: 18%;
        left: 6%;
        width: 48%;
    }

    .dashboard-showcase__overlay--3 {
        top: 6%;
        right: 4%;
        width: 46%;
    }

    .dashboard-showcase__cta {
        right: 18px;
        bottom: 18px;
        width: min(260px, 90%);
    }
}

@media (max-width: 1100px) {
    .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-grid {
        grid-template-columns: minmax(240px, 0.56fr) minmax(0, 1.44fr);
        gap: 14px;
    }

    .chip-grid--levers,
    .chip-grid--intents,
    .chip-grid--three {
        grid-template-columns: 1fr;
    }

    .live-dashboard {
        grid-column: auto;
        position: static;
    }

    .diagnostic-callout {
        display: none;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-score-card {
        max-width: none;
        width: 100%;
        margin: 0;
        justify-self: stretch;
    }

    .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-benefits > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transformation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .results-section__inner {
        grid-template-columns: 1fr;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .express-grid {
        grid-template-columns: 1fr;
    }

    .strategy-benefits-section__inner {
        grid-template-columns: 1fr;
    }

    .strategy-benefits-section__visual {
        order: -1;
        max-width: 560px;
        margin: 0 auto;
    }

    .deliverables-grid {
        grid-template-columns: 1fr;
    }

    .deliverables-card--list,
    .deliverables-card--dashboard,
    .deliverables-card--approach {
        grid-column: 1;
        grid-row: auto;
    }

    .approach-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .risks-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .risk-step::after {
        content: none;
    }

    .risks-cta {
        grid-template-columns: 1fr;
    }

    .risks-cta__visual {
        order: -1;
        max-width: 180px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .diagnostic-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .chip-grid--levers,
    .chip-grid--intents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        overflow-x: auto;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(208, 216, 228, 0.72);
    }
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .funnel-row {
        grid-template-columns: 1fr;
    }

    .dashboard-benefits > div {
        grid-template-columns: 1fr;
    }

    .live-dashboard__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .status-pill {
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .top-bar {
        align-items: center;
        flex-direction: row;
        padding: 12px 16px;
        gap: 12px;
    }

    .top-bar__logo img {
        width: min(160px, 46vw);
    }

    .top-bar__icon {
        width: 38px;
        height: 38px;
    }

    .hero-section {
        align-items: flex-start;
        min-height: auto;
        padding: 36px 18px 220px;
        background-image:
            linear-gradient(180deg, rgba(247, 249, 252, 0.96) 0%, rgba(247, 249, 252, 0.88) 55%, transparent 100%),
            url("/asset/img/background%20%282%29.png");
        background-position: left top, center bottom;
        background-size: 100% 100%, cover;
    }

    .hero-section h1 {
        font-size: clamp(20px, 5.6vw, 25px);
    }

    .hero-section p {
        font-size: 15px;
    }

    .hero-section__bullets {
        gap: 8px 16px;
        font-size: 12.5px;
    }

    .hero-section__actions {
        flex-direction: column;
    }

    .performance-cost-section__header {
        text-align: left;
    }

    .impact-grid,
    .performance-cost-section__cta {
        grid-template-columns: 1fr;
    }

    .impact-grid {
        display: grid;
    }

    .impact-card {
        min-height: 300px;
    }

    .performance-cost-section__cta {
        align-items: stretch;
        flex-direction: column;
    }

    .diagnostic-section {
        padding-inline: 16px;
    }

    .diagnostic-grid,
    .segmented-control,
    .kpi-grid,
    .recommendation-card {
        grid-template-columns: 1fr;
    }

    .live-dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        overflow-x: auto;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(208, 216, 228, 0.72);
    }

    .source-chart,
    .funnel-row,
    .quality-row,
    .dashboard-benefits > div {
        grid-template-columns: 1fr;
    }

    .dashboard-actions {
        flex-direction: column;
    }

    .transformation-section__header {
        text-align: left;
    }

    .transformation-switch,
    .transformation-grid,
    .transformation-footer {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .express-questions li {
        grid-template-columns: auto 1fr;
    }

    .express-toggle {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .express-card {
        padding: 22px;
    }

    .dashboard-modules-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-showcase__cta {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 16px;
    }

    .dashboard-showcase__overlay {
        display: none;
    }

    .dashboard-showcase__main {
        width: 100%;
    }

    .dashboard-showcase {
        min-height: auto;
        padding: 16px;
    }

    .risks-flow {
        grid-template-columns: 1fr;
    }

    .risks-cta__actions {
        flex-direction: column;
    }

    .risks-cta__actions .button {
        width: 100%;
    }

    .risks-cta__meta {
        gap: 10px 16px;
    }

    .performance-cost-section,
    .transformation-section,
    .deliverables-section,
    .express-section,
    .strategy-benefits-section,
    .faq-section,
    .risks-section,
    .results-section,
    .diagnostic-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .deliverables-card,
    .express-card,
    .risk-step,
    .impact-card {
        padding: 20px;
    }

    .risks-cta {
        padding: 24px 20px;
    }

    .results-section__inner {
        padding: 28px 22px;
    }

    .approach-steps {
        grid-template-columns: 1fr;
    }

    .strategy-benefits-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 18px;
    }

    .strategy-benefits-item__icon {
        width: 44px;
        height: 44px;
    }

    .strategy-benefits-section__cta .button {
        max-width: none;
    }

    .deliverables-list li,
    .express-questions li {
        font-size: 12.5px;
    }

    .quote-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .transformation-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-step {
        grid-template-columns: 1fr;
    }

    .toggle-row {
        grid-template-columns: 1fr;
    }

    .diagnostic-result-card {
        align-items: stretch;
        flex-direction: column;
    }

    .live-dashboard {
        position: static;
    }

    .button {
        width: 100%;
    }

    .modal {
        padding: 12px;
    }

    .modal__panel {
        padding: 24px;
    }
}

.site-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px clamp(24px, 6vw, 80px);
    border-top: 1px solid rgba(208, 216, 228, 0.55);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
}

.site-footer__links {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-cornflower);
    font-size: 12.5px;
    font-weight: 700;
}

.site-footer__links a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__links a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__links span {
    color: rgba(63, 127, 225, 0.6);
}

.floating-actions {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.floating-actions.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-actions__top,
.floating-actions__quote {
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(9, 28, 58, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.floating-actions__top {
    width: 46px;
    height: 46px;
    background: var(--color-accent);
    color: #ffffff;
}

.floating-actions__top:hover {
    background: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(83, 87, 215, 0.34);
}

.floating-actions__top svg {
    width: 20px;
    height: 20px;
}

.floating-actions__quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 46px;
    height: 46px;
    padding: 0 14px 0 12px;
    background: #ffffff;
    color: var(--color-accent);
    border: 1px solid rgba(83, 87, 215, 0.22);
    animation: floating-quote-bounce 2.4s ease-in-out infinite;
}

.floating-actions__quote:hover {
    background: #f7fbff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 32px rgba(83, 87, 215, 0.22);
    animation-play-state: paused;
}

.floating-actions__quote svg {
    width: 20px;
    height: 20px;
}

.floating-actions__label {
    margin-left: 6px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

@keyframes floating-quote-bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-actions__quote {
        animation: none;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 16px 18px 18px;
        flex-direction: column;
        gap: 12px;
    }

    .site-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 12px;
    }

    .floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 8px;
    }

    .floating-actions__top,
    .floating-actions__quote {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }

    .floating-actions__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}