/* TutorDesk web theme, matched to the Android screenshots. */
:root {
  color-scheme: dark;
  --bg: #090909;
  --bg-2: #141414;
  --card: #242424;
  --card-2: #303030;
  --line: #383838;
  --text: #ffffff;
  --muted: #a6a6a6;
  --soft: #d5d5d5;
  --cyan: #16d4e8;
  --brand: #16d4e8;
  --radius: 22px;
}
body, h1, h2, h3, .brand, .stat-num, .plan-name {
  font-family: 'Inter', system-ui, sans-serif;
}
.accent {
  background: none;
  color: var(--cyan);
  -webkit-text-fill-color: currentColor;
}
.btn { border-radius: 16px; }
.btn-primary, .btn-primary:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: none;
}
.btn-primary:hover { filter: brightness(1.08); }
.hero::before, .hero::after { display: none; }
.hero-preview, .hero-logo, .plan.featured, figure img {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.hero-preview { background: var(--card); border-radius: 28px; }
.feature, .benefit, .step, .plan, .stats, .doc-card {
  background: var(--card);
  border-radius: var(--radius);
}
.feature:hover { background: var(--card-2); border-color: var(--cyan); }
.step .n { color: var(--cyan); opacity: .65; }
.plan-tag.prem { background: var(--cyan); color: var(--bg); }
.cta, .cta-box { background: var(--card); }
header, header.top, .top-nav { background: rgba(9, 9, 9, .94); }
.brand img { box-shadow: none; }
.shot { background: var(--card); border-radius: 22px; }
.shot img, figure img { height: auto; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }