/* AutoSync sign-in (shop + platform). Split screen: product stage (left) + sign-in panel (right). */
@font-face { font-family: "Geist"; src: url("../fonts/site/geistlatinwghtnormal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/site/geistmonolatinwghtnormal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --a-navy: #07111F; --a-navy-2: #0C1B31; --a-blue: #1976D2; --a-blue-2: #2B84E0; --a-sky: #7DB8F2;
  --a-ink: #0B1220; --a-text: #2B3547; --a-muted: #667085; --a-line: #E4E7EC; --a-field: #F7F8FA; --a-ok: #12B76A;
}
html, body { height: 100%; }
body.auth-body { margin: 0; font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--a-text); background: #fff; -webkit-font-smoothing: antialiased; }

.ax { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); }

/* ---------- stage ---------- */
.ax-stage { position: relative; overflow: hidden; background: var(--a-navy); color: #C4D1E3; display: flex; flex-direction: column; padding: 40px 48px; isolation: isolate; }
.ax-stage::before { /* slow moving light */
  content: ""; position: absolute; inset: -30%; z-index: -2;
  background: conic-gradient(from 210deg at 60% 45%, #0A1E3A 0deg, #0F3566 70deg, #07111F 140deg, #0B274C 250deg, #07111F 360deg);
  animation: ax-spin 40s linear infinite; opacity: .9;
}
.ax-stage::after { /* fine road-line pattern */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
.platform .ax-stage::before { background: conic-gradient(from 210deg at 60% 45%, #111827 0deg, #1F2A44 90deg, #070B14 180deg, #151C2E 270deg, #070B14 360deg); }
@keyframes ax-spin { to { transform: rotate(360deg); } }

.ax-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.ax-top img { height: 44px; width: auto; display: block; }
.ax-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #E6EEF8; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.ax-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 0 3px rgba(18,183,106,.2); }

.ax-copy { margin-top: auto; position: relative; max-width: 560px; }
.ax-copy .kicker { font: 600 12px/1 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--a-sky); }
.ax-copy h2 { color: #fff; font-weight: 650; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -.035em; margin: 14px 0 14px; }
.ax-copy h2 em { font-style: normal; color: var(--a-sky); }
.ax-copy p { font-size: 15px; line-height: 1.6; color: #9FB0C8; margin: 0; max-width: 470px; }

/* product preview: real screenshot on a tilted plane with live-looking event toasts */
.ax-preview { position: relative; margin: 30px 0 64px; height: 330px; perspective: 1600px; }
.ax-shot { position: absolute; left: 0; top: 0; width: 118%; max-width: 900px; height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.65), 0 0 0 6px rgba(255,255,255,.03);
  transform: rotateX(14deg) rotateY(-16deg) rotateZ(3deg) translate3d(4%, 0, 0); transform-origin: left top; animation: ax-float 9s ease-in-out infinite; }
.ax-shot img { display: block; width: 100%; height: auto; }
.ax-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,17,31,.85)); }
@keyframes ax-float { 50% { transform: rotateX(12deg) rotateY(-13deg) rotateZ(2deg) translate3d(4%, -8px, 0); } }

.ax-toasts { position: absolute; right: 0; bottom: -6px; display: grid; gap: 10px; width: min(300px, 70%); }
.ax-toast { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.96); color: var(--a-ink); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); opacity: 0; transform: translateY(10px); animation: ax-in .6s cubic-bezier(.2,.7,.2,1) forwards; }
.ax-toast:nth-child(2) { animation-delay: .9s; } .ax-toast:nth-child(3) { animation-delay: 1.8s; }
.ax-toast .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; }
.ax-toast .ic.b { background: #E8F1FC; color: var(--a-blue); } .ax-toast .ic.g { background: #E7F8EF; color: #067647; } .ax-toast .ic.a { background: #FEF3E2; color: #B54708; }
.ax-toast strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.ax-toast small { display: block; font-size: 11.5px; color: var(--a-muted); }
.ax-toast .amt { font: 600 12.5px "Geist Mono", monospace; color: var(--a-ink); }
@keyframes ax-in { to { opacity: 1; transform: none; } }

.ax-foot { display: flex; gap: 22px; flex-wrap: wrap; position: relative; font-size: 12.5px; color: #7F92AE; margin-top: 26px; }
.ax-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ax-foot i { color: var(--a-sky); }

/* platform stage: status board instead of screenshot */
.ax-ops { position: relative; margin: 36px 0 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.ax-ops div { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 12px; padding: 14px; }
.ax-ops b { display: block; font: 600 11px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #8FA3BF; }
.ax-ops span { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-top: 8px; }

/* ---------- sign-in panel ---------- */
.ax-panel { display: flex; flex-direction: column; padding: 32px 40px; background: #fff; position: relative; }
.ax-panel-top { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 13.5px; color: var(--a-muted); min-height: 40px; }
.ax-panel-top a { color: var(--a-ink); font-weight: 600; text-decoration: none; border: 1px solid var(--a-line); padding: 8px 14px; border-radius: 10px; transition: border-color .15s, background .15s; }
.ax-panel-top a:hover { border-color: #C9D1DD; background: var(--a-field); }
.ax-card { width: 100%; max-width: 400px; margin: auto; padding: 24px 0; }
.ax-mobile-logo { display: none; height: 38px; width: auto; margin-bottom: 28px; }
.ax-card h1 { font-size: 28px; font-weight: 650; letter-spacing: -.03em; color: var(--a-ink); margin: 0 0 8px; line-height: 1.15; }
.ax-card h1 + p, .ax-card .text-muted { color: var(--a-muted) !important; font-size: 14.5px; }
.ax-card .form-label { font-size: 13px; font-weight: 600; color: var(--a-ink); margin-bottom: 6px; }
.ax-card .form-control, .ax-card .form-select { font-family: inherit; font-size: 15px; border-radius: 11px; border: 1px solid var(--a-line); background: var(--a-field); padding: .72rem .9rem; color: var(--a-ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.ax-card .form-control-lg { min-height: 50px; }
.ax-card .form-control:focus, .ax-card .form-select:focus { background: #fff; border-color: var(--a-blue); box-shadow: 0 0 0 4px rgba(25,118,210,.14); }
.ax-card .form-control.is-invalid { border-color: #F04438; background: #FFFBFA; }
.ax-card a { color: var(--a-blue); text-decoration: none; font-weight: 500; }
.ax-card a:hover { text-decoration: underline; }
.ax-card .btn-primary { --bs-btn-bg: var(--a-ink); --bs-btn-border-color: var(--a-ink); --bs-btn-hover-bg: #1D2939; --bs-btn-hover-border-color: #1D2939; --bs-btn-active-bg: #000; font-weight: 600; border-radius: 11px; min-height: 50px; font-size: 15px; letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ax-card .btn-primary .bi { transition: transform .18s; }
.ax-card .btn-primary:hover .bi { transform: translateX(3px); }
.ax-card .btn-light { border-radius: 11px; border: 1px solid var(--a-line); background: #fff; font-weight: 600; }
.ax-card .form-check-input:checked { background-color: var(--a-blue); border-color: var(--a-blue); }
.ax-card .alert { border-radius: 11px; font-size: 13.5px; }

.ax-field { position: relative; }
.ax-field > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #98A2B3; font-size: 16px; pointer-events: none; transition: color .15s; }
.ax-field .form-control { padding-left: 42px; }
.ax-field:focus-within > .bi { color: var(--a-blue); }
.ax-field .ax-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #98A2B3; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; }
.ax-field .ax-eye:hover { color: var(--a-ink); background: #EEF1F5; }
.ax-field .ax-eye + .form-control, .ax-field .form-control:has(+ .ax-eye) { padding-right: 48px; }
.ax-caps { display: none; font-size: 12px; color: #B54708; margin-top: 6px; }
.ax-caps.on { display: flex; align-items: center; gap: 5px; }
.ax-sep { display: flex; align-items: center; gap: 12px; color: #98A2B3; font-size: 12px; margin: 22px 0; }
.ax-sep::before, .ax-sep::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }
.ax-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #98A2B3; margin-top: 22px; }
.ax-panel-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #98A2B3; flex-wrap: wrap; }
.ax-panel-foot a { color: #98A2B3; text-decoration: none; } .ax-panel-foot a:hover { color: var(--a-ink); }

@media (max-width: 1100px) { .ax { grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); } .ax-toasts { display: none; } }
@media (max-width: 900px) {
  .ax { grid-template-columns: 1fr; }
  .ax-stage { display: none; }
  .ax-panel { padding: 22px 20px; background: radial-gradient(700px 260px at 50% -80px, #EAF2FC, #fff 70%); }
  .ax-mobile-logo { display: block; }
  .ax-card { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ax-stage::before, .ax-shot, .ax-toast { animation: none !important; opacity: 1; transform: none; } .ax-shot { transform: rotateX(12deg) rotateY(-14deg) rotateZ(2deg) translate3d(4%,0,0); } }