/* AIWX public pages
   This file is intentionally scoped to the landing and authentication views.
   Visitor chat styles remain in app.css/visitor-chat.css and are not touched. */
:root {
  --aix-ink: #12233f;
  --aix-muted: #6b7c96;
  --aix-blue: #1677ff;
  --aix-cyan: #23c6e8;
  --aix-violet: #735df6;
  --aix-line: #dce8f5;
  --aix-surface: #ffffff;
}

/* Landing page */
.landing-page {
  min-height: 100vh;
  color: var(--aix-ink);
  background: #f4f8fd;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  isolation: isolate;
}
.landing-page::before {
  background-image: radial-gradient(#1677ff1b 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .45;
}
.landing-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 760px;
  height: 760px;
  top: -370px;
  right: -230px;
  border-radius: 50%;
  background: radial-gradient(circle, #bfe9ff 0, #dcecff80 38%, transparent 70%);
  pointer-events: none;
}
.landing-glow-a { background: #b6e9ff70; width: 500px; height: 500px; right: -180px; top: 370px; filter: blur(8px); }
.landing-glow-b { background: #d9d1ff65; width: 430px; height: 430px; left: -230px; top: 980px; filter: blur(8px); }
.landing-nav,
.landing-hero,
.landing-strip,
.landing-features,
.landing-workflow,
.landing-footer { max-width: 1280px; }
.landing-nav {
  height: 88px;
  padding: 0 34px;
  border-bottom: 1px solid #dbe8f4;
}
.landing-brand {
  color: var(--aix-ink);
  font-size: 18px;
  letter-spacing: -.3px;
}
.landing-brand .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, var(--aix-blue), #5b63ef);
  box-shadow: 0 10px 24px #1677ff35;
}
.landing-brand em {
  color: var(--aix-blue);
  background: #e3f1ff;
  border: 1px solid #cfe6fa;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 8px;
}
.landing-links { gap: 32px; margin-left: 50px; }
.landing-links a,
.landing-login { color: #607692; font-size: 12px; font-weight: 500; }
.landing-links a:hover,
.landing-login:hover { color: var(--aix-blue); }
.landing-actions { gap: 20px; }
.landing-cta {
  min-height: 45px;
  padding: 13px 19px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--aix-blue), #4b6cf5);
  box-shadow: 0 12px 24px #1677ff2e;
  font-size: 12px;
}
.landing-cta:hover { background: linear-gradient(135deg, #0b68ed, #3c59e9); }
.landing-cta span { color: #dff6ff; }
.landing-cta.small {
  min-height: 38px;
  padding: 10px 15px;
  color: var(--aix-blue);
  background: #fff;
  border: 1px solid #cfe2f3;
  box-shadow: 0 7px 16px #337ecf12;
}
.landing-hero {
  min-height: 650px;
  grid-template-columns: 44% 56%;
  padding: 65px 34px 92px;
}
.hero-copy { padding-left: 24px; }
.hero-kicker { color: var(--aix-blue); letter-spacing: 2px; }
.hero-kicker i { background: var(--aix-cyan); box-shadow: 0 0 0 4px #23c6e825; }
.hero-copy h1 {
  max-width: 560px;
  margin: 24px 0 23px;
  color: var(--aix-ink);
  font-size: clamp(45px, 5.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -3.7px;
}
.hero-copy h1 span,
.section-intro h2 span { color: var(--aix-blue); }
.hero-copy > p { max-width: 430px; color: var(--aix-muted); line-height: 1.9; font-size: 15px; }
.hero-actions { gap: 17px; }
.hero-secondary { color: #55708e; font-size: 11px; }
.play-icon { color: var(--aix-blue); border-color: #9ecaf0; }
.hero-trust { color: #7186a0; margin-top: 43px; }
.trust-avatars b { border-color: #f4f8fd; }
.trust-avatars b:first-child { background: #1677ff; }
.trust-avatars b:nth-child(2) { background: #20b9d6; }
.trust-avatars b:nth-child(3) { background: #735df6; }
.trust-avatars b:nth-child(4) { background: #27446c; }
.hero-stage { height: 540px; }
.stage-orbit { border-color: #6eb9eb55; }
.orbit-one { width: 540px; height: 375px; }
.orbit-two { width: 405px; height: 290px; }
.dashboard-window {
  width: min(600px, 94%);
  border: 1px solid #cde4f6;
  border-radius: 20px;
  background: #ffffffdd;
  box-shadow: 0 30px 70px #3175a51e, 0 2px 8px #fff;
  transform: rotate(2.5deg);
}
.window-top { border-color: #e0edf7; color: #7590ac; height: 42px; padding: 0 17px; }
.window-body { min-height: 350px; }
.mini-sidebar { width: 56px; border-color: #e2edf5; background: #f5faff; gap: 25px; }
.mini-logo { width: 25px; height: 25px; border-radius: 8px; background: var(--aix-blue); }
.mini-sidebar i { background: #cfe3f4; }
.mini-sidebar i:nth-of-type(2) { background: #8bd9e9; }
.mini-content { padding: 22px 24px; }
.mini-heading small, .mini-stats small, .mini-chat small, .mini-chat time { color: #8ba0b6; }
.mini-heading b, .mini-panel-title, .mini-chat b { color: #214363; }
.mini-heading em, .mini-panel-title small { color: var(--aix-blue); }
.mini-avatar { background: #327de7; }
.mini-stats > div, .mini-panel { border-color: #dcebf6; background: #fff; border-radius: 10px; }
.mini-stats strong { color: #122f50; }
.mini-stats em { color: #16ad75; }
.mini-chat { border-color: #e4eff7; }
.float-card { border-color: #d2e7f6; background: #fffffff2; box-shadow: 0 16px 30px #3175a520; border-radius: 13px; }
.float-card b { color: #214363; }
.float-card small { color: #8198b0; }
.float-icon { background: #e9f5ff; color: var(--aix-blue); }
.float-pulse, .online-dot { background: #18bb7a; }
.rating-star, .hero-spark { color: var(--aix-blue); }
.landing-strip { border-color: #d4e5f2; color: #7891aa; padding: 24px 34px; }
.landing-strip b { color: var(--aix-blue); }
.landing-features { padding: 112px 34px 120px; }
.section-intro h2 { color: var(--aix-ink); font-size: 45px; }
.section-intro > p { color: var(--aix-muted); font-size: 13px; }
.glass-feature {
  min-height: 250px;
  border-color: #d2e6f5;
  background: #ffffffd9;
  box-shadow: 0 16px 36px #397bab12;
  border-radius: 16px;
}
.glass-feature.featured { background: linear-gradient(145deg, #1677ff, #5363ee); box-shadow: 0 20px 38px #1677ff35; }
.feature-number { color: #86a6bf; }
.feature-symbol { color: var(--aix-blue); }
.featured .feature-symbol { color: #dff6ff; }
.glass-feature h3 { color: #214363; font-size: 14px; }
.featured h3 { color: #fff; }
.glass-feature p { color: #7088a0; font-size: 11px; }
.featured p { color: #dceeff; }
.glass-feature a { color: var(--aix-blue); }
.featured a { color: #dff6ff; }
.landing-workflow { padding: 0 34px 120px; }
.workflow-card { border-color: #d2e6f5; background: #ffffffcf; box-shadow: 0 20px 40px #397bab10, inset 0 1px #fff; padding: 58px 62px; border-radius: 22px; }
.workflow-card h2 { color: var(--aix-ink); font-size: 42px; }
.workflow-card h2 span { color: var(--aix-blue); }
.workflow-steps > div { border-color: #d7e8f4; }
.workflow-steps > div > b { border-color: #9ecaf0; color: var(--aix-blue); }
.workflow-steps strong { color: #214363; }
.workflow-steps small { color: #7891aa; }
.landing-footer { border-color: #d4e5f2; color: #7891aa; padding: 27px 34px 36px; }
.landing-footer a { color: var(--aix-blue); }

/* Authentication pages */
.auth-body {
  min-height: 100vh;
  color: var(--aix-ink);
  background: #eef6fd;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}
.auth-shell {
  grid-template-columns: minmax(440px, 48%) 1fr;
  min-height: 100vh;
  background: #eef6fd;
}
.auth-visual {
  min-height: 100vh;
  padding: 42px 9%;
  background: linear-gradient(150deg, #102e58 0%, #155a99 48%, #168ec6 100%);
}
.auth-visual::before { inset: 16px; border: 1px solid #b9e8ff35; border-radius: 26px; z-index: -1; }
.auth-visual::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -180px;
  top: 23%;
  border: 1px solid #bdeaff42;
  border-radius: 50%;
  box-shadow: 0 0 0 48px #bdeaff0b, 0 0 0 96px #bdeaff08;
  pointer-events: none;
}
.auth-grain { opacity: .1; background-image: radial-gradient(#fff 0.5px, transparent .8px); }
.auth-visual .brand-mark { background: #ffffff24; color: #fff; border: 1px solid #ffffff35; }
.auth-visual .eyebrow { color: #bceeff; }
.visual-copy { max-width: 530px; margin-top: -10px; }
.visual-copy h1 { color: #fff; font-size: clamp(39px, 4.5vw, 65px); line-height: 1.14; letter-spacing: -2px; }
.visual-copy p { max-width: 390px; color: #d5efff; font-size: 15px; line-height: 1.85; }
.visual-bottom { color: #bde7fb; }
.auth-mascot { filter: drop-shadow(0 28px 40px #05284c44); }
.mascot-caption { color: #d9f4ff; background: #ffffff18; border-color: #c5efff45; }
.auth-panel {
  justify-content: center;
  padding: 60px 9%;
  background: radial-gradient(circle at 95% 5%, #d8f3ff 0, transparent 30%), #f4f9fd;
}
.auth-form-wrap {
  max-width: 430px;
  padding: 42px 40px;
  border: 1px solid #d7e8f4;
  border-radius: 24px;
  background: #ffffffeb;
  box-shadow: 0 24px 70px #397bab18;
}
.auth-form-wrap > .eyebrow { color: var(--aix-blue); }
.auth-form-wrap h2 { margin-top: 13px; color: var(--aix-ink); font-size: 32px; letter-spacing: -.9px; }
.auth-form-wrap > .muted { color: #7891aa; line-height: 1.7; }
.form-stack { gap: 18px; }
.form-stack label { color: #355575; font-size: 12px; }
.form-stack label input,
.form-stack label select,
.form-stack label textarea { border-color: #d5e6f2; border-radius: 11px; background: #fbfdff; color: #183957; padding: 14px 15px; }
.form-stack label input:focus,
.form-stack label select:focus,
.form-stack label textarea:focus { border-color: #71b8ef; box-shadow: 0 0 0 4px #1677ff16; }
.btn-primary { background: linear-gradient(135deg, var(--aix-blue), #5363ee); box-shadow: 0 10px 22px #1677ff2e; border-radius: 11px; }
.btn-primary:hover { background: linear-gradient(135deg, #0c68ed, #4453de); }
.auth-foot { color: #7891aa; }
.auth-foot a, .admin-link { color: var(--aix-blue); }
.auth-separator { background: #e0edf6; }
.auth-separator span { color: #91a8bc; background: #fff; }
.admin-link { border-color: #d7e8f4; border-radius: 11px; background: #fff; }
.demo-note, .auth-copyright { color: #91a8bc; }
.auth-body .alert-error { border-color: #ffd9d4; background: #fff2f0; }
.auth-body .alert-success { border-color: #cbeedc; background: #edfbf4; }

@media (max-width: 900px) {
  .landing-nav { padding: 0 22px; }
  .landing-hero { grid-template-columns: 1fr; padding-top: 56px; }
  .hero-copy { padding-left: 0; text-align: center; }
  .hero-copy > p { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-stage { margin-top: 18px; }
  .landing-features { grid-template-columns: 1fr; gap: 40px; }
  .section-intro { text-align: center; }
  .section-intro > p { margin-left: auto; margin-right: auto; }
  .workflow-card { grid-template-columns: 1fr; gap: 42px; }
  .workflow-card h2 { text-align: center; }
  .auth-shell { grid-template-columns: 42% 1fr; }
  .auth-form-wrap { padding: 34px 28px; }
}
@media (max-width: 720px) {
  .landing-nav { height: 74px; padding: 0 17px; }
  .landing-links { display: none; }
  .landing-actions { gap: 10px; }
  .landing-login { font-size: 11px; }
  .landing-cta.small { padding: 9px 11px; }
  .landing-hero { padding: 44px 17px 66px; }
  .hero-copy h1 { font-size: 50px; letter-spacing: -2.5px; }
  .hero-actions { flex-direction: column; gap: 16px; }
  .hero-stage { height: 370px; }
  .dashboard-window { width: 112%; transform: rotate(2deg) scale(.86); }
  .float-message { left: -5%; transform: scale(.84); }
  .float-rating { right: -5%; transform: scale(.84); }
  .landing-strip { padding: 19px 17px; gap: 10px; flex-wrap: wrap; }
  .landing-strip span { width: 100%; text-align: center; }
  .landing-strip b { font-size: 14px; }
  .landing-features { padding: 76px 17px; }
  .section-intro h2 { font-size: 35px; }
  .feature-grid { grid-template-columns: 1fr; }
  .glass-feature.featured { transform: none; }
  .landing-workflow { padding: 0 17px 74px; }
  .workflow-card { padding: 36px 22px; }
  .workflow-card h2 { font-size: 33px; }
  .landing-footer { padding: 23px 17px; flex-wrap: wrap; gap: 14px; }
  .landing-footer span:last-child { width: 100%; justify-content: space-between; }
  .auth-shell { display: flex; flex-direction: column; }
  .auth-visual { min-height: 285px; padding: 24px 25px 19px; }
  .auth-visual::before { inset: 9px; border-radius: 19px; }
  .auth-visual::after { width: 250px; height: 250px; right: -110px; top: 13%; }
  .visual-copy { max-width: 64%; margin: 27px 0 8px; }
  .visual-copy h1 { font-size: 29px; letter-spacing: -1px; margin: 11px 0; }
  .visual-copy p { font-size: 11px; line-height: 1.5; }
  .auth-mascot { width: 190px; height: 190px; right: -8px; bottom: 23px; }
  .auth-panel { min-height: calc(100vh - 285px); padding: 28px 20px 62px; }
  .auth-form-wrap { margin: 18px auto; padding: 29px 22px; border-radius: 19px; }
  .auth-form-wrap h2 { font-size: 28px; }
  .auth-copyright { bottom: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *, .auth-body * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}