/**
 * AutoFlow AI — Login page
 * Composition matched to the AutoFlow AI login reference (16:9 desktop first).
 *
 * Sizing: on desktop every dimension is expressed in "--u", where 1u = 1/100 of
 * the 16:9 stage (min(1vw, 1.778vh)). The reference is 1672px wide, so
 * reference px / 16.72 = value in u. Readability floors are applied with max().
 */

/* ---------- Fonts (bundled) ---------- */
@font-face {
  font-family: 'AF Inter';
  src: url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AF Inter';
  src: url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --u: min(1vw, 1.778vh);

  --bg: #000a22;
  --bg-deep: #00061a;
  --text: #ffffff;
  --text-soft: #c5cde3;
  --text-muted: #9aa6c4;
  --text-dim: #7a86a8;

  --cyan: #12b8ff;
  --blue: #2f6bff;
  --violet: #7b45ff;
  --purple: #a24bff;

  --grad-text: linear-gradient(90deg, #2e8bff 0%, #4b6dff 45%, #8a4dff 100%);
  --grad-btn: linear-gradient(90deg, #10b4ff 0%, #2f74ff 45%, #8b3dff 100%);

  --panel-bg: rgba(6, 12, 38, 0.62);
  --panel-border: rgba(84, 118, 255, 0.42);
  --input-bg: rgba(4, 9, 30, 0.55);
  --input-border: rgba(132, 150, 210, 0.32);
  --input-border-focus: rgba(70, 140, 255, 0.95);
  --danger: #ff6b81;

  --font: 'AF Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.af-login {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

.af-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.af-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
}

/* ---------- Background scene ---------- */
.af-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 52% -6%, rgba(36, 74, 230, 0.55) 0%, rgba(20, 40, 150, 0.18) 45%, transparent 75%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 60%, #000c2a 100%);
}

/* Wrapper moved by GSAP (float / parallax); keeps the art's CSS transform intact */
.af-scene-float {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* The supplied artwork: dashboard + stage + light trail.
   Scaled to 92% and shifted right so the dashboard sits centre-left between
   the feature list and the login panel, as in the reference. Its left/top
   edges, the original bottom-left orb and the two small icons that would sit
   behind the feature text (globe, chart) are masked so it blends into the
   base colour (masks use the image's own, untransformed coordinates). */
.af-scene-art {
  position: absolute;
  inset: 0;
  background: url('../images/autoflow-backdrop-hd.webp') center / cover no-repeat;
  transform-origin: 0 0;
  transform: translate3d(11%, 6.5%, 0) scale(0.92);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%),
    linear-gradient(180deg, transparent 0%, #000 6%),
    radial-gradient(circle at 3.6% 99%, transparent 0, transparent 9vw, #000 13vw),
    radial-gradient(circle at 12% 59.5%, transparent 0, transparent 2.4vw, #000 3.4vw),
    radial-gradient(circle at 14.4% 68.7%, transparent 0, transparent 2.4vw, #000 3.4vw);
  -webkit-mask-composite: source-in, source-in, source-in, source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%),
    linear-gradient(180deg, transparent 0%, #000 6%),
    radial-gradient(circle at 3.6% 99%, transparent 0, transparent 9vw, #000 13vw),
    radial-gradient(circle at 12% 59.5%, transparent 0, transparent 2.4vw, #000 3.4vw),
    radial-gradient(circle at 14.4% 68.7%, transparent 0, transparent 2.4vw, #000 3.4vw);
  mask-composite: intersect;
}

/* Soft extra glow over the light trail (animated gently by GSAP) */
.af-scene-trail {
  position: absolute;
  left: 34%;
  top: 74%;
  width: 56%;
  height: 22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(70, 110, 255, 0.32) 0%, rgba(130, 70, 255, 0.16) 45%, transparent 72%);
  transform: rotate(-12deg);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* Readability shade behind the left copy */
.af-scene-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 5, 22, 0.72) 0%, rgba(0, 6, 24, 0.45) 18%, rgba(0, 6, 24, 0.08) 30%, transparent 40%),
    radial-gradient(1px 1px at 1px 1px, rgba(120, 150, 255, 0.22) 99%, transparent 100%) right top / 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 40%, transparent 40%, transparent 72%, rgba(0,0,0,.6) 86%);
          mask-image: linear-gradient(90deg, #000 0, #000 40%, transparent 40%, transparent 72%, rgba(0,0,0,.6) 86%);
}

/* Bottom-left corner sphere (the artwork's own sphere moved with the shift) */
.af-orb {
  position: absolute;
  border-radius: 50%;
}
.af-orb-bl {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  left: calc(var(--u) * -6.5);
  bottom: calc(var(--u) * -7.5);
  background: radial-gradient(circle at 62% 30%, #8f8cff 0%, #5a54f2 22%, #3a2fd0 48%, #22168f 72%, #12095a 100%);
  box-shadow: 0 0 calc(var(--u) * 5) rgba(72, 60, 255, 0.45);
}

/* ---------- Layout ---------- */
.af-layout {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max(400px, calc(var(--u) * 32));
  column-gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 3.6) 0 calc(var(--u) * 4.5);
}

/* ---------- Left: brand column ---------- */
.af-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(var(--u) * 2.6);
  padding-bottom: calc(var(--u) * 2.8);
  min-width: 0;
}

.af-logo-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  text-decoration: none;
}
.af-logo-icon {
  width: max(64px, calc(var(--u) * 5.8));
  height: auto;
  display: block;
  filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(60, 120, 255, 0.35));
}
.af-logo-text { display: flex; flex-direction: column; line-height: 1.08; }
.af-logo-name {
  font-size: max(26px, calc(var(--u) * 2.4));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.af-logo-tag {
  margin-top: calc(var(--u) * 0.2);
  font-size: max(12.5px, calc(var(--u) * 1.02));
  color: var(--text-soft);
  letter-spacing: 0.005em;
}

.af-headline {
  margin: calc(var(--u) * 2.0) 0 0;
  font-size: max(34px, calc(var(--u) * 3.05));
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.af-line { display: block; overflow: hidden; padding: 0.04em 0 0.08em; margin: -0.04em 0 -0.08em; }
.af-line-in { display: inline-block; }
.af-headline-top {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 55%, #d5d9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.af-lead {
  margin: calc(var(--u) * 0.85) 0 0;
  max-width: max(380px, calc(var(--u) * 30.5));
  font-size: max(14px, calc(var(--u) * 1.03));
  line-height: 1.45;
  color: var(--text-soft);
}

/* Feature list — open layout (no boxes), as in the reference */
.af-features {
  list-style: none;
  margin: calc(var(--u) * 1.9) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
  max-width: max(290px, calc(var(--u) * 19));
}
.af-feature {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.35);
}
.af-ficon {
  flex: 0 0 auto;
  width: max(42px, calc(var(--u) * 3.15));
  height: max(42px, calc(var(--u) * 3.15));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: max(17px, calc(var(--u) * 1.35));
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.af-ficon i { line-height: 1; display: block; }
.af-ficon-ai     { background: radial-gradient(circle at 35% 30%, #8c7bff, #4b2fe0 60%, #2a168f); box-shadow: 0 0 calc(var(--u)*1.4) rgba(110, 80, 255, .55); }
.af-ficon-seo    { background: radial-gradient(circle at 35% 30%, #2ce0c0, #0f8f8a 60%, #0a4d5c); box-shadow: 0 0 calc(var(--u)*1.4) rgba(30, 210, 180, .45); }
.af-ficon-pub    { background: radial-gradient(circle at 35% 30%, #4aa8ff, #1d5be8 60%, #0f2f8f); box-shadow: 0 0 calc(var(--u)*1.4) rgba(50, 130, 255, .5); }
.af-ficon-social { background: radial-gradient(circle at 35% 30%, #d07bff, #8a2fe0 60%, #4d168f); box-shadow: 0 0 calc(var(--u)*1.4) rgba(180, 80, 255, .5); }
.af-ficon-blogs  { background: radial-gradient(circle at 35% 30%, #ffc04a, #e0821a 60%, #7a3a0a); box-shadow: 0 0 calc(var(--u)*1.4) rgba(255, 160, 40, .45); }

.af-ftext { display: flex; flex-direction: column; min-width: 0; }
.af-ftext strong {
  font-size: max(13.5px, calc(var(--u) * 0.95));
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.af-ftext span {
  margin-top: 2px;
  font-size: max(12px, calc(var(--u) * 0.82));
  line-height: 1.4;
  color: var(--text-muted);
}

/* Quote pill */
.af-quote {
  margin: auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.7) calc(var(--u) * 0.8);
  border-radius: max(12px, calc(var(--u) * 0.9));
  background: rgba(6, 12, 36, 0.55);
  border: 1px solid rgba(110, 130, 220, 0.28);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.af-brand .af-quote { margin-top: max(20px, calc(var(--u) * 1.8)); }
.af-quote-icon {
  width: max(34px, calc(var(--u) * 2.4));
  height: max(34px, calc(var(--u) * 2.4));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(30, 60, 160, 0.45);
  border: 1px solid rgba(90, 140, 255, 0.45);
  color: #6fb8ff;
  font-size: max(18px, calc(var(--u) * 1.35));
}
.af-quote figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.af-quote-text { font-size: max(13px, calc(var(--u) * 0.88)); font-weight: 600; color: var(--text); }
.af-quote-by { font-size: max(11.5px, calc(var(--u) * 0.72)); color: var(--text-muted); }

/* ---------- Right: login panel ---------- */
.af-panel-col {
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 5.5) 0 calc(var(--u) * 1.3);
}

.af-panel {
  width: 100%;
  padding: max(32px, calc(var(--u) * 3.2)) max(28px, calc(var(--u) * 2.65)) max(32px, calc(var(--u) * 3.4));
  border-radius: max(22px, calc(var(--u) * 1.75));
  background:
    linear-gradient(180deg, rgba(20, 32, 90, 0.22) 0%, rgba(6, 10, 34, 0) 40%),
    var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 3, 20, 0.55),
    0 0 calc(var(--u) * 3) rgba(50, 80, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.af-panel-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
}
.af-panel-icon {
  width: max(56px, calc(var(--u) * 5.1));
  height: auto;
  display: block;
  filter: drop-shadow(0 0 calc(var(--u) * 0.8) rgba(60, 120, 255, 0.35));
}
.af-panel-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.af-panel-name { font-size: max(22px, calc(var(--u) * 1.9)); font-weight: 700; letter-spacing: -0.02em; }
.af-panel-tag { margin-top: 2px; font-size: max(11.5px, calc(var(--u) * 0.8)); color: var(--text-soft); }

.af-divider {
  height: 1px;
  margin: max(18px, calc(var(--u) * 1.8)) 0 0;
  background: linear-gradient(90deg, transparent, rgba(110, 140, 255, 0.35) 20%, rgba(110, 140, 255, 0.35) 80%, transparent);
}

.af-panel-head { text-align: center; margin-top: max(18px, calc(var(--u) * 1.9)); }
.af-panel-head h2 {
  margin: 0;
  font-size: max(26px, calc(var(--u) * 1.95));
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.af-panel-head p {
  margin: calc(var(--u) * 0.45) 0 0;
  font-size: max(14px, calc(var(--u) * 0.95));
  color: var(--text-soft);
}

.af-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: max(16px, calc(var(--u) * 1.3));
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: #ffd1d8;
  background: rgba(255, 70, 100, 0.12);
  border: 1px solid rgba(255, 90, 120, 0.4);
}
.af-alert i { color: var(--danger); margin-top: 2px; }

.af-form { margin-top: max(20px, calc(var(--u) * 2.4)); }

.af-field + .af-field { margin-top: max(14px, calc(var(--u) * 1.6)); }
.af-field label {
  display: block;
  margin-bottom: max(7px, calc(var(--u) * 0.55));
  font-size: max(14px, calc(var(--u) * 0.92));
  font-weight: 600;
  color: var(--text);
}

.af-input-wrap { position: relative; }
.af-input-icon {
  position: absolute;
  left: max(15px, calc(var(--u) * 1.1));
  top: 50%;
  transform: translateY(-50%);
  font-size: max(16px, calc(var(--u) * 1.1));
  color: var(--text-muted);
  pointer-events: none;
  transition: color .25s ease;
}
.af-input {
  width: 100%;
  height: max(46px, calc(var(--u) * 3.1));
  padding: 0 16px 0 max(44px, calc(var(--u) * 3.1));
  border-radius: max(10px, calc(var(--u) * 0.7));
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: max(15px, calc(var(--u) * 0.95));
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.af-input::placeholder { color: rgba(154, 166, 196, 0.6); }
.af-input:hover { border-color: rgba(140, 160, 230, 0.5); }
.af-input:focus {
  border-color: var(--input-border-focus);
  background: rgba(6, 14, 44, 0.7);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18), 0 0 18px rgba(47, 107, 255, 0.18);
}
.af-input-wrap:focus-within .af-input-icon { color: #7fb2ff; }
.af-input-trail { padding-right: 50px; }
.af-input:-webkit-autofill,
.af-input:-webkit-autofill:hover,
.af-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #07102e inset;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}
.af-input.is-invalid { border-color: rgba(255, 107, 129, 0.85); box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.14); }

.af-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: max(17px, calc(var(--u) * 1.15));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .2s ease, background-color .2s ease;
}
.af-eye:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.af-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.af-field-error {
  max-height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--danger);
  transition: max-height .25s ease, margin .25s ease;
}
.af-field-error.visible { max-height: 40px; margin-top: 6px; }

.af-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: max(16px, calc(var(--u) * 1.9));
  font-size: max(14px, calc(var(--u) * 0.92));
}
.af-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-soft);
  user-select: none;
}
.af-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-check-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: transparent;
  font-size: 15px;
  transition: background-color .2s ease, border-color .2s ease;
}
.af-check input:checked + .af-check-box { background: #2f74ff; border-color: #2f74ff; color: #fff; }
.af-check input:focus-visible + .af-check-box { outline: 2px solid #7fb2ff; outline-offset: 2px; }

.af-forgot {
  color: #7d74ff;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, #6f86ff, #a35cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.af-forgot:hover { text-decoration: underline; text-decoration-color: #8a6cff; }
.af-forgot:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 3px; border-radius: 3px; }

.af-submit {
  position: relative;
  width: 100%;
  height: max(52px, calc(var(--u) * 3.85));
  margin-top: max(20px, calc(var(--u) * 2.3));
  border: 0;
  border-radius: max(12px, calc(var(--u) * 0.85));
  background: var(--grad-btn);
  color: #fff;
  font-family: inherit;
  font-size: max(16px, calc(var(--u) * 1.08));
  font-weight: 700;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(47, 100, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: box-shadow .3s ease, transform .15s ease, filter .3s ease;
  overflow: hidden;
}
.af-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.af-submit i { font-size: 1.15em; line-height: 1; }
.af-submit:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 30px rgba(47, 100, 255, 0.42), 0 0 26px rgba(139, 61, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.af-submit:hover::after { transform: translateX(120%); }
.af-submit:active { transform: translateY(1px) scale(0.995); filter: brightness(0.96); }
.af-submit:focus-visible { outline: 2px solid #9cc4ff; outline-offset: 3px; }
.af-submit.is-loading { cursor: progress; filter: saturate(0.85); }
.af-spinner { display: inline-flex; animation: af-spin 0.9s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }

/* ---------- Modal (forgot password) ---------- */
.af-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 4, 18, 0.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.af-modal.active { opacity: 1; visibility: visible; }
.af-modal-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  text-align: center;
  border-radius: 20px;
  background: #07102c;
  border: 1px solid var(--panel-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(10px);
  transition: transform .25s ease;
}
.af-modal.active .af-modal-card { transform: none; }
.af-modal-icon {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--grad-btn);
}
.af-modal-card h3 { margin: 0 0 8px; font-size: 20px; }
.af-modal-card p { margin: 0 0 22px; color: var(--text-soft); font-size: 14.5px; line-height: 1.6; }
.af-modal-close {
  height: 44px; padding: 0 28px;
  border: 0; border-radius: 10px;
  background: var(--grad-btn);
  color: #fff; font: 700 15px var(--font);
  cursor: pointer;
}
.af-modal-close:focus-visible { outline: 2px solid #9cc4ff; outline-offset: 3px; }

/* ---------- Entrance pre-state (only while GSAP is about to run) ---------- */
.af-anim.af-js-pending .af-a-logo,
.af-anim.af-js-pending .af-line-in,
.af-anim.af-js-pending .af-a-lead,
.af-anim.af-js-pending .af-a-feature,
.af-anim.af-js-pending .af-a-quote { opacity: 0; }

/* ==========================================================
   Responsive
   ========================================================== */

/* Laptops narrower than 16:9 / small desktops (e.g. 1024×768) */
@media (max-width: 1199px), (max-aspect-ratio: 3/2) {
  .af-layout { column-gap: 32px; padding: 0 32px 0 40px; grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); }
  .af-scene-art {
    opacity: 0.42;
    transform: translate3d(10%, 10%, 0) scale(0.92);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
  }
  .af-scene-shade {
    background: linear-gradient(90deg, rgba(0, 5, 22, 0.8) 0%, rgba(0, 6, 24, 0.6) 38%, rgba(0, 6, 24, 0.2) 58%, transparent 75%);
    -webkit-mask-image: none; mask-image: none;
  }
  .af-headline { font-size: clamp(32px, 4vw, 44px); }
  .af-features { max-width: 360px; gap: 16px; }
}

/* Tablet portrait & mobile: single column, login first */
@media (max-width: 900px) {
  .af-layout {
    grid-template-columns: 1fr;
    padding: 24px 24px 40px;
    row-gap: 36px;
    max-width: 640px;
    margin: 0 auto;
  }
  .af-panel-col { order: -1; padding: 0; }
  .af-brand { padding: 0; }
  .af-logo { display: none; }          /* the panel already carries the logo */
  .af-headline { margin-top: 0; font-size: clamp(28px, 6vw, 40px); }
  .af-lead { margin-top: 12px; max-width: none; }
  .af-features { margin-top: 24px; }
  .af-feature { gap: 14px; }
  .af-brand .af-quote { margin-top: 28px; }
  .af-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    max-width: none;
    width: 100%;
  }
  .af-scene-art {
    opacity: 0.22;
    transform: none;
    background-size: auto 62vh;
    background-position: 30% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 60%);
            mask-image: linear-gradient(180deg, transparent 30%, #000 60%);
  }
  .af-scene-shade { background: rgba(0, 6, 24, 0.25); }
  .af-scene-trail, .af-orb-bl { display: none; }
}

@media (max-width: 560px) {
  .af-layout { padding: 16px 16px 32px; row-gap: 28px; }
  .af-panel { padding: 28px 20px 26px; border-radius: 20px; }
  .af-panel-icon { width: 48px; }
  .af-panel-name { font-size: 21px; }
  .af-features { grid-template-columns: 1fr; gap: 16px; }
  .af-options { font-size: 13.5px; }
}

/* Wide but short laptop screens (e.g. 1366×768): tighten the left column so it fits */
@media (min-width: 901px) and (max-height: 800px) {
  .af-headline { margin-top: calc(var(--u) * 1.6); }
  .af-features { gap: calc(var(--u) * 1.05); }
  .af-brand { padding-bottom: calc(var(--u) * 2.2); }
}

/* Short desktop windows: let the page scroll instead of squashing */
@media (min-width: 901px) and (max-height: 620px) {
  .af-panel-col { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .af-submit::after { display: none; }
}