/* ZendoAI site styles.
   Colour tokens below are copied from zendosoftware.ro (assets/css/main.css) so both sites share
   one palette and the same dark mode; keep them in sync. Brand guide: ~/Code/zendo-brand */
/* Brand palette (ZenB2B): colour channels ("R G B") read by the Tailwind tokens
   in tailwind.config.js. Brand #0274BE, black, white, greys #EEF0F1 / #DEE1E3 /
   #6E6E6E, light blue #009FFF as decorative accent, Red Hat Display. */
:root {
    --c-ink: 0 0 0;
    --c-body: 0 0 0;
    --c-muted: 110 110 110;       /* #6E6E6E */
    --c-primary: 2 116 190;       /* #0274BE */
    --c-primary-hover: 2 90 147;  /* #025A93 */
    --c-on-primary: 255 255 255;
    --c-link: 2 116 190;
    --c-accent: 0 159 255;        /* #009FFF */
    --c-highlight: 0 159 255;
    --c-highlight-soft: 224 242 255;
    --c-highlight-ink: 2 116 190;
    --c-tint: 238 240 241;        /* #EEF0F1 */
    --c-page: 255 255 255;
    --c-surface: 255 255 255;
    --c-panel: 2 116 190;
    --c-on-panel: 255 255 255;
    --c-line: 222 225 227;        /* #DEE1E3 */
    --c-product-band: 230 241 249; /* #0274BE at ~10%, product card headers */
    --c-band: 238 240 241;        /* alternating section background */
    --c-logo-mark: 2 116 190;
    --c-ai-mark: 0 159 255;
    --c-enso: 0 0 0;
    --c-wordmark: 0 0 0;
    --c-shadow: 0 0 0;
    --c-cta: 255 255 255;         /* button on the primary panel */
    --c-on-cta: 2 116 190;
    --c-cta-hover: 238 240 241;
    --font-display: "Red Hat Display";
    --font-body: "Red Hat Display";
}

/* Dark mode. "Auto" follows the system setting; an explicit choice sets
   <html data-mode="light|dark"> (see app.vue and composables/useColorScheme.ts). */
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
        color-scheme: dark;
        --c-ink: 236 239 242;         /* #ECEFF2 */
        --c-body: 214 219 224;        /* #D6DBE0 */
        --c-muted: 154 163 173;       /* #9AA3AD */
        --c-primary: 59 155 224;      /* #3B9BE0, brand blue lifted for dark */
        --c-primary-hover: 99 178 235;
        --c-on-primary: 14 17 22;
        --c-link: 99 178 235;         /* #63B2EB */
        --c-accent: 77 184 255;       /* #4DB8FF */
        --c-highlight: 77 184 255;
        --c-highlight-soft: 22 40 56;
        --c-highlight-ink: 99 178 235;
        --c-tint: 24 30 38;           /* #181E26 */
        --c-page: 14 17 22;           /* #0E1116 */
        --c-surface: 22 27 34;        /* #161B22 */
        --c-panel: 13 43 69;          /* #0D2B45, deep brand navy */
        --c-on-panel: 236 239 242;
        --c-band: 18 22 29;           /* #12161D */
        --c-line: 40 47 56;           /* #282F38 */
        --c-product-band: 21 37 53;
        --c-logo-mark: 59 155 224;
        --c-ai-mark: 77 184 255;
        --c-enso: 232 236 233;        /* pale ink */
        --c-wordmark: 236 239 242;
        --c-shadow: 0 0 0;
        --c-cta: 77 184 255;
        --c-on-cta: 14 17 22;
        --c-cta-hover: 125 203 255;
    }
    :root:not([data-mode="light"]) .light-only { display: none; }
    :root:not([data-mode="light"]) .dark-only { display: revert; }
}
:root[data-mode="dark"] {
    color-scheme: dark;
    --c-ink: 236 239 242;
    --c-body: 214 219 224;
    --c-muted: 154 163 173;
    --c-primary: 59 155 224;
    --c-primary-hover: 99 178 235;
    --c-on-primary: 14 17 22;
    --c-link: 99 178 235;
    --c-accent: 77 184 255;
    --c-highlight: 77 184 255;
    --c-highlight-soft: 22 40 56;
    --c-highlight-ink: 99 178 235;
    --c-tint: 24 30 38;
    --c-page: 14 17 22;
    --c-surface: 22 27 34;
    --c-panel: 13 43 69;
    --c-on-panel: 236 239 242;
    --c-band: 18 22 29;
    --c-line: 40 47 56;
    --c-product-band: 21 37 53;
    --c-logo-mark: 59 155 224;
    --c-ai-mark: 77 184 255;
    --c-enso: 232 236 233;
    --c-wordmark: 236 239 242;
    --c-shadow: 0 0 0;
    --c-cta: 77 184 255;
    --c-on-cta: 14 17 22;
    --c-cta-hover: 125 203 255;
}
:root[data-mode="dark"] .light-only { display: none; }
:root[data-mode="dark"] .dark-only { display: revert; }

.dark-only { display: none; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: rgb(var(--c-page));
    color: rgb(var(--c-body));
    font: 400 17px/1.6 var(--font-body), system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display), sans-serif; font-weight: 700; color: rgb(var(--c-ink)); margin: 0; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
::selection { background-color: rgb(var(--c-accent) / 0.3); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid rgb(var(--c-link));
    outline-offset: 3px;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 28px; border-radius: 9999px; border: 0;
    font: 500 16px var(--font-body), sans-serif; text-decoration: none; cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.btn-primary { background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); }
.btn-primary:hover { background: rgb(var(--c-primary-hover)); }
.btn-ghost { color: rgb(var(--c-ink)); box-shadow: inset 0 0 0 1px rgb(var(--c-ink) / .2); }
.btn-ghost:hover { background: rgb(var(--c-tint)); box-shadow: inset 0 0 0 1px rgb(var(--c-ink) / .4); }
.btn-cta { background: rgb(var(--c-cta)); color: rgb(var(--c-on-cta)); font-weight: 600; }
.btn-cta:hover { background: rgb(var(--c-cta-hover)); }
.btn-sm { height: 40px; padding: 0 20px; font-size: 15px; }

/* Header */
.header {
    position: fixed; inset: 0 0 auto; z-index: 40;
    background: rgb(var(--c-page) / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(var(--c-line));
}
.header .wrap { height: 72px; display: flex; align-items: center; gap: 16px; }
.header .brand img { height: 40px; width: auto; margin-top: -4px; }
.header .by { font-size: 14px; color: rgb(var(--c-muted)); text-decoration: none; white-space: nowrap; }
.header .by:hover { color: rgb(var(--c-ink)); }
.header .tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 9999px; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--c-muted));
    text-decoration: none; font: 600 13px var(--font-body), sans-serif; letter-spacing: .04em;
}
.icon-btn:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-tint)); }
.header .btn { margin-left: 8px; }
@media (max-width: 639px) {
    .header .by, .header .btn { display: none; }
}

/* Hero */
.hero { padding: 136px 0 80px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero { padding: 128px 0 96px; } .hero .wrap { grid-template-columns: 1.25fr 1fr; gap: 64px; } }
.pill {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
    padding: 6px 16px; border-radius: 9999px; background: rgb(var(--c-tint));
    color: rgb(var(--c-link)); font-size: 14px; font-weight: 500; line-height: 1.4;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--c-highlight)); flex: none; }
.hero h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; }
@media (min-width: 640px) { .hero h1 { font-size: 48px; } }
@media (min-width: 1024px) { .hero h1 { font-size: 64px; } }
.underline { position: relative; white-space: nowrap; }
.underline svg { position: absolute; left: -4px; bottom: -8px; width: 104%; height: 16px; color: rgb(var(--c-highlight)); }
.hero .lead { margin-top: 24px; max-width: 560px; font-size: 18px; line-height: 1.65; color: rgb(var(--c-muted)); }
@media (min-width: 1024px) { .hero .lead { font-size: 20px; } }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { width: 340px; height: auto; justify-self: center; }
@media (min-width: 1024px) { .hero-art { width: 480px; justify-self: end; } }
@media (max-width: 639px) { .hero-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-art .flow-dot { display: none; } html { scroll-behavior: auto; } }

/* Sections */
.section { padding: 80px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
.section.tint { background: rgb(var(--c-tint) / .6); }
.eyebrow { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: rgb(var(--c-link)); margin-bottom: 16px; }
.section h2 { font-size: 36px; line-height: 1.2; max-width: 680px; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .section h2 { font-size: 48px; } }
.grid3 { margin-top: 56px; display: grid; gap: 24px; }
@media (min-width: 768px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.card {
    border-radius: 16px; background: rgb(var(--c-surface)); padding: 32px;
    box-shadow: 0 1px 2px rgb(var(--c-shadow) / .04), 0 10px 30px -14px rgb(var(--c-shadow) / .18);
    transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(var(--c-shadow) / .05), 0 18px 40px -16px rgb(var(--c-shadow) / .25); }
.card .icon { width: 48px; height: 48px; border-radius: 12px; background: rgb(var(--c-tint)); color: rgb(var(--c-link)); display: flex; align-items: center; justify-content: center; }
.card .icon svg { width: 24px; height: 24px; }
.card h3, .steps h3 { margin-top: 24px; font-size: 24px; line-height: 1.3; }
.card p, .steps p { margin-top: 10px; color: rgb(var(--c-muted)); line-height: 1.65; }
/* Example agent, under the three capability cards */
.agent { margin-top: 16px; display: grid; gap: 32px; }
@media (min-width: 900px) { .agent { grid-template-columns: 1.4fr 1fr; gap: 56px; padding: 40px 48px; } }
.agent-label { margin-top: 56px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: rgb(var(--c-muted)); }
.agent-head { display: flex; gap: 16px; align-items: center; }
.agent-head .icon { flex: none; }
.card .agent-head h3 { margin-top: 0; }
.card .agent-head .tag { margin-top: 4px; font-size: 14px; font-weight: 500; color: rgb(var(--c-link)); }
.agent dl { margin: 0; display: grid; gap: 16px; align-content: center; }
.agent dl div { border-top: 1px solid rgb(var(--c-line)); padding-top: 14px; }
.agent dt { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--c-muted)); }
.agent dd { margin: 4px 0 0; color: rgb(var(--c-body)); line-height: 1.55; }
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 40px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .steps { gap: 56px; } }
.steps li { border-top: 1px solid rgb(var(--c-line)); padding-top: 32px; }
.steps .num { font: 700 48px/1 var(--font-display), sans-serif; color: rgb(var(--c-highlight)); }
.steps h3 { margin-top: 16px; }

/* Built by Zendo Software */
.maker { display: grid; gap: 32px; align-items: center; border: 1px solid rgb(var(--c-line)); border-radius: 24px; padding: 40px 32px; }
@media (min-width: 900px) { .maker { grid-template-columns: auto 1fr auto; padding: 40px 48px; gap: 48px; } }
.maker img { height: 44px; width: auto; }
.maker p { color: rgb(var(--c-muted)); line-height: 1.65; max-width: 620px; }
.maker p strong { color: rgb(var(--c-ink)); font-weight: 600; }
.text-link { font-weight: 500; color: rgb(var(--c-ink)); text-decoration: none; white-space: nowrap; }
.text-link:hover { color: rgb(var(--c-link)); }

/* Closing panel with the pilot form */
.panel {
    position: relative; overflow: hidden; border-radius: 24px;
    background: rgb(var(--c-panel)); color: rgb(var(--c-on-panel));
    padding: 56px 28px; display: grid; gap: 40px;
}
@media (min-width: 1024px) { .panel { padding: 72px 64px; grid-template-columns: 1fr 1fr; gap: 64px; } }
.panel .enso-mark { position: absolute; left: 16px; bottom: -200px; width: 540px; height: 540px; color: rgb(var(--c-accent)); opacity: .25; pointer-events: none; }
.panel > * { position: relative; }
.panel h2 { color: inherit; font-size: 36px; line-height: 1.2; }
@media (min-width: 1024px) { .panel h2 { font-size: 44px; } }
.panel .intro { margin-top: 20px; font-size: 18px; line-height: 1.65; opacity: .85; }
.panel .mail { display: inline-block; margin-top: 28px; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(var(--c-accent)); text-underline-offset: 4px; }
.form { background: rgb(var(--c-page)); color: rgb(var(--c-body)); border-radius: 16px; padding: 28px; display: grid; gap: 16px; }
@media (min-width: 640px) { .form { padding: 32px; } .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.form .two { display: grid; gap: 16px; }
.form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: rgb(var(--c-body)); }
.form input, .form textarea {
    width: 100%; border-radius: 12px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface));
    padding: 12px 16px; font: 400 16px var(--font-body), sans-serif; color: rgb(var(--c-body));
}
.form input:focus, .form textarea:focus { outline: none; border-color: rgb(var(--c-link)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / .3); }
.form .note { font-size: 14px; color: rgb(var(--c-muted)); }
.form .note a { text-underline-offset: 2px; }
.form .btn { justify-self: start; margin-top: 4px; }
.form .status { font-size: 15px; line-height: 1.5; }
.form .status[data-state="ok"] { color: rgb(var(--c-ink)); font-weight: 500; }
.form .status[data-state="error"] { color: #C0392B; }
.hp { display: none; }

/* Footer */
.footer { border-top: 1px solid rgb(var(--c-line)); padding: 56px 0 40px; font-size: 15px; color: rgb(var(--c-muted)); }
.footer .top { display: grid; gap: 40px; }
@media (min-width: 768px) { .footer .top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer .top img { height: 40px; width: auto; }
.footer .about { margin-top: 20px; max-width: 340px; line-height: 1.6; }
.footer h2 { font-size: 14px; font-weight: 600; color: rgb(var(--c-body)); margin-bottom: 14px; font-family: var(--font-body), sans-serif; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: rgb(var(--c-ink)); }
.footer .with-icon { display: inline-flex; align-items: center; gap: 8px; }
.footer .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(var(--c-line)); font-size: 14px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .footer .legal { flex-direction: row; justify-content: space-between; } .footer .legal .company { text-align: right; } }
.modes { display: inline-flex; gap: 4px; border: 1px solid rgb(var(--c-line)); border-radius: 9999px; padding: 4px; margin-top: 12px; }
.modes button { border: 0; background: none; border-radius: 9999px; height: 28px; padding: 0 12px; font: 500 12px var(--font-body), sans-serif; color: rgb(var(--c-muted)); cursor: pointer; }
.modes button[aria-pressed="true"] { background: rgb(var(--c-tint)); color: rgb(var(--c-ink)); }
@media (max-width: 1023px) { .panel .enso-mark { left: auto; right: -120px; bottom: auto; top: -120px; width: 380px; height: 380px; opacity: .18; } }