:root {
    --ft-primary: #14B8A6;
    --ft-cyan: #2DD4BF;
    --ft-blue: #2563EB;
    --ft-navy: #0B1F4D;
    --ft-light: #F8FFFF;
    --ft-line: #D7E8ED;
    --ft-muted: #566B7F;
}

/* Shared brand mark. The supplied primary logo remains the source asset. */
.brand-emblem {
    position: relative;
    display: block;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    overflow: hidden;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 31, 77, .10);
}
.brand-emblem img {
    position: absolute;
    top: -5px;
    left: -43px;
    width: 132px;
    max-width: none;
    height: auto;
}

/* Public marketing identity */
.marketing-body {
    --ink: var(--ft-navy);
    --ink-2: #123469;
    --paper: var(--ft-light);
    --mint: var(--ft-cyan);
    --mint-soft: #CCFBF1;
    --coral: var(--ft-primary);
    --yellow: #BFDBFE;
    --teal: var(--ft-primary);
    --blue: var(--ft-blue);
    --line: var(--ft-line);
    --muted: var(--ft-muted);
    --shadow: 0 24px 70px rgba(11, 31, 77, .12);
    background: var(--ft-light);
}
.announcement { background: var(--ft-navy); color: #DDEBFF; }
.announcement > span { background: var(--ft-cyan); color: var(--ft-navy); }
.site-header { background: rgba(248, 255, 255, .92); }
.site-header.scrolled { border-color: rgba(11, 31, 77, .10); box-shadow: 0 10px 32px rgba(11, 31, 77, .07); }
.marketing-logo { gap: 11px; width: 190px; }
.marketing-logo img{height: 45px}
.brand-copy { display: grid; gap: 1px; line-height: 1; }
.brand-copy strong { color: var(--ft-navy); font-size: 18px; letter-spacing: -.045em; }
.brand-copy strong span { color: var(--ft-primary); }
.brand-copy small { color: #65778A; font-size: 8px; font-weight: 700; letter-spacing: .015em; }
.nav-panel a:hover { background: #EFFFFD; }
.marketing-button { background: var(--ft-primary); border-color: var(--ft-primary); color: var(--ft-navy); }
.marketing-button:hover { background: var(--ft-cyan); box-shadow: 0 12px 26px rgba(20, 184, 166, .22); }
.marketing-button-dark { background: var(--ft-navy); border-color: var(--ft-navy); color: #fff; }
.marketing-button-outline { background: transparent; border-color: #9BB5C5; color: var(--ft-navy); }
.marketing-button-light { background: var(--ft-cyan); border-color: var(--ft-cyan); color: var(--ft-navy); }
.section-kicker { color: #087F74; }
.section-kicker.light { color: var(--ft-cyan); }
.hero-section {
    background:
        radial-gradient(circle at 82% 43px;18%, rgba(45, 212, 191, .18), transparent 31%),
        radial-gradient(circle at 12% 90%, rgba(37, 99, 235, .10), transparent 28%),
        linear-gradient(180deg, #F8FFFF 0%, #ECFEFF 100%);
}
.hero-copy h1 em {
    color: var(--ft-blue);
    background: linear-gradient(90deg, var(--ft-blue), var(--ft-primary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-copy > p { color: #526A7D; }
.hero-pill { border-color: #C9E7E6; box-shadow: 0 8px 22px rgba(11, 31, 77, .05); }
.hero-pill i { background: var(--ft-primary); box-shadow: 0 0 0 4px #CCFBF1; }
.hero-proof { border-color: #CFE3E7; }
.product-window { border-color: #CFE2E7; box-shadow: 0 35px 90px rgba(11, 31, 77, .16); }
.window-body > aside { background: var(--ft-navy); }
.window-body > aside b, .window-body > aside i.active { background: var(--ft-cyan); border-color: var(--ft-cyan); color: var(--ft-navy); }
.bars i { background: var(--ft-blue); }
.bars i:nth-child(2n) { background: var(--ft-primary); }
.metric-row em { color: #087F74; }
.floating-card span { background: #CCFBF1; color: #087F74; }
.floating-card-two span { background: #DBEAFE; color: var(--ft-blue); }
.feature-tabs button.active { color: var(--ft-blue); border-color: var(--ft-primary); }
.feature-visual { background: #CCFBF1; }
.visual-1 { background: #DBEAFE; }
.visual-2 { background: #CFFAFE; }
.visual-3 { background: #D5FAF4; }
.progress-line i { background: linear-gradient(90deg, var(--ft-primary), var(--ft-blue)); }
.step-icon { background: var(--ft-cyan); color: var(--ft-navy); }
.steps-grid article:nth-child(2) .step-icon { background: #DBEAFE; color: var(--ft-blue); }
.steps-grid article:nth-child(3) .step-icon { background: #CCFBF1; color: #087F74; }
.steps-section { background: #EAF8F8; }
.steps-grid article { background: #F8FFFF; border-color: #D1E5E8; }
.seo-story,
.connector-boundary,
.regional-callout,
.support-process,
.docs-hero,
.tutorial-next { background: var(--ft-navy); }
.seo-copy p { color: #BFD0E5; }
.seo-copy li::before { color: var(--ft-cyan); }
.serp-result small { color: #087F74; }
.serp-result h3 { color: var(--ft-blue); }
.language-grid article > span,
.tutorial-step-number { background: var(--ft-navy); color: var(--ft-cyan); }
.marketing-footer { background: #07183D; color: #B9CBE1; }
.footer-cta, .footer-bottom { border-color: #284371; }
.footer-primary-logo {
    display: block;
    width: 235px;
    padding: 11px 13px;
    border-radius: 14px;
    background: #fff;
}
.footer-primary-logo img { display: block; width: 100%; height: auto; }

/* Guest pages and the free translator share the public palette. */
.public-app-body {
    --ink: var(--ft-navy);
    --muted: var(--ft-muted);
    --green: var(--ft-primary);
    --green-dark: #087F74;
    --soft: #D9FAF5;
    --line: var(--ft-line);
    --page: var(--ft-light);
    --nav: var(--ft-navy);
}
.public-app-body .global-topbar { border-color: var(--ft-line); background: rgba(255, 255, 255, .96); }
.public-app-body .public-main { background: radial-gradient(circle at 80% 0, rgba(45, 212, 191, .13), transparent 32%), var(--ft-light); }
.public-app-body .translator-shell { border-color: var(--ft-line); box-shadow: 0 24px 70px rgba(11, 31, 77, .10); }
.public-app-body .tool-tabs { background: #E7F9F7; }
.public-app-body .tool-tabs button.active { color: var(--ft-blue); }
.public-app-body .translation-box, .public-app-body .document-drop { background: #FBFFFF; }
.app-brand { gap: 9px; }
.app-brand > .brand-emblem { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
.app-brand > .brand-emblem img { width: 117px; left: -38px; top: -4px; }

@media (max-width: 560px) {
    .brand-copy small { display: none; }
    .brand-copy strong { font-size: 16px; }
    .marketing-logo > .brand-emblem { width: 39px; height: 39px; flex-basis: 39px; }
    .marketing-logo > .brand-emblem img { width: 120px; left: -39px; top: -4px; }
    .footer-primary-logo { width: 210px; }
}