/* Premium Depth v2 — shared homepage + study workspace finish */
:root {
  --depth-blue: #3157d5;
  --depth-blue-dark: #173cae;
  --depth-violet: #7651f4;
  --depth-shadow: 0 16px 30px rgba(32, 55, 125, .16), 0 4px 9px rgba(25, 41, 92, .11);
  --depth-shadow-hover: 0 22px 38px rgba(32, 55, 125, .22), 0 7px 13px rgba(25, 41, 92, .13);
}

/* Shared tactile controls. The lower inset and small translation make actions feel pressable. */
.home-page button,
.home-page a[class*="btn"],
.home-page .sg-primary,
.home-page .channel-btn,
.home-page .pg-qs-start,
.wt-shell button,
.wt-shell .btn,
#website-tutor button,
#website-tutor .btn {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

.home-page .sg-primary,
.home-page .btn-solver-submit,
.home-page .pg-qs-start,
.home-page .channel-btn-tg,
.wt-shell .btn-primary,
#website-tutor .btn-primary,
#website-tutor .wt-new-chat-btn,
#website-tutor .wt-quick-new-btn {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-bottom: 4px solid rgba(11, 36, 128, .55) !important;
  background: linear-gradient(135deg, #4c75ff 0%, var(--depth-blue) 52%, #2748bc 100%) !important;
  box-shadow: 0 10px 0 rgba(20, 51, 150, .17), var(--depth-shadow) !important;
  text-shadow: 0 1px 1px rgba(3, 17, 79, .25);
}

.home-page .channel-btn-tg,
.home-page .pg-tg-btn {
  background: linear-gradient(135deg, #31b2ff 0%, #168ee1 58%, #096ab4 100%) !important;
  border-bottom-color: rgba(0, 71, 137, .56) !important;
  box-shadow: 0 10px 0 rgba(0, 87, 153, .16), 0 16px 28px rgba(23, 145, 225, .2) !important;
}

.home-page .btn-wa {
  background: linear-gradient(135deg, #44d985 0%, #22b967 58%, #11914d 100%) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-bottom: 4px solid rgba(6, 105, 54, .5) !important;
  box-shadow: 0 10px 0 rgba(10, 126, 65, .14), 0 16px 28px rgba(27, 169, 90, .2) !important;
}

.home-page .sg-primary:hover,
.home-page .btn-solver-submit:hover,
.home-page .pg-qs-start:hover,
.home-page .channel-btn:hover,
.home-page .pg-tg-btn:hover,
.wt-shell .btn-primary:hover,
#website-tutor .btn-primary:hover,
#website-tutor .wt-new-chat-btn:hover,
#website-tutor .wt-quick-new-btn:hover {
  transform: translateY(-3px);
  filter: saturate(1.08) brightness(1.04);
  box-shadow: 0 13px 0 rgba(20, 51, 150, .13), var(--depth-shadow-hover) !important;
}

.home-page .sg-primary:active,
.home-page .btn-solver-submit:active,
.home-page .pg-qs-start:active,
.home-page .channel-btn:active,
.home-page .pg-tg-btn:active,
.wt-shell .btn-primary:active,
#website-tutor .btn-primary:active,
#website-tutor .wt-new-chat-btn:active,
#website-tutor .wt-quick-new-btn:active {
  transform: translateY(5px);
  border-bottom-width: 1px !important;
  box-shadow: 0 3px 0 rgba(20, 51, 150, .12), 0 7px 12px rgba(25, 41, 92, .13) !important;
}

/* Make the hero read as one polished, high-value product surface. */
.home-page .sg-hero {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 77% 23%, rgba(118, 81, 244, .14), transparent 27rem),
    radial-gradient(circle at 7% 18%, rgba(35, 180, 250, .13), transparent 26rem),
    linear-gradient(142deg, #f8fbff 0%, #f3f5ff 48%, #f9f6ff 100%);
}

.home-page .sg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background-image: radial-gradient(rgba(49, 87, 213, .16) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.home-page .sg-hero-grid { position: relative; }

.home-page .hero-kicker-pill,
.home-page .hero-chip-btn,
.home-page .pg-qs-chip {
  box-shadow: 0 4px 0 rgba(70, 92, 162, .10), 0 8px 18px rgba(59, 76, 127, .08);
}

.home-page .hero-chip-btn:hover,
.home-page .pg-qs-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(70, 92, 162, .09), 0 13px 22px rgba(59, 76, 127, .12);
}

.home-page .hero-ai-demo-card,
.home-page .pg-qs-card,
.home-page .pg-tg-card {
  border-color: rgba(113, 131, 196, .24) !important;
  box-shadow: 0 24px 60px rgba(39, 61, 139, .16), 0 3px 10px rgba(57, 78, 145, .08) !important;
}

/* Workspace actions retain the same premium language without hurting study density. */
#website-tutor .wt-action-card,
#website-tutor .wt-hub-item,
#website-tutor .wt-quick-chip,
#website-tutor .wt-mode-pill {
  border-bottom: 3px solid rgba(61, 82, 148, .17);
  box-shadow: 0 5px 0 rgba(50, 73, 143, .07), 0 10px 21px rgba(25, 40, 96, .07);
}

#website-tutor .wt-action-card:hover,
#website-tutor .wt-hub-item:hover,
#website-tutor .wt-quick-chip:hover,
#website-tutor .wt-mode-pill:hover {
  transform: translateY(-2px);
  border-bottom-color: rgba(49, 87, 213, .34);
  box-shadow: 0 7px 0 rgba(50, 73, 143, .08), 0 15px 26px rgba(25, 40, 96, .12);
}

#website-tutor .wt-action-card:active,
#website-tutor .wt-hub-item:active,
#website-tutor .wt-quick-chip:active,
#website-tutor .wt-mode-pill:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 3px 0 rgba(50, 73, 143, .07), 0 6px 12px rgba(25, 40, 96, .1);
}

#website-tutor .wt-mode-pill.active {
  background: linear-gradient(135deg, #eef3ff, #e5e9ff) !important;
  border-color: rgba(72, 98, 210, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 0 rgba(49, 87, 213, .16), 0 12px 23px rgba(39, 61, 139, .12) !important;
}

/* Keyboard users get a visible, elegant focus treatment everywhere. */
:where(.home-page, #website-tutor) :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #2f8cff !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(47, 140, 255, .18) !important;
}

@media (max-width: 700px) {
  .home-page .sg-primary,
  .home-page .btn-solver-submit,
  .home-page .pg-qs-start,
  .home-page .channel-btn,
  .home-page .pg-tg-btn,
  .wt-shell .btn-primary,
  #website-tutor .btn-primary {
    border-bottom-width: 3px !important;
    box-shadow: 0 7px 0 rgba(20, 51, 150, .14), 0 12px 24px rgba(32, 55, 125, .16) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page *, #website-tutor * { transition-duration: .01ms !important; }
}