/* ═════════════════════════════════════════════════════════════════
   SeaFly Index 3.0 — chat-first homepage (ChatGPT / Claude style like the dashboard, app-ai.css)
   body.x3-ui · prefix x3- · re-maps the homepage tokens to the warm neutral dashboard palette.
   The shared AI chat (#chatInterface) keeps its behaviour — only its look changes.
═════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700 800; font-display: swap; src: url('../fonts/inter-bold.woff2') format('woff2'); }

body.x3-ui {
    --bg-deep: #ffffff; --bg-card: #ffffff; --bg-surface: #f5f4f1;
    --border: #ebe9e4; --border-lit: #dedbd4;
    --accent: #2f5fe0; --accent-soft: #2f5fe0;
    --text-1: #1c1b19; --text-2: #5d5a53; --text-3: #8f8b82;
    --header-bg: rgba(255,255,255,.92); --overlay-1: rgba(28,27,25,.04); --overlay-2: rgba(28,27,25,.08);
    --shadow-color: rgba(28,27,25,.10); --chat-input-bg: transparent;
    --x3-side: #f9f8f6; --x3-me: #f2f1ed; --x3-ink: #1c1b19; --x3-ink-fg: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased; background: var(--bg-deep); color: var(--text-1);
}
html[data-theme="dark"] body.x3-ui {
    --bg-deep: #14161b; --bg-card: #1b1e25; --bg-surface: #20242c;
    --border: #262a33; --border-lit: #323743;
    --accent: #5b8cff; --accent-soft: #8aaeff;
    --text-1: #eceef2; --text-2: #a4a9b4; --text-3: #6f7581;
    --header-bg: rgba(20,22,27,.92); --overlay-1: rgba(255,255,255,.04); --overlay-2: rgba(255,255,255,.08);
    --shadow-color: rgba(0,0,0,.4);
    --x3-side: #0f1115; --x3-me: #262b35; --x3-ink: #eceef2; --x3-ink-fg: #14161b;
}
body.x3-ui h1, body.x3-ui h2, body.x3-ui h3, body.x3-ui .chat-header-info h3 { font-family: 'Inter', system-ui, sans-serif; }

/* ── hero = a calm chat start page ── */
body.x3-ui .hero { min-height: auto; padding: 96px 20px 24px; background: var(--bg-deep); }
body.x3-ui .hero::after, body.x3-ui .hero::before, body.x3-ui .blob, body.x3-ui .hero-slider, body.x3-ui .chips { display: none !important; }
body.x3-ui .hero-content { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.x3-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--x3-side); font-size: .82rem; color: var(--text-2); margin-bottom: 26px; }
.x3-badge img { border-radius: 6px; }
h1.x3-title { font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 14px; color: var(--text-1); }
.x3-lead { font-size: 1.06rem; line-height: 1.6; color: var(--text-2); max-width: 600px; margin: 0 auto 28px; }
.x3-lead strong { color: var(--text-1); font-weight: 600; }

/* composer (the real chat, compact state) */
body.x3-ui .chat-wrap { width: 100%; max-width: 720px; }
body.x3-ui .chat-glow { display: none; }
body.x3-ui #chatInterface { border-radius: 26px; border: 1px solid var(--border-lit); background: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(28,27,25,.08); }
body.x3-ui #chatInterface:not(.chat-popped) .chat-input-area { padding: 10px; }
body.x3-ui #chatInterface:not(.chat-popped) #messageInput { min-height: 64px; font-size: 16.5px; padding: 18px 16px; }
body.x3-ui #messageInput { background: transparent; border: 0; border-radius: 16px; box-shadow: none !important; }
body.x3-ui #sendBtn { background: var(--x3-ink) !important; border-radius: 50% !important; width: 40px; height: 40px; }
body.x3-ui #sendBtn svg { stroke: var(--x3-ink-fg); }
body.x3-ui .msg-bubble.user { background: var(--x3-me); color: var(--text-1); border: 0; }
body.x3-ui .msg-bubble.bot { background: transparent; border: 0; padding-left: 0; }
body.x3-ui .chat-header { background: var(--bg-card); border-bottom: 1px solid var(--border); }
/* opened chat: centered like a chat app on desktop (mobile stays full-screen) */
@media (min-width: 641px) {
    body.x3-ui #chatInterface.chat-popped:not(.chat-maximized) { left: 50%; right: auto; bottom: 24px; top: 88px; height: auto; max-height: none;
        width: min(880px, calc(100vw - 48px)); margin-left: calc(min(880px, calc(100vw - 48px)) / -2); }
}

/* ── layout ── */
.x3-wrap { max-width: 1080px; margin: 0 auto; }
.x3-narrow { max-width: 780px; }
.x3-sec { padding: 88px 20px; }
.x3-alt { background: var(--x3-side); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.x3 h2 { font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 14px; color: var(--text-1); max-width: 720px; }
.x3 h3 { font-weight: 600; font-size: 1rem; margin: 0 0 4px; color: var(--text-1); letter-spacing: -.01em; }
.x3 p { color: var(--text-2); line-height: 1.65; font-size: .98rem; }
.x3 p strong { color: var(--text-1); }
.x3-kicker { font-size: .8rem !important; font-weight: 600; color: var(--accent) !important; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.x3-intro { max-width: 760px; margin-bottom: 36px; }
.x3-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* starters + facts */
.x3-start { padding: 8px 20px 72px; background: var(--bg-deep); }
.x3-start .x3-wrap { max-width: 760px; }
.x3-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x3-starter { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card);
    cursor: pointer; font: inherit; color: var(--text-1); transition: background .15s, border-color .15s; }
.x3-starter:hover { background: var(--x3-side); border-color: var(--border-lit); }
.x3-starter:focus-visible, .x3-go:focus-visible, .x3-btn:focus-visible, .x3-fake-input:focus-visible, .x3-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.x3-starter svg { color: var(--text-3); margin-top: 2px; flex-shrink: 0; }
.x3-starter b { display: block; font-weight: 600; font-size: .92rem; }
.x3-starter small { display: block; color: var(--text-3); font-size: .84rem; margin-top: 2px; }
.x3-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 28px 0 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--border); }
.x3-facts div { background: var(--bg-card); padding: 16px 18px; }
.x3-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
.x3-facts dd { margin: 0; font-size: .92rem; color: var(--text-1); line-height: 1.45; }

/* steps + example conversation */
.x3-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.x3-steps li { display: flex; gap: 12px; align-items: center; font-size: .96rem; color: var(--text-2); }
.x3-steps b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--x3-side); border: 1px solid var(--border); font-size: .82rem; color: var(--text-1); flex-shrink: 0; }
.x3-steps strong { color: var(--text-1); }
.x3-convo { margin: 0; padding: 22px; border-radius: 24px; border: 1px solid var(--border); background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(28,27,25,.07); display: grid; gap: 14px; }
.x3-msg { font-size: .93rem; line-height: 1.55; color: var(--text-1); }
.x3-msg.me { justify-self: end; max-width: 82%; background: var(--x3-me); padding: 10px 15px; border-radius: 18px; }
.x3-msg.ai { display: flex; gap: 10px; align-items: flex-start; max-width: 94%; }
.x3-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1d4ed8, #3b7bff); color: #fff; flex-shrink: 0; }
.x3-av svg { fill: #fff; stroke: none; }
.x3-opts, .x3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.x3-opts span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-lit); font-size: .82rem; color: var(--text-1); }
.x3-chips span { padding: 4px 10px; border-radius: 8px; background: rgba(47,95,224,.08); color: var(--accent); font-size: .78rem; font-weight: 600; }
.x3-convo figcaption, .x3-panel figcaption { font-size: .74rem; color: var(--text-3); }

/* three columns */
.x3-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.x3-three article { padding: 24px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); }
.x3-three p { font-size: .93rem; }

/* service list (like a dashboard list) */
.x3-list { list-style: none; margin: 30px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.x3-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border); transition: background .15s; }
.x3-list li:last-child { border-bottom: 0; }
.x3-list li:hover { background: var(--x3-side); }
.x3-list p { margin: 0; font-size: .92rem; }
.x3-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--x3-side); border: 1px solid var(--border); color: var(--text-1); }
.x3-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-lit); background: var(--bg-card); color: var(--text-1); font: 500 .86rem 'Inter', sans-serif; cursor: pointer; white-space: nowrap; }
.x3-go:hover { background: var(--x3-ink); color: var(--x3-ink-fg); border-color: var(--x3-ink); }

/* checks */
.x3-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.x3-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--text-1); line-height: 1.5; }
.x3-checks svg { color: var(--green, #16a34a); margin-top: 3px; flex-shrink: 0; }

/* dashboard panel */
.x3-panel { margin: 0; padding: 20px; border-radius: 22px; border: 1px solid var(--border); background: var(--bg-card); box-shadow: 0 18px 50px rgba(28,27,25,.08); display: grid; gap: 16px; }
.x3-panel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; }
.x3-panel-top em { margin-left: auto; font-style: normal; font-size: .76rem; font-weight: 600; color: #16a34a; background: rgba(22,163,74,.1); padding: 4px 10px; border-radius: 999px; }
.x3-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: pulse 2s ease-in-out infinite; }
.x3-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.x3-flow li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--text-3); }
.x3-flow li::before { content: ''; position: absolute; left: 4px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border-lit); }
.x3-flow li.done { color: var(--text-1); }
.x3-flow li.done::before { background: #16a34a; border-color: #16a34a; }
.x3-flow li.now { color: var(--text-1); font-weight: 600; }
.x3-flow li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,95,224,.15); }
.x3-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x3-offers div { padding: 12px 14px; border-radius: 14px; background: var(--x3-side); border: 1px solid var(--border); }
.x3-offers small { display: block; font-size: .72rem; color: var(--text-3); }
.x3-offers b { display: block; font-size: .95rem; }
.x3-offers span { font-size: .8rem; color: var(--text-2); }

/* partner */
.x3-partner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; padding: 40px; border-radius: 26px; border: 1px solid var(--border); background: var(--x3-side); align-items: center; }
.x3-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 20px; border-radius: 999px; background: var(--x3-ink); color: var(--x3-ink-fg); text-decoration: none; font-weight: 600; font-size: .94rem; }
.x3-btn:hover { opacity: .9; }

/* FAQ */
.x3-faq { border-bottom: 1px solid var(--border); }
.x3-faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.x3-faq summary::-webkit-details-marker { display: none; }
.x3-faq summary::after { content: '+'; font-size: 1.3rem; color: var(--text-3); transition: transform .2s; }
.x3-faq[open] summary::after { transform: rotate(45deg); }
.x3-faq h3 { margin: 0; }
.x3-faq p { margin: 0 0 18px; }

/* end */
.x3-end { text-align: center; }
.x3-end h2 { margin-left: auto; margin-right: auto; }
.x3-end p { max-width: 620px; margin: 0 auto; }
.x3-fake-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 640px; margin: 28px auto 0; padding: 10px 10px 10px 22px;
    border-radius: 999px; border: 1px solid var(--border-lit); background: var(--bg-card); box-shadow: 0 12px 40px rgba(28,27,25,.08); cursor: text; font: inherit; color: var(--text-3); font-size: 1rem; }
.x3-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--x3-ink); color: var(--x3-ink-fg); }
.x3-end small { display: block; margin-top: 14px; color: var(--text-3); font-size: .86rem; }

@media (max-width: 860px) {
    .x3-two, .x3-partner { grid-template-columns: 1fr; gap: 32px; }
    .x3-three { grid-template-columns: 1fr; }
    .x3-facts { grid-template-columns: 1fr 1fr; }
    .x3-partner { padding: 28px 20px; }
}
@media (max-width: 560px) {
    body.x3-ui .hero { padding: 72px 16px 18px; }
    .x3-sec { padding: 64px 16px; }
    .x3-start { padding: 4px 16px 56px; }
    .x3-starters, .x3-facts { grid-template-columns: 1fr; }
    .x3-list li { grid-template-columns: 40px 1fr; }
    .x3-go { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .x3-dot { animation: none; } }
@media (max-width: 640px) { body.x3-ui #chatInterface.chat-popped { border-radius: 0; border: 0; } }