/* Design C: Vivid. A modern AI product look: navy to green gradient, soft depth, floating header and dock, bot mascot. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src: url(/assets/fonts/montserrat-latin-800-normal.woff2) format('woff2'); }

:root {
  --display: 'Montserrat', 'Inter', sans-serif;
  --grad: linear-gradient(115deg, #193e99 0%, #2563d9 48%, #018c0b 100%);
  --grad-soft: linear-gradient(115deg, rgba(25, 62, 153, 0.1), rgba(1, 140, 11, 0.1));
  --bg: #f4f7fd;
  --radius: 22px;
  --shadow-1: 0 2px 6px rgba(25, 62, 153, 0.06), 0 12px 30px -18px rgba(25, 62, 153, 0.3);
  --shadow-2: 0 4px 10px rgba(25, 62, 153, 0.06), 0 30px 60px -30px rgba(25, 62, 153, 0.45);
}

body { background: #fbfcff; }
body.layout-tool { background: var(--bg); }
h1, h2, h3, .tool-head h1, .section-head h2, .feature-copy h3, .cta-band h2, .doc h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); letter-spacing: -0.04em; }
.hero h1 em, .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons. */
.btn { border-radius: 14px; font-weight: 700; }
.btn-primary { background: var(--grad); background-size: 150% 100%; box-shadow: 0 10px 24px -10px rgba(37, 99, 217, 0.6); transition: background-position 0.4s, box-shadow 0.2s, transform 0.15s; }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(1, 140, 11, 0.5); }
.btn-secondary { border-radius: 14px; border-color: #d5def0; }
.seg { border-radius: 14px; }
.seg button { border-radius: 11px; }
.input, .select, .textarea { border-radius: 12px; }

/* Floating glass header. */
.topbar { background: transparent; border: 0; backdrop-filter: none; padding: 10px 14px 0; }
.topbar-in { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border: 1px solid rgba(213, 222, 240, 0.9); border-radius: 20px; box-shadow: var(--shadow-1); height: 62px; }
.topnav > a, .menu-btn { border-radius: 12px; }
.menu-panel { border-radius: 24px; }
.menu-ico { border-radius: 14px; background: var(--grad-soft); }
.menu-item:hover .menu-ico, .tool-tile:hover .menu-ico { background: var(--grad); color: #fff; }
:root { --topbar-h: 72px; }

/* Floating tool dock. */
.layout-tool .page { gap: 0; }
.rail { margin: 12px 0 12px 12px; height: calc(100vh - var(--topbar-h) - 24px); top: calc(var(--topbar-h) + 12px); border: 1px solid #e1e8f5; border-radius: 22px; box-shadow: var(--shadow-1); }
.rail-link { border-radius: 14px; }
.rail-link.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(37, 99, 217, 0.7); }
.rail-link.is-active .rail-ico { color: #fff; }

/* Tool surfaces. */
.tool-card, .panel { border-radius: 24px; border: 1px solid #e3e9f6; box-shadow: var(--shadow-2); }
.tool-head h1 .ico { color: #2563d9; }
.tab { border-radius: 12px 12px 0 0; }
.tab[aria-selected='true'] { color: #193e99; }
.tab[aria-selected='true']::after { background: var(--grad); height: 3px; }
.side { background: #f7f9fe; }
.sug, .cat-btn, .source, .stat { border-radius: 16px; }
.sug-opt { background: var(--grad); border: 0; }
.popover { border-radius: 18px; }
.modal { border-radius: 26px; }
.assist-bar, .composer { border-radius: 20px; }

/* Home. */
.hero { background: radial-gradient(900px 500px at 88% 0%, rgba(37, 99, 217, 0.16), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(1, 140, 11, 0.12), transparent 60%), #fbfcff; border-bottom: 0; }
.eyebrow { background: #fff; border: 1px solid #dce5f5; box-shadow: var(--shadow-1); border-radius: 999px; }
.demo { border-radius: 26px; border: 1px solid #e3e9f6; box-shadow: 0 50px 90px -40px rgba(25, 62, 153, 0.5); }
.section-alt { background: linear-gradient(180deg, #f4f7fd, #f2f8f3); border: 0; }
.tool-tile { border-radius: 22px; border: 1px solid #e3e9f6; box-shadow: var(--shadow-1); }
.tool-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.mock, .step { border-radius: 24px; box-shadow: var(--shadow-1); border: 1px solid #e3e9f6; }
.step::before { border-radius: 12px; background: var(--grad); }
.privacy-band { border-radius: 28px; background: var(--grad); }
.faq details { border-radius: 18px; }
.cta-band h2 em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }

/* Bot mascot (the logo's O): eyes follow the pointer. */
.mascot { position: absolute; z-index: 3; width: 112px; height: 132px; left: -46px; top: -58px; filter: drop-shadow(0 18px 24px rgba(25, 62, 153, 0.3)); animation: cqb-float 5s ease-in-out infinite; }
.mascot .eye { transition: transform 0.12s ease-out; }
@keyframes cqb-float { 50% { transform: translateY(-8px); } }
.demo-wrap { position: relative; }

/* Footer. */
.footer { background: #0e1d48; position: relative; }
.footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }

@media (max-width: 640px) {
  .topbar { padding: 6px 8px 0; }
  .topbar-in { height: 54px; border-radius: 16px; }
  :root { --topbar-h: 60px; }
  .mascot { width: 76px; height: 90px; left: auto; right: -6px; top: -48px; }
}
@media (max-width: 860px) {
  .rail { margin: 0; height: auto; border-radius: 0; border-width: 0 0 1px; box-shadow: none; top: var(--topbar-h); }
}

/* Tool grid: the two flagship tools take double width so the 14 tiles fill four even rows. */
.tool-grid .tool-tile:nth-child(1), .tool-grid .tool-tile:nth-child(12) { grid-column: span 2; background: linear-gradient(135deg, #fff 55%, #eef3ff 100%); }
@media (max-width: 1180px) { .tool-grid .tool-tile:nth-child(12) { grid-column: auto; } }
@media (max-width: 860px) { .tool-grid .tool-tile:nth-child(1) { grid-column: 1 / -1; } }