/* Shared Wiqo design language for the public site and signed-in workspace. */
:root {
  --canvas: #fff;
  --tint: #fafafa;
  --ink: #111;
  --ink-2: #2b2b2b;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --signal: #111;
  --signal-deep: #111;
  --sun: #fff7ed;
  --white: #fff;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --gutter: clamp(16px, 3vw, 40px);
  --section-y: clamp(72px, 9vw, 132px);
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body { background: var(--canvas); font-size: 15px; line-height: 1.55; }
::selection { background: #e5e5e5; color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.container { max-width: 1160px; }
.section-tint { background: var(--canvas); }
.section-tint + .section, .section + .section-tint { border-top: 0; }
.eyebrow, .eyebrow-dark { color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.h2, .cta-title { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.h2 em, .hero-title em, .cta-title em, .h2-light em { color: inherit; }
.lede { font-size: clamp(15px, 1.45vw, 18px); line-height: 1.6; }
.section-head { margin-bottom: clamp(30px, 5vw, 60px); }
.scroll-progress { height: 2px; }

.button { min-height: 44px; box-shadow: none; font-weight: 600; transition: transform .14s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.button:active { transform: scale(.96); }
.button-signal, .button-ink { background: var(--ink); color: #fff; box-shadow: none; }
.button-signal:hover, .button-ink:hover { background: #303030; }
.button-ghost, .button-ghost-dark, .button-outline { border-color: var(--line); background: #fff; color: var(--ink); backdrop-filter: none; }
.button-ghost:hover, .button-ghost-dark:hover, .button-outline:hover { border-color: var(--ink); background: #fff; }
.button-disabled { background: #f5f5f5; color: var(--muted); }
.button-disabled.is-live { background: var(--ink); color: #fff; }
.text-link, .text-link-light { color: var(--ink); font-weight: 600; border-bottom-width: 1px; }
.skip-link { background: var(--ink); color: #fff; }

.site-header { inset-block-start: 12px; }
.header-pill, .site-header.is-solid .header-pill { width: min(100%, 1160px); padding: 7px 8px 7px 16px; border: 1px solid var(--line); background: rgba(255,255,255,.96); color: var(--ink); box-shadow: none; backdrop-filter: blur(16px); }
.brand-mark img, .site-header.is-solid .brand-mark img { filter: none; }
.brand-name { font-size: 19px; letter-spacing: -.035em; }
.primary-nav { gap: 20px; font-size: 13px; font-weight: 500; }
.primary-nav > a:not(.button) { opacity: 1; color: var(--muted); }
.primary-nav > a:not(.button):hover { color: var(--ink); }
.primary-nav .button { min-height: 40px; }
.lang-link { font-family: var(--font-display); }

.hero { margin: 0; border-radius: 0; border-bottom: 0; background: var(--canvas); color: var(--ink); }
.hero-bg, .hero-orb, .hero-grain, .hero-visual::before { display: none; }
.hero-inner { width: min(100% - var(--gutter) * 2, 1160px); min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 144px 0 60px; }
.hero-copy { max-width: 760px; margin-inline: auto; text-align: center; }
.hero-title { max-width: 15ch; font-size: clamp(2.75rem, 5.1vw, 4.9rem); line-height: 1.06; letter-spacing: -.045em; }
.rotator { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .11em; }
.hero-lede { margin: 24px auto 0; max-width: 48ch; font-size: clamp(15px, 1.45vw, 18px); color: var(--muted); }
.hero-actions { justify-content: center; margin-top: 32px; gap: 10px; }
.hero-meta { margin-top: 20px; color: var(--muted); font-family: var(--font-display); font-size: 12px; }
.live-dot { background: #15803d; animation: none; box-shadow: none; }
.hero-visual { display: flex; justify-content: center; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.device-stage { position: relative; container-type: inline-size; width: min(100%, 680px); aspect-ratio: 1; flex: none; }
.device-art, .device-foreground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.device-foreground { z-index: 3; clip-path: polygon(12% 30%, 67% 30%, 67% 60%, 77% 71%, 3% 71%, 12% 63%); }
.phone { position: absolute; z-index: 2; top: 12%; left: 58.5%; width: 36%; height: 77%; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #111; }
.phone::before, .phone::after, .phone-island { display: none; }
.phone-screen { position: absolute; z-index: 1; inset: 0; height: 100%; border-radius: 0; background: transparent; }
.phone-chat { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; font-size: clamp(9px, 1.4cqw, 14px); }
.phone-chat > * { position: absolute; max-width: 86%; }
.phone-chat .bubble { font-size: 1em; padding: .65em .9em; }
.phone-chat .bubble-user { top: 10%; right: 2%; }
.phone-chat .typing, .phone-chat .bubble-bot:not(.typing) { top: 19%; left: 2%; }
.phone-chat .approval, .phone-chat .done { left: 3%; right: 3%; bottom: 8%; max-width: none; font-size: 1em; }
.phone-chat .approval { padding: .9em; }
.phone-chat .approval p { margin: .5em 0 .7em; }
.phone-chat .approval-actions span { padding: .5em; font-size: .9em; }
.phone-chat .done { padding: .9em; }
.phone:not(.is-playing) .approval { display: none; }
.phone-status, .phone-status-icons { display: none; }
.phone-avatar { background: #f5f5f5; border: 1px solid var(--line); }
.phone-avatar img { filter: none; }
.phone-title b { background: #15803d; }
.bubble-user { background: #f5f5f5; color: var(--ink); }
.bubble-bot, .approval { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.approval-head strong, .approval strong { color: #c2410c; }
.approval-icon { background: #fff7ed; color: #c2410c; }
.no-anim .phone:not(.is-playing) .approval { display: none; }
.done { background: #ecfdf3; border: 1px solid #bbf7d0; box-shadow: none; }
.done-check { background: #15803d; color: #fff; }
.done p { color: #15803d; }
.phone.is-playing [data-seq]:not(.is-visible) { display: none; }
.phone.is-playing [data-seq].is-visible { animation: phone-step-in .35s ease-out both; }
.phone.is-playing .typing.is-visible { display: inline-flex; }
.phone.is-playing .approve-btn.is-pulsing { animation: phone-approve .32s ease-in-out; }
@keyframes phone-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phone-approve { 50% { transform: scale(.96); } }
.float-chip { display: none; }

.marquee { padding: 18px 0; border-bottom: 0; }
.marquee { overflow-x: auto; scrollbar-width: none; }
.marquee-track { animation: none; }
.marquee-track li { padding: 8px 16px; font-size: 13px; font-weight: 500; }
.quick-grid { gap: 60px; }
.quick-body { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; }
.quick-facts { margin-top: 28px; }
.quick-facts dt, .release-meta dt { font-family: var(--font-display); font-size: 12px; letter-spacing: 0; text-transform: none; }
.quick-facts dd { font-weight: 600; }
.statement { padding-block: 48px 84px; }
.statement-text { max-width: 1160px; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.25; }
.statement-text .w { opacity: 1; }

.principles, .use-grid { gap: 12px; }
.principle, .use-card, .platform-card, .grow-copy, .badge-card { border: 1px solid var(--line); background: #fff; box-shadow: none; border-radius: 20px; }
.principle { min-height: 260px; gap: 28px; padding: 24px; }
.principle h3 { font-size: 20px; letter-spacing: -.02em; }
.principle-num { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
[data-spot]::before { display: none; }
.flow-layout { gap: 70px; }
.flow-head { top: 110px; }
.flow-steps { gap: 12px; }
.flow-step, .flow-step.is-active { gap: 8px; min-height: 115px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; opacity: 1; }
.flow-track { padding-left: 0; }
.flow-line { display: none; }
.flow-num { position: static; width: auto; height: auto; place-items: start; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); }
.flow-step.is-active .flow-num { background: transparent; box-shadow: none; }
.flow-step h3 { font-size: 18px; }
.flow-status { margin-top: 12px; border: 1px solid var(--line); box-shadow: none; font-size: 13px; }
.use-card { min-height: 330px; padding: 22px; transition: border-color .2s ease, transform .2s ease; }
.use-card h3 { font-size: 18px; }
.use-card > p { font-size: 14px; }
.use-icon { width: 40px; height: 40px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f5f5f5; color: var(--ink); }
.use-icon svg { width: 21px; height: 21px; }
.use-cmd span { color: var(--muted); font-family: var(--font-display); font-size: 11px; }
.compare-wrap { border: 1px solid var(--line); border-radius: 20px; box-shadow: none; }
.compare-table th, .compare-table td { padding: 20px; }
.compare-table thead th { font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; }
.compare-table .is-wiqo { background: #fafafa; }
.compare-table thead .is-wiqo { color: var(--ink); }
.trust-panel { border: 1px solid var(--line); border-radius: 28px; background: #fff; color: var(--ink); }
.trust-copy .lede { color: var(--muted); }
.trust-list li { border: 1px solid var(--line); background: #fff; box-shadow: none; border-radius: 16px; }
.trust-check { background: #ecfdf3; color: #15803d; }
.platform-card { padding: clamp(24px, 3vw, 40px); }
.platform-mac { background: #fff; }
.platform-top h3 { font-size: 24px; }
.version-badge { background: var(--ink); font-family: var(--font-display); }
.version-soon { background: #f5f5f5; }
.sha-button:hover { color: var(--ink); text-decoration: underline; }
.faq-list { display: grid; gap: 12px; }
.faq-item, .faq-item:first-child { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.faq-item summary { min-height: 74px; padding: 16px 20px; font-size: 17px; font-weight: 600; }
.faq-item summary i { width: 32px; height: 32px; box-shadow: none; }
.faq-item[open] summary i { background: #f5f5f5; }
.faq-item p { padding: 0 64px 20px 20px; font-size: 14px; }
.grow-panel { gap: 12px; }
.grow-copy, .badge-card { padding: clamp(24px, 3vw, 40px); }
.badge-preview { border: 1px solid var(--line); }
.badge-code { background: #f5f5f5; color: var(--ink); }
.share-chip { border: 1px solid var(--line); box-shadow: none; font-size: 13px; }
.cta { border-top: 0; }
.cta-title { max-width: 16ch; }
.site-footer { padding-top: 44px; }
.footer-word { color: #f5f5f5; -webkit-text-stroke: 0; }
.welcome-ribbon, .toast { box-shadow: none; }
[data-download="win"][data-state="soon"]::after { background: #f5f5f5; font-family: var(--font-display); }

/* The app uses the same tokens; its network and task behavior stay untouched. */
:root {
  --app-canvas: #fff;
  --app-sidebar: #fafafa;
  --app-surface: #fff;
  --app-inset: #f5f5f5;
  --app-ink: #111;
  --app-muted: #6b6b6b;
  --app-line: #e5e5e5;
  --app-green: #15803d;
  --app-green-wash: #ecfdf3;
  --app-red: #b91c1c;
  --app-red-wash: #fef2f2;
  --app-orange: #c2410c;
  --app-orange-wash: #fff7ed;
  --app-font: var(--font-display);
}
.wiqo-app { font-family: var(--app-font); background: #fff; }
.wiqo-app button:focus-visible, .wiqo-app a:focus-visible, .wiqo-app input:focus-visible, .wiqo-app textarea:focus-visible, .wiqo-app select:focus-visible { outline: 2px solid var(--ink); }
.app-auth { background: #fff; }
.auth-card, .act-unlock, .act-project-layout, .project-dialog { border: 1px solid var(--line); box-shadow: none; }
.auth-card { padding: clamp(24px, 4vw, 36px); }
.auth-form input, .project-dialog input, .project-dialog select, .act-unlock input { background: #f5f5f5; }
.app-primary-button:hover { background: #303030; }
.app-sidebar { border-right: 1px solid var(--line); background: #fafafa; }
.new-chat-button, .device-presence { border: 1px solid var(--line); background: #fff; }
.new-chat-button:hover, .workspace-nav-item:hover, .conversation-item:hover { background: #f5f5f5; }
.workspace-nav-item.is-selected, .conversation-item.is-selected { background: #eee; }
.workspace-nav-item, .conversation-item { color: var(--muted); }
.account-avatar { color: var(--ink); background: #f5f5f5; }
.app-main, .app-topbar, .chat-view, .act-view { background: #fff; }
.message-list { width: min(100%, 820px); }
.app-eyebrow, .sidebar-section-label { color: var(--muted); }
.app-toast { box-shadow: none; }
.act-project-rail, .act-file-list, .act-writer { background: #fafafa; }
.act-project-item.is-selected, .act-file-item.is-selected { background: #eee; }
.unlock-symbol { background: #f5f5f5; color: var(--ink); }
.widget-action, .artifact-download { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.widget-table th, .widget-value, .weather-hourly > span, .writer-change-row pre { background: #f5f5f5; }

@media (hover: hover) {
  .use-card:hover { transform: translateY(-3px); border-color: #bbb; }
}
@media (max-width: 960px) {
  .primary-nav { border: 1px solid var(--line); background: #fff; box-shadow: none; }
  .hero-inner { padding-top: 132px; }
  .flow-head, .faq-head { position: static; }
}
@media (max-width: 640px) {
  .hero { margin: 0; border-radius: 0; }
  .hero-inner { padding-bottom: 24px; }
  .hero-visual { width: 100%; margin-inline: 0; }
  .device-stage { width: min(78vw, 330px); max-width: 100%; aspect-ratio: 1 / 2; transform: none; }
  .device-stage::after { content: ""; position: absolute; z-index: 3; inset: 0; background: url('/assets/iphone-frame.png') center / 200% 100% no-repeat; pointer-events: none; }
  .device-stage .device-art, .device-stage .device-foreground { display: none; }
  .device-stage .phone { top: 2.5%; left: 5%; width: 90%; height: 95%; }
  .device-stage .phone-screen { border-radius: 36px; background: #fff; }
  .phone-chat { font-size: clamp(11px, 4vw, 13px); }
  .phone-chat .bubble-user { top: 13%; }
  .phone-chat .typing, .phone-chat .bubble-bot:not(.typing) { top: 24%; }
  .phone-chat .approval, .phone-chat .done { bottom: 12%; }
  .hero-actions .button { width: 100%; }
  .principle { min-height: auto; }
  .faq-item p { padding-right: 20px; }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0b0b0c;
    --tint: #141416;
    --ink: #f5f5f5;
    --ink-2: #e2e2e2;
    --muted: #a1a1a6;
    --line: rgba(255,255,255,.12);
    --signal: #f5f5f5;
    --signal-deep: #f5f5f5;
    --white: #141416;
    --app-canvas: #0b0b0c;
    --app-sidebar: #141416;
    --app-surface: #141416;
    --app-inset: #1c1c1f;
    --app-ink: #f5f5f5;
    --app-muted: #a1a1a6;
    --app-line: rgba(255,255,255,.12);
    --app-green-wash: rgba(74,222,128,.14);
    --app-red-wash: rgba(239,68,68,.14);
    --app-orange-wash: rgba(251,146,60,.14);
  }
  .header-pill, .site-header.is-solid .header-pill, .primary-nav,
  .button-ghost, .button-ghost-dark, .button-outline, .principle, .use-card,
  .flow-step, .flow-status, .compare-wrap, .trust-panel, .trust-list li,
  .platform-card, .faq-item, .faq-item:first-child, .grow-copy, .badge-card,
  .badge-preview, .share-chip, .float-chip { background-color: #141416; color: var(--ink); }
  .button-signal, .button-ink, .button-disabled.is-live { background: var(--ink); color: #111; }
  .brand-mark img, .site-header.is-solid .brand-mark img,
  .site-footer .brand-mark img, .app-brand img, .empty-mark img { filter: invert(1); }
  .button-signal:hover, .button-ink:hover { background: #ddd; }
  .button-ghost:hover, .button-ghost-dark:hover, .button-outline:hover { background: #1c1c1f; }
  .hero-visual { background: transparent; }
  .phone { --ink: #111; --white: #fff; --line: #e5e5e5; --muted: #6b6b6b; background: transparent; color: #111; }
  .phone-screen { background: transparent; }
  .bubble-bot, .approval { background: #fff; }
  .phone-avatar, .bubble-user, .faq-item[open] summary i, .version-soon,
  .badge-code, .footer-word { background: #1c1c1f; }
  .phone-avatar, .bubble-user { background: #f5f5f5; }
  .done { background: #ecfdf3; }
  .compare-table .is-wiqo { background: #1c1c1f; }
  .trust-check { background: rgba(74,222,128,.14); color: #4ade80; }
  .badge-code { color: var(--ink); }
  .auth-card, .act-unlock, .act-project-layout, .project-dialog,
  .new-chat-button, .device-presence { background: #141416; }
  .auth-form input, .project-dialog input, .project-dialog select,
  .act-unlock input, .widget-table th, .widget-value, .weather-hourly > span,
  .writer-change-row pre { background: #1c1c1f; color: var(--app-ink); }
  .app-primary-button, .send-button { background: #f5f5f5; color: #111 !important; }
  .app-primary-button:hover { background: #ddd; }
  .app-sidebar, .act-project-rail, .act-file-list, .act-writer { background: #141416; }
  .new-chat-button:hover, .workspace-nav-item:hover, .conversation-item:hover,
  .workspace-nav-item.is-selected, .conversation-item.is-selected,
  .act-project-item.is-selected, .act-file-item.is-selected { background: #1c1c1f; }
  .app-main, .app-topbar, .chat-view, .act-view, .app-auth { background: var(--app-canvas); }
  .act-file-editor textarea, .act-writer textarea { background: #141416; color: var(--app-ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .button, .use-card { transition: none; }
}