/* Always dark, regardless of the visitor's OS/browser colour-scheme
     preference -- deliberately not adaptive. The wordmark half of the
     GanttSync logo (wwwroot/img/logo-*.png) is baked in as near-white text;
     it reads clearly on this dark --ground but is nearly invisible on a white
     surface. Since the logo asset itself isn't theme-aware, the page around
     it can't be either. (Nothing in the app sets a `data-theme` attribute --
     there's no theme toggle -- so a `[data-theme="light"]` override here
     would be silently unreachable rather than an actual escape hatch.) */
  :root {
    --ground: #12141d;
    --surface: #1b1e2c;
    --surface-2: #232538;
    --accent: #9184d9;
    --accent-2: #b5abfc;
    --accent-deep: #5d5294;
    --text: #e9e9ed;
    --text-dim: #9c98b8;
    --border: rgba(145, 132, 217, 0.18);
    --danger: #e08a6a;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--ground);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, .display {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", monospace;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
  }
  .mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
  }
  p { margin: 0; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  .container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
  }
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 4px;
    text-transform: uppercase;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  /* Scoped with :root so this page's own accent wins over app.css's .btn-primary,
     which is loaded after this file and would otherwise repaint the marketing CTAs
     with the app's darker in-app button fill. That fill exists because in-app
     buttons sit on white surfaces; here the button sits on the dark --ground, where
     the lighter brand accent is both on-brand and still 5:1+ against white text. */
  :root .btn-primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  :root .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
  .btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }

  /* ---------- Nav ---------- */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  nav.top .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand img { height: 36px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--text-dim); }
  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: var(--accent-2); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  /* Nav buttons live in a 72px bar, so they run smaller than the hero CTAs. */
  .nav-btn { padding: 9px 16px; font-size: 14px; }
  /* The bar has no hamburger, so on narrow screens things have to give way in
     order of expendability. The section links go first -- every section is still
     reachable by scrolling -- then the demo button, which is duplicated in the
     hero and again at the foot of the page. Log In is the only control here with
     no second home, so it is the last thing standing. */
  @media (max-width: 820px) { .nav-links { display: none; } }
  @media (max-width: 430px) { .nav-btn-demo { display: none; } }

  /* ---------- Hero ---------- */
  header.hero { padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 80px); }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }
  @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .hero h1 .accent { color: var(--accent-2); }
  .hero p.lede {
    font-size: 18px;
    color: var(--text-dim);
    max-width: 52ch;
    margin-bottom: 32px;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
  .hero-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
  .hero-meta span { display: flex; align-items: center; gap: 6px; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex: none; }

  /* ---------- Mock Gantt ---------- */
  .board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
    overflow: hidden;
  }
  .board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .board-head .mono { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
  .board-dots { display: flex; gap: 6px; }
  .board-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
  .ruler {
    display: grid;
    grid-template-columns: 120px repeat(14, 1fr);
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .ruler span:first-child { visibility: hidden; }
  .row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
  }
  .row .label { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row .track { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; }
  .bar {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 4px;
    background: var(--accent);
    transform-origin: left center;
    animation: draw 0.9s cubic-bezier(.2,.8,.2,1) both;
  }
  .bar.b2 { background: var(--accent-2); }
  .bar.b3 { background: var(--accent-deep); }
  .bar.conflict {
    background: var(--danger);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent);
  }
  .bar .flag {
    position: absolute;
    right: -6px;
    top: -8px;
    font-size: 11px;
  }
  @keyframes draw {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bar { animation: none; }
  }
  .board-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
  }
  .board-foot .alert { color: var(--danger); display: flex; align-items: center; gap: 6px; }

  /* ---------- Sections generic ---------- */
  section { padding: clamp(56px, 7vw, 96px) 0; }
  .band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .section-head { max-width: 62ch; margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 14px 0 12px; }
  .section-head p { color: var(--text-dim); font-size: 16px; }

  /* ---------- Problem ---------- */
  .ticket {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: clamp(24px, 4vw, 40px);
  }
  @media (max-width: 700px) { .ticket { grid-template-columns: 1fr; } }
  .ticket .stub {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-dim);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    border-right: 1px dashed var(--border);
    padding-right: 20px;
  }
  @media (max-width: 700px) {
    .ticket .stub { writing-mode: horizontal-tb; border-right: none; border-bottom: 1px dashed var(--border); padding: 0 0 12px; }
  }
  .ticket h3 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 14px; }
  .ticket p { color: var(--text-dim); font-size: 16px; max-width: 68ch; }
  .ticket p + p { margin-top: 12px; }
  .ticket strong { color: var(--text); }

  /* ---------- Modules ---------- */
  .modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  @media (max-width: 880px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .modules-grid { grid-template-columns: 1fr; } }
  .module {
    background: var(--surface);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .module h3 { font-size: 16px; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
  .module p { color: var(--text-dim); font-size: 14.5px; }

  /* ---------- Roles ---------- */
  /* Four roles, so four columns -- at three they wrapped one card onto a row of
     its own, which read as an afterthought rather than a peer of the others. */
  .roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  @media (max-width: 1100px) { .roles-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .roles-grid { grid-template-columns: 1fr; } }
  .role-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 26px;
    background: var(--ground);
  }
  .band .role-card { background: var(--surface-2); }
  .role-card h3 { font-size: 20px; margin-bottom: 4px; }
  .role-card .who { font-size: 13px; color: var(--accent-2); margin-bottom: 16px; display: block; }
  .role-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .role-card li { font-size: 14.5px; color: var(--text-dim); display: flex; gap: 10px; }
  .role-card li::before { content: "—"; color: var(--accent); flex: none; }

  /* ---------- Audience ---------- */
  .audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .audience-list span {
    font-size: 14px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
  }

  /* ---------- CTA ---------- */
  .cta-band {
    text-align: left;
    background: linear-gradient(135deg, var(--accent-deep), var(--surface) 70%);
    border-radius: 14px;
    padding: clamp(36px, 6vw, 64px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
  }
  .cta-band h2 { font-size: clamp(24px, 3.4vw, 32px); max-width: 20ch; }
  .cta-band p { color: var(--text-dim); margin-top: 10px; max-width: 44ch; }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--border); padding: 36px 0; }
  footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  footer .brand img { height: 28px; }
  footer .fine { font-size: 13px; color: var(--text-dim); }