:root {
    --brand:    #1a73e8;
    --brand-dk: #1558b0;
    --accent:   #fbbc04;
    --light-bg: #f4f6fb;
    --card-shad: 0 2px 12px rgba(0,0,0,.10);
  }
  * { box-sizing: border-box; }

  /* ── Body: lock scroll only on large screens ── */
  body { margin:0; font-family:'Segoe UI',Arial,sans-serif; background:var(--light-bg); }
  @media (min-width:993px) {
    html, body { height:100%; overflow:hidden; }
  }

  /* ── Brand bar ── */
  .brand-bar {
    background:var(--brand);
    color:#fff;
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:.5px;
  }
  .brand-bar i { color:var(--accent); margin-right:10px; font-size:1.4rem; }

  /* ── Page frame ── */
  .page-row {
    display:flex;
    align-items:stretch;
  }
  @media (min-width:993px) {
    .page-row { height:calc(100vh - 49px); }
  }

  /* ── Scrollable columns ── */
  .col-left, .col-right {
    overflow-y:auto;
  }
  @media (min-width:993px) {
    .col-left, .col-right { height:100%; }
  }
  .col-left  { padding:24px 20px 48px; background:var(--light-bg); }
  .col-right { padding:20px 16px 40px; background:var(--light-bg);
               border-left:1px solid #dde3ef; }

  /* ── Hero paragraph ── */
  .hero-text {
    background:#fff;
    border-radius:8px;
    padding:24px 28px;
    box-shadow:var(--card-shad);
    margin-bottom:28px;
    line-height:1.8;
  }
  .hero-text h2 { margin:0 0 10px; color:var(--brand); font-size:1.45rem; }
  .hero-text p  { margin:0; color:#444; font-size:.97rem; }

  /* ── Feature rows ── */
  .feature-row { margin-bottom:28px; }
  .feature-text { padding:6px 12px 6px 4px; }
  .feature-text h3 {
    margin:0 0 10px; color:var(--brand-dk);
    font-size:1.1rem; display:flex; align-items:center; gap:8px;
  }
  .feature-text h3 span.tag {
    background:var(--accent); color:#333; font-size:.62rem;
    font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.4px;
  }
  .feature-text p { margin:0; color:#555; line-height:1.75; font-size:.93rem; }

  .video-wrap {
    background:#111; border-radius:8px; overflow:hidden;
    box-shadow:var(--card-shad); aspect-ratio:16/9;
  }
  .video-wrap video { width:100%; height:100%; display:block; object-fit:cover; }

  /* ── Right-column cards ── */
  .side-card {
    background:#fff; border-radius:10px;
    box-shadow:var(--card-shad); padding:20px 18px;
  }
  .side-card h4 {
    margin:0 0 14px; color:var(--brand); font-size:1rem;
    display:flex; align-items:center; gap:8px;
    border-bottom:2px solid var(--light-bg); padding-bottom:10px;
  }
  .side-card label {
    display:block; font-size:.76rem; font-weight:600;
    color:#555; margin:10px 0 4px; letter-spacing:.3px;
  }
  .side-card input,
  .side-card textarea,
  .side-card select {
    width:100%; padding:8px 10px; border:1px solid #d0d7e3;
    border-radius:6px; font-size:.86rem; transition:border .2s; background:#fafbfd;
  }
  .side-card input:focus,
  .side-card textarea:focus { outline:none; border-color:var(--brand); background:#fff; }
  .side-card textarea { resize:vertical; min-height:68px; }

  /* captcha */
  .captcha-box {
    display:flex; align-items:center; gap:10px;
    background:#f1f3f9; border:1px solid #d0d7e3;
    border-radius:6px; padding:10px 12px; margin-top:12px;
  }
  .captcha-box input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--brand); }
  .captcha-box .cap-label { font-size:.8rem; color:#444; flex:1; }
  .captcha-box .cap-logo  { font-size:.6rem; color:#888; text-align:center; line-height:1.3; }
  .captcha-box .cap-logo i { display:block; font-size:.95rem; color:var(--brand); }

  .btn-brand {
    width:100%; margin-top:14px; padding:9px;
    background:var(--brand); color:#fff; border:none;
    border-radius:6px; font-size:.88rem; font-weight:600;
    cursor:pointer; letter-spacing:.3px; transition:background .2s;
  }
  .btn-brand:hover { background:var(--brand-dk); }
  .btn-brand:disabled { opacity:.5; cursor:not-allowed; }

  .btn-ghost {
    width:100%; margin-top:10px; padding:8px;
    background:transparent; color:var(--brand);
    border:1.5px solid var(--brand); border-radius:6px;
    font-size:.85rem; font-weight:600; cursor:pointer;
    letter-spacing:.3px; transition:all .2s;
  }
  .btn-ghost:hover { background:var(--brand); color:#fff; }

  .form-note {
    font-size:.7rem; color:#888; margin-top:8px;
    text-align:center; line-height:1.5;
  }

  /* ── Card slide transition ── */
  .card-panel { overflow:hidden; }
  #login-panel, #demo-panel {
    transition: opacity .3s ease, transform .3s ease;
  }
  #demo-panel { display:none; opacity:0; transform:translateY(10px); }
  #demo-panel.visible {
    display:block; opacity:1; transform:translateY(0);
  }
  #login-panel.hidden {
    display:none;
  }

  .back-link {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.78rem; color:var(--brand); cursor:pointer;
    margin-bottom:12px; background:none; border:none; padding:0;
    font-family:inherit;
  }
  .back-link:hover { text-decoration:underline; }

  /* ── Toast ── */
  #toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:#323232; color:#fff; padding:10px 24px;
    border-radius:24px; font-size:.86rem; display:none;
    z-index:999; box-shadow:0 4px 14px rgba(0,0,0,.25);
    white-space:nowrap;
  }
.bullet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin: 8px 0 16px;
}
.bullet-grid span{
  line-height: 1.2;
}
@media (max-width: 600px) {
  .bullet-grid {
    grid-template-columns: 1fr;
  }
}