/* ============================================================
   IHUB DEALS — Auth Pages  |  Premium Experience Layer v2
   Glassmorphism · Parallax · Microinteractions · TextScramble
   Spotlight · Geometric Shapes · Noise · Fog · Ripple
   ============================================================ */

/* ──────────────────────────────────────
   CSS VARIABLES (Design Tokens)
   ────────────────────────────────────── */
:root {
  --auth-gold: #01A6FD;
  --auth-gold-light: #33B8FE;
  --auth-gold-dark: #005793;
  --auth-green: #01A6FD;
  --auth-red: #FD1A27;
  --auth-amber: #F59E0B;
  --auth-bg: #060606;
  --auth-card-bg: rgba(12,12,16,.72);
  --auth-border: rgba(255,255,255,.06);
  --auth-text: #FFF;
  --auth-text-dim: #777;
  --auth-text-muted: #555;
  --auth-radius: 14px;
  --auth-radius-lg: 24px;
  --auth-ease: cubic-bezier(.16,1,.3,1);
  --auth-ease-smooth: cubic-bezier(.4,0,.2,1);
}

/* ──────────────────────────────────────
   BACKGROUND SCENE
   ────────────────────────────────────── */
/* EFEITO CUSTOMIZADO: background-extra */
.auth-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--auth-bg);
}

.auth-scene__grid {
  position: absolute; inset: -64px;
  background-image:
    linear-gradient(rgba(197,160,89,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,160,89,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 10%, transparent 70%);
  animation: authGridDrift 50s linear infinite;
}

.auth-scene__orb {
  position: absolute; border-radius: 50%; filter: blur(130px); will-change: transform;
}
.auth-scene__orb--1 {
  width: 650px; height: 650px; background: rgba(197,160,89,0.06);
  top: -18%; left: -12%; animation: authOrb1 22s ease-in-out infinite;
}
.auth-scene__orb--2 {
  width: 500px; height: 500px; background: rgba(197,160,89,0.045);
  bottom: -12%; right: -10%; animation: authOrb2 28s ease-in-out infinite;
}
.auth-scene__orb--3 {
  width: 320px; height: 320px; background: rgba(197,160,89,0.03);
  top: 42%; left: 46%; animation: authOrb3 18s ease-in-out infinite;
}

.auth-scene__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.auth-scene__particles {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}

/* rotating orbital rings */
.auth-scene__ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid transparent; pointer-events: none;
}
.auth-scene__ring--1 {
  width: min(520px,130vw); height: min(520px,130vw);
  transform: translate(-50%,-50%);
  border-top-color: rgba(197,160,89,.07);
  border-right-color: rgba(197,160,89,.025);
  animation: authRing 28s linear infinite;
}
.auth-scene__ring--2 {
  width: min(720px,175vw); height: min(720px,175vw);
  transform: translate(-50%,-50%);
  border-top-color: rgba(197,160,89,.035);
  border-left-color: rgba(197,160,89,.015);
  animation: authRing 42s linear infinite reverse;
}

/* Noise overlay */
.auth-scene__noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Gradient fog layers */
.auth-scene__fog {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.auth-scene__fog-layer {
  position: absolute; width: 200%; height: 100%; top: 0;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.012), transparent, rgba(197,160,89,0.008), transparent);
  animation: authFogDrift 30s linear infinite;
}
.auth-scene__fog-layer--2 {
  animation-duration: 45s;
  animation-direction: reverse;
  opacity: 0.7;
  top: 30%;
}

/* Floating geometric shapes */
.auth-scene__geo {
  position: absolute; pointer-events: none; z-index: 1;
  will-change: transform;
}
.auth-scene__geo--triangle {
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid rgba(197,160,89,0.025);
  top: 15%; left: 8%;
  animation: authGeoFloat1 20s ease-in-out infinite, authGeoSpin 35s linear infinite;
}
.auth-scene__geo--square {
  width: 40px; height: 40px;
  border: 1px solid rgba(197,160,89,0.04);
  top: 70%; left: 15%;
  animation: authGeoFloat2 16s ease-in-out infinite, authGeoSpin 28s linear infinite reverse;
}
.auth-scene__geo--circle {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(197,160,89,0.035);
  top: 25%; right: 12%;
  animation: authGeoFloat3 22s ease-in-out infinite;
}
.auth-scene__geo--diamond {
  width: 32px; height: 32px;
  border: 1px solid rgba(197,160,89,0.03);
  transform: rotate(45deg);
  bottom: 20%; right: 20%;
  animation: authGeoFloat1 18s ease-in-out infinite;
  animation-delay: -5s;
}
.auth-scene__geo--hex {
  width: 36px; height: 20px;
  background: rgba(197,160,89,0.02);
  position: absolute;
  top: 55%; left: 75%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation: authGeoFloat2 24s ease-in-out infinite;
  animation-delay: -8s;
}

/* ──────────────────────────────────────
   CURSOR LIGHT (Spotlight Style)
   ────────────────────────────────────── */
/* EFEITO CUSTOMIZADO: cursor-spotlight */
.auth-cursor-light {
  position: fixed; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.07) 0%, rgba(197,160,89,0.015) 45%, transparent 70%);
  pointer-events: none; z-index: 1;
  transform: translate(-50%,-50%);
  opacity: 0; transition: opacity .4s;
  will-change: left, top;
}
.auth-cursor-light.is-active { opacity: 1; }
.auth-cursor-light.is-intense {
  background: radial-gradient(circle, rgba(197,160,89,0.14) 0%, rgba(197,160,89,0.04) 40%, transparent 65%);
  width: 600px; height: 600px;
  transition: opacity .4s, width .5s var(--auth-ease), height .5s var(--auth-ease), background .5s;
}

/* ──────────────────────────────────────
   PAGE LAYOUT
   ────────────────────────────────────── */
.auth-page {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
.auth-split {
  width: 100%; max-width: 1200px;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

/* ──────────────────────────────────────
   FORM SIDE
   ────────────────────────────────────── */
.auth-form-side {
  width: 100%; max-width: 460px;
  animation: authUp .65s var(--auth-ease) both;
}

/* ──────────────────────────────────────
   GLASS CARD
   ────────────────────────────────────── */
.auth-card {
  position: relative; padding: 36px 24px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  transition: border-color .3s var(--auth-ease), box-shadow .3s var(--auth-ease);
}
.auth-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* gold accent stripe */
.auth-card::before {
  content: ''; position: absolute;
  top: -1px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.20), transparent);
  z-index: 2;
}
/* inner top glow */
.auth-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, rgba(197,160,89,.018) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0;
}

/* ──────────────────────────────────────
   HEADER
   ────────────────────────────────────── */
/* EFEITO CUSTOMIZADO: logo-scramble */
.auth-header {
  position: relative; z-index: 1; margin-bottom: 32px;
}
.auth-header__logo {
  height: 48px; width: auto; margin-bottom: 12px;
  transition: filter .3s;
}
.auth-header__logo:hover {
  filter: drop-shadow(0 0 12px rgba(197,160,89,.35));
}
.auth-header__sub {
  font-size: 14px; color: var(--auth-text-dim); line-height: 1.5;
}


/* ──────────────────────────────────────
   FLASH MESSAGES
   ────────────────────────────────────── */
.auth-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 0;
  margin-bottom: 20px; font-size: 13px; font-weight: 600;
  animation: authUp .3s var(--auth-ease);
  position: relative; z-index: 1;
}
.auth-flash--error {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.15);
  color: #f87171;
}
.auth-flash--success {
  background: rgba(1,166,253,.08);
  border: 1px solid rgba(1,166,253,.15);
  color: #01A6FD;
}
.auth-flash__close {
  margin-left: auto; font-size: 18px; line-height: 1;
  opacity: .6; cursor: pointer; transition: opacity .2s;
  background: none; border: none; color: inherit; padding: 2px 4px;
}
.auth-flash__close:hover { opacity: 1; }

/* ──────────────────────────────────────
   FLOATING-LABEL FIELDS (Premium Glass)
   ────────────────────────────────────── */
.auth-field {
  margin-bottom: 18px; position: relative; z-index: 1;
}

.auth-field__wrap {
  position: relative;
  background: rgba(14,14,18,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  overflow: hidden;
  transition:
    border-color .35s var(--auth-ease-smooth),
    background .35s var(--auth-ease-smooth),
    box-shadow .35s var(--auth-ease-smooth);
}

/* expanding gold underline */
.auth-field__wrap::after {
  content: ''; position: absolute;
  bottom: -1px; left: 50%; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--auth-gold-dark), var(--auth-gold), var(--auth-gold-light), var(--auth-gold), var(--auth-gold-dark));
  transition: width .4s var(--auth-ease-smooth), left .4s var(--auth-ease-smooth);
  border-radius: 0;
  z-index: 3;
}

.auth-field__wrap:focus-within::after {
  width: calc(100% + 3px); left: calc(50% - 1.5px);
}
.auth-field__wrap:focus-within {
  border-color: rgba(197,160,89,.25);
  background: rgba(197,160,89,.018);
  box-shadow:
    0 0 0 4px rgba(197,160,89,.06),
    0 0 20px rgba(197,160,89,.04),
    0 8px 24px rgba(0,0,0,.12);
}

.auth-field__icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: #444; pointer-events: none; z-index: 4;
  transition: color .3s, filter .3s;
}
.auth-field__wrap:focus-within .auth-field__icon {
  color: var(--auth-gold);
  filter: drop-shadow(0 0 4px rgba(197,160,89,.25));
}

.auth-field__wrap input,
.auth-field__wrap select {
  width: 100%; padding: 28px 16px 10px 48px;
  background: transparent; color: var(--auth-text);
  font-size: 16px; font-weight: 500;
  border: none; outline: none;
  position: relative; z-index: 2;
}
.auth-field__wrap input::placeholder { color: transparent; }

/* Success state */
.auth-field--success .auth-field__wrap {
  border-color: rgba(1,166,253,.2);
}
.auth-field--success .auth-field__icon {
  color: var(--auth-green);
}
.auth-field--success .auth-field__check {
  display: flex;
}

/* Error state */
.auth-field--error .auth-field__wrap {
  border-color: rgba(239,68,68,.3);
  animation: authShake .4s ease;
  box-shadow: 0 0 0 3px rgba(239,68,68,.06), 0 0 16px rgba(239,68,68,.04);
}
.auth-field--error .auth-field__icon {
  color: var(--auth-red);
}

/* Check icon for success */
.auth-field__check {
  display: none;
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  z-index: 4; pointer-events: none;
  animation: authCheckBounce .5s var(--auth-ease) both;
}
.auth-field__check svg {
  color: var(--auth-green);
}

/* ── Autofill override (Chrome / Edge / Safari) ── */
.auth-field__wrap input:-webkit-autofill,
.auth-field__wrap input:-webkit-autofill:hover,
.auth-field__wrap input:-webkit-autofill:focus,
.auth-field__wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0c0c10 inset !important;
  box-shadow: 0 0 0 1000px #0c0c10 inset !important;
  -webkit-text-fill-color: #FFF !important;
  caret-color: #FFF;
  transition: background-color 5000s ease-in-out 0s;
  border-radius: var(--auth-radius);
}
.auth-field__wrap input:-webkit-autofill ~ .auth-field__label {
  top: 7px; transform: translateY(0) scale(.72);
  color: var(--auth-gold); font-weight: 600;
}
.auth-field__wrap input:-webkit-autofill ~ .auth-field__icon {
  color: var(--auth-gold);
}

/* password eye toggle */
.auth-field__toggle {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #444; cursor: pointer; z-index: 4;
  padding: 6px; transition: color .2s;
  background: none; border: none;
  display: flex; align-items: center;
}
.auth-field__toggle:hover { color: #999; }

/* floating label */
.auth-field__label {
  position: absolute; left: 48px; top: 50%;
  transform: translateY(-50%);
  color: var(--auth-text-muted); font-size: 16px; font-weight: 500;
  pointer-events: none;
  transition: all .25s var(--auth-ease-smooth);
  transform-origin: left top; z-index: 3;
}
.auth-field__wrap input:focus ~ .auth-field__label,
.auth-field__wrap input:not(:placeholder-shown) ~ .auth-field__label {
  top: 7px; transform: translateY(0) scale(.72);
  color: var(--auth-gold); font-weight: 600;
}
/* select always shows value — label always raised */
.auth-field__wrap select ~ .auth-field__label {
  top: 7px; transform: translateY(0) scale(.72);
  color: var(--auth-gold); font-weight: 600;
}
.auth-field__wrap select { appearance: auto; cursor: pointer; }

.auth-field__hint {
  font-size: 11px; color: var(--auth-text-muted);
  margin-top: 6px; padding-left: 4px;
}

/* ──────────────────────────────────────
   ROW / UTILS
   ────────────────────────────────────── */
.auth-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 26px;
  position: relative; z-index: 1;
}

/* custom checkbox */
.auth-check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 13px; color: #888; user-select: none;
}
.auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check__box {
  width: 18px; height: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 0; position: relative;
  transition: all .25s; flex-shrink: 0;
  background: rgba(14,14,18,.55);
}
.auth-check input:checked ~ .auth-check__box {
  background: var(--auth-gold);
  border-color: var(--auth-gold);
}
.auth-check input:checked ~ .auth-check__box::after {
  content: ''; position: absolute;
  left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid #000; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-link {
  font-size: 12px; font-weight: 600;
  color: var(--auth-gold); transition: opacity .2s;
}
.auth-link:hover { opacity: .8; }
.auth-link--gold {
  color: var(--auth-gold); font-weight: 600;
  transition: color .2s, text-shadow .2s;
}
.auth-link--gold:hover {
  color: #E7C686;
  text-shadow: 0 0 12px rgba(197,160,89,.2);
}

/* ──────────────────────────────────────
   PREMIUM BUTTON
   ────────────────────────────────────── */
/* EFEITO CUSTOMIZADO: button-success */
.auth-btn {
  position: relative; width: 100%;
  padding: 16px 32px;
  background: #0C0C10;
  color: #FFF; font-weight: 700; font-size: 15px;
  border: 2px solid rgba(1,166,253,0.4);
  border-bottom: 3px solid #C5A059;
  border-radius: 14px;
  cursor: pointer; overflow: hidden;
  transition: all .3s var(--auth-ease-smooth);
  box-shadow: 0 0 12px rgba(1,166,253,0.08), 0 0 4px rgba(197,160,89,0.08);
  letter-spacing: .3px; z-index: 1;
}
.auth-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(1,166,253,0.7);
  box-shadow: 0 0 20px rgba(1,166,253,0.2), 0 0 8px rgba(197,160,89,0.15), 0 4px 20px rgba(0,0,0,0.3);
}
.auth-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 0 8px rgba(1,166,253,0.15);
  transition-duration: .1s;
}
.auth-btn:disabled {
  opacity: .35; cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* shimmer sweep */
.auth-btn::after {
  content: ''; position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.auth-btn:hover::after { left: 130%; }

/* idle shimmer pulse */
.auth-btn::before {
  content: ''; position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: authBtnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* Ripple effect */
.auth-btn__ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: authRipple .6s ease-out forwards;
  pointer-events: none;
}

/* loading spinner */
.auth-btn--loading {
  color: transparent !important;
  pointer-events: none;
}
.auth-btn--loading .auth-btn__text { visibility: hidden; }
.auth-btn__loader { display: none; }
.auth-btn--loading .auth-btn__loader {
  display: block; position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(0,0,0,.15);
  border-top-color: #000;
  border-radius: 50%;
  animation: authSpin .6s linear infinite;
}

/* success state */
.auth-btn--success {
  background: linear-gradient(135deg, var(--auth-green), #34d399) !important;
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(1,166,253,.25);
  transition: all .4s var(--auth-ease);
}

/* ──────────────────────────────────────
   FOOTER
   ────────────────────────────────────── */
.auth-footer-link {
  text-align: center; margin-top: 28px;
  font-size: 13px; color: #666;
  position: relative; z-index: 1;
}
.auth-copyright {
  text-align: center; margin-top: 20px;
  font-size: 11px; color: #444;
}

/* ──────────────────────────────────────
   SOCIAL PROOF (Conversion Boost)
   ────────────────────────────────────── */
.auth-social-proof {
  position: relative; z-index: 1;
  margin-top: 20px;
}

.auth-social-proof__live {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(1,166,253,.15);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(1,166,253,.06);
  font-size: 12px; color: rgba(255,255,255,.5);
  font-weight: 500;
  animation: authUp .5s var(--auth-ease) .4s both;
}
.auth-social-proof__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--auth-green);
  box-shadow: 0 0 8px rgba(1,166,253,.4);
  animation: authPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.auth-social-proof__count {
  font-weight: 700; color: var(--auth-green);
}

/* Testimonial mini cards */
.auth-testimonials {
  display: flex; gap: 8px; margin-top: 16px;
  overflow: hidden;
  animation: authUp .5s var(--auth-ease) .5s both;
}
.auth-testimonial-card {
  flex: 1; min-width: 0;
  padding: 12px 14px; border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.auth-testimonial-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.auth-testimonial-card__text {
  font-size: 11px; color: rgba(255,255,255,.4);
  line-height: 1.5; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.auth-testimonial-card__author {
  font-size: 10px; color: var(--auth-gold);
  font-weight: 600; opacity: .7;
}
.auth-testimonial-card__stars {
  font-size: 9px; color: var(--auth-gold);
  letter-spacing: 1px; margin-bottom: 4px;
}

/* Animated counter */
.auth-counter {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MOBILE SHOWCASE (Login) — fills whitespace with context
   ============================================================ */
.auth-showcase {
  margin-top: 28px;
  animation: authUp .8s var(--auth-ease) .3s both;
}

.auth-showcase__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.auth-showcase__stat {
  padding: 16px 8px; border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.auth-showcase__stat:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.auth-showcase__val {
  display: block; font-size: 20px; font-weight: 800; line-height: 1.1;
}
.auth-showcase__lbl {
  display: block; font-size: 9px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; margin-top: 5px;
}

.auth-showcase__chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 52px; padding: 10px 14px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom: 16px; overflow: hidden;
}
.auth-showcase__bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: rgba(197,160,89,.2);
  transform-origin: bottom;
  animation: authGrow .8s var(--auth-ease-smooth) both;
  height: var(--h, 50%);
  transition: background .3s;
}
.auth-showcase__bar:hover { background: rgba(197,160,89,.5) !important; }
.auth-showcase__bar:nth-child(n+4)  { background: rgba(197,160,89,.3); }
.auth-showcase__bar:nth-child(n+7)  { background: rgba(197,160,89,.4); }
.auth-showcase__bar:nth-child(n+10) { background: rgba(197,160,89,.55); }
.auth-showcase__bar:nth-child(1)  { animation-delay: .5s; }
.auth-showcase__bar:nth-child(2)  { animation-delay: .55s; }
.auth-showcase__bar:nth-child(3)  { animation-delay: .6s; }
.auth-showcase__bar:nth-child(4)  { animation-delay: .65s; }
.auth-showcase__bar:nth-child(5)  { animation-delay: .7s; }
.auth-showcase__bar:nth-child(6)  { animation-delay: .75s; }
.auth-showcase__bar:nth-child(7)  { animation-delay: .8s; }
.auth-showcase__bar:nth-child(8)  { animation-delay: .85s; }
.auth-showcase__bar:nth-child(9)  { animation-delay: .9s; }
.auth-showcase__bar:nth-child(10) { animation-delay: .95s; }
.auth-showcase__bar:nth-child(11) { animation-delay: 1s; }
.auth-showcase__bar:nth-child(12) { animation-delay: 1.05s; }

.auth-showcase__proof {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 12px; color: var(--auth-text-muted); font-weight: 500;
}
.auth-showcase__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--auth-green);
  animation: authPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(1,166,253,.35);
  flex-shrink: 0;
}

/* ============================================================
   MOBILE TRUST BADGE (Register)
   ============================================================ */
.auth-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 20px;
  font-size: 11px; color: #444; font-weight: 500;
  animation: authUp .6s var(--auth-ease) .25s both;
}
.auth-trust svg { flex-shrink: 0; opacity: .55; }

@media(min-width:1024px) {
  .auth-showcase, .auth-trust { display: none; }
}

/* ============================================================
   HERO SIDE
   ============================================================ */
/* EFEITO CUSTOMIZADO: hero-3d */
.auth-hero-side {
  display: none; flex: 1;
  align-items: center; justify-content: center;
  animation: authRight .8s var(--auth-ease) .15s both;
}
.auth-hero__scene {
  position: relative; width: 100%; max-width: 600px;
  min-height: 520px;
}

/* Robot wrapper — hero layout container */
.auth-hero__robot-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 0;
  overflow: visible;
  padding: 36px 32px;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  animation: authRight .8s var(--auth-ease) .15s both;
  transition: border-color .3s var(--auth-ease), box-shadow .3s var(--auth-ease);
}
.auth-hero__robot-wrap:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Gold accent stripe on hero card */
.auth-hero__robot-wrap::before {
  content: ''; position: absolute;
  top: -1px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.20), transparent);
  z-index: 10;
}

/* Ambient glow behind robot */
.auth-hero__robot-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,.08) 0%, rgba(197,160,89,.02) 50%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: authPulse 4s ease-in-out infinite;
}

/* ambient glows */
.auth-hero__glow {
  position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;
}
.auth-hero__glow--1 {
  width: 350px; height: 350px;
  background: rgba(197,160,89,.055);
  top: -60px; left: -60px;
}
.auth-hero__glow--2 {
  width: 250px; height: 250px;
  background: rgba(197,160,89,.04);
  bottom: -40px; right: -40px;
}

/* Hero floating geometric shapes */
.auth-hero__geo {
  position: absolute; pointer-events: none; z-index: 0;
}
.auth-hero__geo--1 {
  width: 80px; height: 80px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(197,160,89,.06), rgba(197,160,89,.02));
  border: 1px solid rgba(197,160,89,.06);
  top: -30px; right: -10px;
  animation: authGeoFloat1 14s ease-in-out infinite;
  transform: rotate(15deg);
}
.auth-hero__geo--2 {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(1,166,253,.05), rgba(1,166,253,.01));
  border: 1px solid rgba(1,166,253,.06);
  bottom: -20px; left: -20px;
  animation: authGeoFloat2 18s ease-in-out infinite;
}
.auth-hero__geo--3 {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, rgba(197,160,89,.04), transparent);
  border: 1px solid rgba(197,160,89,.04);
  top: 50%; right: -30px;
  animation: authGeoFloat3 12s ease-in-out infinite;
  transform: rotate(45deg);
}

/* PC frame */
.auth-hero__pc {
  position: relative; border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--auth-border);
  box-shadow:
    0 2px 8px rgba(0,0,0,.25),
    0 16px 48px rgba(0,0,0,.4),
    0 32px 80px rgba(0,0,0,.22);
  background: rgba(14,14,18,.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: authFloat 8s ease-in-out infinite;
  z-index: 2;
}
.auth-hero__pc-bar {
  height: 32px; background: rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.auth-hero__dot { width: 8px; height: 8px; border-radius: 50%; }
.auth-hero__dot--r { background: var(--auth-red); }
.auth-hero__dot--y { background: var(--auth-amber); }
.auth-hero__dot--g { background: var(--auth-green); }
.auth-hero__pc-url {
  margin-left: 12px; font-size: 10px;
  color: #444; font-weight: 500;
}
.auth-hero__pc-body {
  aspect-ratio: 16/10; background: var(--auth-bg);
  padding: 20px; display: flex; flex-direction: column;
}

/* phone frame */
.auth-hero__phone {
  position: absolute; bottom: -24px; right: -24px;
  width: 36%; border-radius: 22px;
  border: 2px solid rgba(255,255,255,.07);
  overflow: hidden;
  background: rgba(14,14,18,.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.5),
    0 32px 80px rgba(0,0,0,.25);
  animation: authFloat 6s ease-in-out infinite;
  animation-delay: -2s; z-index: 3;
}
.auth-hero__phone-notch {
  width: 42%; height: 12px;
  background: #000;
  border-radius: 0 0 10px 10px;
  margin: 0 auto;
}
.auth-hero__phone-body { padding: 12px 14px; }

/* floating stat badges */
.auth-hero__badge {
  position: absolute; padding: 10px 16px;
  border-radius: 12px;
  background: rgba(14,14,18,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--auth-border);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 4;
  transition: transform .3s, border-color .3s;
}
.auth-hero__badge:hover {
  border-color: rgba(197,160,89,.15);
  transform: translateY(-4px) !important;
}
.auth-hero__badge--a {
  top: -14px; right: 28%;
  animation: authFloat 7s ease-in-out infinite;
  animation-delay: -3s;
}
.auth-hero__badge--b {
  bottom: 22%; left: -18px;
  animation: authFloat 9s ease-in-out infinite;
  animation-delay: -5s;
}
.auth-hero__badge-val {
  display: block; font-size: 14px; font-weight: 800; line-height: 1.2;
}
.auth-hero__badge-lbl {
  display: block; font-size: 10px;
  color: #666; font-weight: 500; margin-top: 1px;
}

/* ──────────────────────────────────────
   HERO STATS PANEL (floating trust cards)
   ────────────────────────────────────── */
.auth-hero__trust-card {
  position: absolute; padding: 14px 18px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 5;
  animation: authFloat 10s ease-in-out infinite;
  animation-delay: -7s;
  bottom: 0; right: 40%;
}
.auth-hero__trust-card-val {
  font-size: 18px; font-weight: 800;
  color: var(--auth-gold);
}
.auth-hero__trust-card-lbl {
  font-size: 10px; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; margin-top: 2px;
}

/* ──────────────────────────────────────
   HERO MASCOT — Interactive Icon
   ────────────────────────────────────── */

/* ============================================================
   IRON MAN HUD CHARACTER SYSTEM
   ============================================================ */

/* ── HUD Scanlines Overlay ── */
.hud-scanlines {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(197,160,89,0.008) 2px,
    rgba(197,160,89,0.008) 4px
  );
  opacity: 0.6;
  animation: hudScanlineScroll 8s linear infinite;
}

/* ── Light Sweep Effect ── */
.hud-sweep {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(197,160,89,0.03) 45%,
    rgba(197,160,89,0.06) 50%,
    rgba(197,160,89,0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: hudSweepMove 6s ease-in-out infinite;
  opacity: 0.5;
}

/* ── Interactive Character Container — Ghost Mascot ── */
.hud-character {
  position: absolute;
  top: 2%; right: 10px;
  z-index: 8;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 1s ease;
  filter: drop-shadow(0 0 40px rgba(1,166,253,0.25));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-character__glow {
  position: absolute;
  top: -20px; left: 50%;
  width: 220px; height: 220px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(1,166,253,0.12) 0%, rgba(1,166,253,0.03) 40%, transparent 70%);
  pointer-events: none;
  animation: authPulse 4s ease-in-out infinite;
}

/* ── Ghost Icon Styles ── */
#ghost {
  position: relative;
  scale: 1.15;
}

#red {
  animation: ghostUpNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes ghostUpNDown {
  0%, 49% { transform: translateY(0px); }
  50%, 100% { transform: translateY(-10px); }
}

#top0, #top1, #top2, #top3, #top4,
#st0, #st1, #st2, #st3, #st4, #st5 {
  background-color: #01A6FD;
}

#top0 { grid-area: top0; }
#top1 { grid-area: top1; }
#top2 { grid-area: top2; }
#top3 { grid-area: top3; }
#top4 { grid-area: top4; }
#st0 { grid-area: st0; }
#st1 { grid-area: st1; }
#st2 { grid-area: st2; }
#st3 { grid-area: st3; }
#st4 { grid-area: st4; }
#st5 { grid-area: st5; }

#an1  { grid-area: an1;  animation: ghostFlicker0 infinite 0.5s; }
#an18 { grid-area: an18; animation: ghostFlicker0 infinite 0.5s; }
#an2  { grid-area: an2;  animation: ghostFlicker1 infinite 0.5s; }
#an17 { grid-area: an17; animation: ghostFlicker1 infinite 0.5s; }
#an3  { grid-area: an3;  animation: ghostFlicker1 infinite 0.5s; }
#an16 { grid-area: an16; animation: ghostFlicker1 infinite 0.5s; }
#an4  { grid-area: an4;  animation: ghostFlicker1 infinite 0.5s; }
#an15 { grid-area: an15; animation: ghostFlicker1 infinite 0.5s; }
#an5  { grid-area: an5; }
#an6  { grid-area: an6;  animation: ghostFlicker0 infinite 0.5s; }
#an12 { grid-area: an12; animation: ghostFlicker0 infinite 0.5s; }
#an7  { grid-area: an7;  animation: ghostFlicker0 infinite 0.5s; }
#an13 { grid-area: an13; animation: ghostFlicker0 infinite 0.5s; }
#an9  { grid-area: an9;  animation: ghostFlicker1 infinite 0.5s; }
#an10 { grid-area: an10; animation: ghostFlicker1 infinite 0.5s; }
#an8  { grid-area: an8;  animation: ghostFlicker0 infinite 0.5s; }
#an11 { grid-area: an11; animation: ghostFlicker0 infinite 0.5s; }
#an14 { grid-area: an14; }

@keyframes ghostFlicker0 {
  0%, 49% { background-color: #01A6FD; }
  50%, 100% { background-color: transparent; }
}

@keyframes ghostFlicker1 {
  0%, 49% { background-color: transparent; }
  50%, 100% { background-color: #01A6FD; }
}

#eye {
  width: 40px; height: 50px;
  position: absolute;
  top: 30px; left: 10px;
}
#eye::before {
  content: "";
  background-color: #C5A059;
  width: 20px; height: 50px;
  transform: translateX(10px);
  display: block; position: absolute;
}
#eye::after {
  content: "";
  background-color: #C5A059;
  width: 40px; height: 30px;
  transform: translateY(10px);
  display: block; position: absolute;
}

#eye1 {
  width: 40px; height: 50px;
  position: absolute;
  top: 30px; right: 30px;
}
#eye1::before {
  content: "";
  background-color: #C5A059;
  width: 20px; height: 50px;
  transform: translateX(10px);
  display: block; position: absolute;
}
#eye1::after {
  content: "";
  background-color: #C5A059;
  width: 40px; height: 30px;
  transform: translateY(10px);
  display: block; position: absolute;
}

#pupil {
  width: 20px; height: 20px;
  background-color: #0a0a0a;
  position: absolute;
  top: 50px; left: 10px;
  z-index: 1;
  animation: ghostEyesMovement infinite 3s;
}

#pupil1 {
  width: 20px; height: 20px;
  background-color: #0a0a0a;
  position: absolute;
  top: 50px; right: 50px;
  z-index: 1;
  animation: ghostEyesMovement infinite 3s;
}

@keyframes ghostEyesMovement {
  0%, 49% { transform: translateX(0px); }
  50%, 99% { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}

#shadow {
  background-color: black;
  width: 140px; height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: ghostShadowMovement infinite 0.5s;
}

@keyframes ghostShadowMovement {
  0%, 49% { opacity: 0.5; }
  50%, 100% { opacity: 0.2; }
}

/* ── HUD-targeted element glow ── */
.hud-targeted {
  box-shadow:
    0 0 0 1px rgba(197,160,89,0.15),
    0 0 20px rgba(197,160,89,0.08),
    0 0 40px rgba(197,160,89,0.04) !important;
  border-color: rgba(197,160,89,0.25) !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.hud-targeted .auth-field__icon {
  color: var(--auth-gold);
  filter: drop-shadow(0 0 4px rgba(197,160,89,0.3));
}

/* ── Radial glow pulse on hero wrap — uses separate element ── */
.auth-hero__robot-glow {
  animation: hudRadialPulse 4s ease-in-out infinite;
}

/* ── HUD Keyframes ── */
@keyframes hudScanlineScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

@keyframes hudSweepMove {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

@keyframes hudReactorPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}

@keyframes hudReticleSpin {
  from { transform-origin: center; }
  to   { transform-origin: center; }
}

@keyframes hudRadialPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* ── Reduced motion: disable HUD effects ── */
@media(prefers-reduced-motion: reduce) {
  .hud-character,
  .hud-scanlines,
  .hud-sweep,
  .hud-reticle { display: none !important; }
  .hud-targeted { box-shadow: none !important; }
  .auth-hero__robot-wrap::after { animation: none !important; }
}

/* ── OLD MASCOT (kept for reference, hidden by character layer) ── */

/* ── Mascot (mouse-follow icon) — replaced by HUD character ── */
.hero-mascot {
  display: none; /* replaced by hud-character */
  position: absolute;
  top: 30%; left: 60%;
  margin: -60px 0 0 -75px;
  width: 150px; height: 120px;
  z-index: 1;
  perspective: 600px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .08s linear;
  opacity: .35;
  pointer-events: none;
}

.hero-mascot__core {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  animation: authFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 30px rgba(197,160,89,.3));
}

.hero-mascot__icon {
  width: 120px; height: 80px;
}

/* Inner glow pulse */
.hero-mascot__glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,.12) 0%, rgba(197,160,89,.03) 50%, transparent 70%);
  animation: authPulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Rotating rings around mascot */
.hero-mascot__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
}
.hero-mascot__ring--outer {
  inset: -30px;
  border-top-color: rgba(197,160,89,.15);
  border-right-color: rgba(197,160,89,.05);
  animation: authSpin 12s linear infinite;
}
.hero-mascot__ring--inner {
  inset: -16px;
  border-bottom-color: rgba(197,160,89,.1);
  border-left-color: rgba(197,160,89,.04);
  animation: authSpin 8s linear infinite reverse;
}

/* ── Orbit rings (background) ── */
.hero-orbit {
  position: absolute;
  top: 35%; left: 60%;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 0;
}
.hero-orbit--1 {
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-top-color: rgba(197,160,89,.06);
  border-right-color: rgba(197,160,89,.02);
  animation: authSpin 20s linear infinite;
}
.hero-orbit--2 {
  width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-bottom-color: rgba(197,160,89,.04);
  border-left-color: rgba(197,160,89,.015);
  animation: authSpin 30s linear infinite reverse;
}
.hero-orbit--3 {
  width: 500px; height: 500px; margin: -250px 0 0 -250px;
  border-top-color: rgba(197,160,89,.025);
  animation: authSpin 45s linear infinite;
}

/* ── Floating particles (CSS-only) ── */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--auth-gold);
}
.hero-particle--1 {
  width: 4px; height: 4px; opacity: .3;
  top: 20%; left: 65%;
  animation: heroParticleFloat 8s ease-in-out infinite;
}
.hero-particle--2 {
  width: 3px; height: 3px; opacity: .2;
  top: 35%; left: 80%;
  animation: heroParticleFloat 10s ease-in-out infinite;
  animation-delay: -3s;
}
.hero-particle--3 {
  width: 5px; height: 5px; opacity: .15;
  top: 70%; left: 50%;
  animation: heroParticleFloat 12s ease-in-out infinite;
  animation-delay: -6s;
}
.hero-particle--4 {
  width: 3px; height: 3px; opacity: .25;
  top: 15%; left: 40%;
  animation: heroParticleFloat 9s ease-in-out infinite;
  animation-delay: -2s;
}
.hero-particle--5 {
  width: 4px; height: 4px; opacity: .18;
  top: 80%; left: 70%;
  animation: heroParticleFloat 11s ease-in-out infinite;
  animation-delay: -4s;
}
.hero-particle--6 {
  width: 2px; height: 2px; opacity: .35;
  top: 50%; left: 35%;
  animation: heroParticleFloat 7s ease-in-out infinite;
  animation-delay: -1s;
}

@keyframes heroParticleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: var(--_o, .2); }
  25%      { transform: translate(15px, -20px) scale(1.3); }
  50%      { transform: translate(-10px, -35px) scale(.8); opacity: calc(var(--_o, .2) * 2); }
  75%      { transform: translate(20px, -15px) scale(1.1); }
}

/* ── Hero Content Layout ── */
.hero-content {
  position: relative; z-index: 5;
  padding: 0 4px;
  animation: authUp .7s var(--auth-ease) .15s both;
}
.hero-content__brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.hero-content__brand-icon {
  width: 32px; height: 32px; border-radius: 0;
  background: linear-gradient(135deg, var(--auth-gold), var(--auth-gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #000;
  flex-shrink: 0;
}
.hero-content__brand-name {
  font-size: 13px; font-weight: 800; color: #fff;
  letter-spacing: .8px;
}
.hero-content__title {
  font-size: 36px; font-weight: 900;
  line-height: 1.1; color: var(--auth-text);
  margin-bottom: 12px;
}
.hero-content__title span {
  background: linear-gradient(135deg, var(--auth-gold-light), var(--auth-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-content__desc {
  font-size: 14px; color: rgba(255,255,255,.4);
  line-height: 1.7; max-width: 380px;
}

/* ── Stats Grid (2x2) ── */
.hero-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 24px;
  position: relative; z-index: 5;
  animation: authUp .7s var(--auth-ease) .25s both;
}
.hero-stat-card {
  padding: 16px 18px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.hero-stat-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.hero-stat-card__val {
  display: block; font-size: 22px; font-weight: 800;
  line-height: 1; margin-bottom: 4px;
}
.hero-stat-card__lbl {
  display: block; font-size: 10px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600;
}

/* ── Feature Cards (3 cols) ── */
.hero-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 14px;
  position: relative; z-index: 5;
  animation: authUp .7s var(--auth-ease) .35s both;
}
.hero-feature-card {
  padding: 16px 14px;
  border-radius: 0;
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.hero-feature-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.hero-feature-card__icon {
  width: 36px; height: 36px; border-radius: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.hero-feature-card__title {
  display: block; font-size: 12px; font-weight: 700;
  color: #fff; margin-bottom: 3px;
}
.hero-feature-card__desc {
  display: block; font-size: 10px;
  color: rgba(255,255,255,.3); font-weight: 500;
}

/* ── Bottom Row (checkmarks) ── */
.hero-bottom-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 18px;
  position: relative; z-index: 5;
  animation: authUp .7s var(--auth-ease) .45s both;
}
.hero-bottom-row__badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.4);
  font-weight: 500;
}
.hero-bottom-row__badge svg { flex-shrink: 0; }

/* ──────────────────────────────────────
   MOCKUP CONTENT
   ────────────────────────────────────── */
.mk-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.mk-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, var(--auth-gold), var(--auth-gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #000;
}
.mk-brand {
  font-size: 11px; font-weight: 800;
  color: #fff; letter-spacing: .5px;
}

.mk-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.mk-stat {
  background: rgba(197,160,89,.055); border-radius: 8px;
  padding: 10px 8px; border: 1px solid rgba(197,160,89,.07);
  transition: border-color .3s;
}
.mk-stat:hover { border-color: rgba(197,160,89,.15); }
.mk-stat small {
  display: block; font-size: 8px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase; font-weight: 600;
  letter-spacing: .5px; margin-bottom: 4px;
}
.mk-stat strong { font-size: 13px; font-weight: 800; }
.mk-stat .g  { color: var(--auth-gold); }
.mk-stat .w  { color: #FFF; }
.mk-stat .gr { color: var(--auth-green); }

/* animated bars */
.mk-chart {
  background: rgba(197,160,89,.025); border-radius: 8px;
  padding: 10px; border: 1px solid rgba(197,160,89,.05);
  height: 80px; display: flex; align-items: flex-end; gap: 3px;
}
.mk-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: authGrow 1s var(--auth-ease-smooth) both;
}
.mk-bar:nth-child(1) { height: 30%; background: rgba(197,160,89,.25); animation-delay: .7s; }
.mk-bar:nth-child(2) { height: 52%; background: rgba(197,160,89,.35); animation-delay: .8s; }
.mk-bar:nth-child(3) { height: 38%; background: rgba(197,160,89,.28); animation-delay: .9s; }
.mk-bar:nth-child(4) { height: 68%; background: rgba(197,160,89,.45); animation-delay: 1s; }
.mk-bar:nth-child(5) { height: 88%; background: var(--auth-gold); animation-delay: 1.1s; }
.mk-bar:nth-child(6) { height: 62%; background: rgba(197,160,89,.42); animation-delay: 1.2s; }
.mk-bar:nth-child(7) { height: 48%; background: rgba(197,160,89,.32); animation-delay: 1.3s; }
.mk-bar:nth-child(8) { height: 72%; background: rgba(197,160,89,.4); animation-delay: 1.4s; }
.mk-bar:nth-child(9) { height: 56%; background: rgba(197,160,89,.34); animation-delay: 1.5s; }

/* phone mockup inner */
.mk-ph-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.mk-ph-icon {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, var(--auth-gold), var(--auth-gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #000;
}
.mk-ph-brand { font-size: 9px; font-weight: 800; color: #fff; }
.mk-ph-hero {
  background: linear-gradient(135deg, rgba(197,160,89,.1), rgba(184,150,12,.06));
  border-radius: 10px; padding: 14px; margin-bottom: 10px;
  border: 1px solid rgba(197,160,89,.12);
}
.mk-ph-hero small {
  display: block; font-size: 8px;
  color: rgba(197,160,89,.6); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.mk-ph-hero strong {
  display: block; font-size: 18px;
  font-weight: 800; color: #fff; margin-top: 3px;
}

/* register hero alternate content */
.mk-welcome { text-align: center; padding: 24px 16px; }
.mk-welcome h3 {
  font-size: 22px; font-weight: 800;
  color: #fff; margin-bottom: 6px; line-height: 1.25;
}
.mk-welcome h3 em { font-style: normal; color: var(--auth-gold); }
.mk-welcome p {
  font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 20px;
}
.mk-welcome-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.mk-welcome-card {
  background: rgba(197,160,89,.06); border-radius: 10px;
  padding: 16px 10px;
  border: 1px solid rgba(197,160,89,.08);
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.mk-welcome-card:hover {
  border-color: rgba(197,160,89,.18);
  transform: translateY(-2px);
}
.mk-welcome-card strong {
  display: block; font-size: 22px; font-weight: 800; margin-bottom: 2px;
}
.mk-welcome-card span {
  font-size: 9px; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.mk-welcome-bar {
  margin-top: 16px; background: rgba(255,255,255,.04);
  border-radius: 6px; height: 6px; overflow: hidden;
}
.mk-welcome-bar span {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--auth-gold-dark), var(--auth-gold), var(--auth-gold-light));
  width: 0;
  animation: authBarFill 2s var(--auth-ease-smooth) 1.2s forwards;
}

/* ============================================================
   REGISTER EXTRAS
   ============================================================ */

/* step dots */
.auth-steps {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 28px; position: relative; z-index: 1;
}
.auth-steps__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  transition: all .4s var(--auth-ease-smooth);
  position: relative;
}
.auth-steps__dot--active {
  background: var(--auth-gold);
  box-shadow: 0 0 12px rgba(197,160,89,.4);
  animation: authDotPulse 2s ease-in-out infinite;
}
.auth-steps__dot--done {
  background: var(--auth-green);
  box-shadow: 0 0 8px rgba(1,166,253,.25);
}
/* connector lines between dots */
.auth-steps__dot:not(:last-child)::after {
  content: ''; position: absolute;
  top: 50%; left: 100%;
  width: 8px; height: 1px;
  background: rgba(255,255,255,.06);
  transform: translateY(-50%);
}
.auth-steps__dot--done:not(:last-child)::after {
  background: rgba(1,166,253,.2);
}

/* EFEITO CUSTOMIZADO: step-transition */
/* step panels */
.auth-step {
  display: none; position: relative; z-index: 1;
}
.auth-step--active {
  display: block;
  animation: authStepSlideIn .5s var(--auth-ease) both;
}
.auth-step--exit-left {
  animation: authStepSlideOutLeft .3s var(--auth-ease-smooth) both;
}
.auth-step--exit-right {
  animation: authStepSlideOutRight .3s var(--auth-ease-smooth) both;
}

/* referral banner */
.auth-referral {
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(197,160,89,.20);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(197,160,89,.08);
  border-radius: 0;
  padding: 16px 18px; margin-bottom: 20px;
  text-align: center; position: relative; z-index: 1;
}
.auth-referral__lbl { font-size: 12px; color: #666; margin-bottom: 4px; }
.auth-referral__name {
  font-size: 16px; font-weight: 700; color: var(--auth-gold);
}
.auth-referral__role {
  font-size: 12px; color: #888; margin-top: 2px;
}

/* quiz */
.auth-quiz__title {
  font-size: 20px; font-weight: 700; color: #FFF;
  margin-bottom: 6px; text-align: center; line-height: 1.3;
}
.auth-quiz__sub {
  font-size: 13px; color: #666;
  margin-bottom: 24px; text-align: center;
}
.auth-quiz__opt {
  display: block; width: 100%;
  padding: 16px 20px; margin-bottom: 8px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,14,18,.55);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  color: #CCC; font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: all .25s var(--auth-ease-smooth);
  position: relative; overflow: hidden;
}
.auth-quiz__opt::before {
  content: ''; position: absolute;
  inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(197,160,89,.03), transparent);
  transition: opacity .3s;
}
.auth-quiz__opt:hover::before { opacity: 1; }
.auth-quiz__opt:hover {
  border-color: rgba(197,160,89,.3);
  background: rgba(197,160,89,.035);
  color: #FFF;
  transform: translateX(4px);
}
.auth-quiz__opt--sel {
  border-color: var(--auth-gold) !important;
  background: rgba(197,160,89,.08) !important;
  color: var(--auth-gold) !important;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(197,160,89,.06);
  transform: translateX(4px);
}

/* terms */
.auth-terms {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; font-size: 13px; color: #888;
  line-height: 1.5; margin-bottom: 24px;
  position: relative; z-index: 1;
}
.auth-terms input {
  margin-top: 3px; accent-color: var(--auth-gold);
  min-width: 16px; min-height: 16px; cursor: pointer;
}
.auth-terms a {
  color: var(--auth-gold); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* password strength */
.auth-strength {
  display: flex; gap: 4px; margin-top: 8px; height: 3px;
}
.auth-strength__bar {
  flex: 1; height: 100%; border-radius: 2px;
  background: rgba(255,255,255,.06);
  transition: background .3s, box-shadow .3s;
}
.auth-strength[data-level="1"] .auth-strength__bar:nth-child(1) {
  background: var(--auth-red); box-shadow: 0 0 6px rgba(239,68,68,.2);
}
.auth-strength[data-level="2"] .auth-strength__bar:nth-child(-n+2) {
  background: var(--auth-amber); box-shadow: 0 0 6px rgba(245,158,11,.15);
}
.auth-strength[data-level="3"] .auth-strength__bar:nth-child(-n+3) {
  background: var(--auth-amber); box-shadow: 0 0 6px rgba(245,158,11,.15);
}
.auth-strength[data-level="4"] .auth-strength__bar {
  background: var(--auth-green); box-shadow: 0 0 6px rgba(1,166,253,.2);
}
.auth-strength__txt {
  font-size: 11px; margin-top: 4px;
  color: var(--auth-text-muted); transition: color .3s;
}

/* ──────────────────────────────────────
   BRAND TICKER
   ────────────────────────────────────── */
.auth-ticker {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 36px; display: flex; align-items: center;
  overflow: hidden; z-index: 3; opacity: .35;
}
.auth-ticker::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.08), transparent);
}
.auth-ticker__fade-l, .auth-ticker__fade-r {
  position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.auth-ticker__fade-l {
  left: 0; background: linear-gradient(90deg, var(--auth-bg), transparent);
}
.auth-ticker__fade-r {
  right: 0; background: linear-gradient(270deg, var(--auth-bg), transparent);
}
.auth-ticker__track {
  display: flex; align-items: center; gap: 40px;
  animation: authTicker 40s linear infinite;
  white-space: nowrap;
}
.auth-ticker__track:hover { animation-play-state: paused; }
.auth-ticker__item {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.1);
  letter-spacing: 2px; text-transform: uppercase;
  flex-shrink: 0; transition: color .2s;
}
.auth-ticker__item:hover { color: rgba(197,160,89,.5); }
.auth-ticker__sep {
  width: 3px; height: 3px;
  background: rgba(197,160,89,.1);
  border-radius: 50%; flex-shrink: 0;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes authUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes authRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes authStep {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes authStepSlideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes authStepSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}
@keyframes authStepSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}
@keyframes authOrb1 {
  0%, 100% { transform: translate(0,0); }
  33%      { transform: translate(40px,30px); }
  66%      { transform: translate(-20px,50px); }
}
@keyframes authOrb2 {
  0%, 100% { transform: translate(0,0); }
  33%      { transform: translate(-50px,-30px); }
  66%      { transform: translate(30px,-40px); }
}
@keyframes authOrb3 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(60px,40px); }
}
@keyframes authGridDrift {
  from { transform: translate(0,0); }
  to   { transform: translate(64px,64px); }
}
@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes authGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes authSpin {
  to { transform: rotate(360deg); }
}
@keyframes authTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes authBarFill {
  to { width: 87%; }
}
@keyframes authPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes authRing {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* New keyframes */
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(1px); }
}
@keyframes authCheckBounce {
  0%   { transform: translateY(-50%) scale(0); }
  50%  { transform: translateY(-50%) scale(1.3); }
  100% { transform: translateY(-50%) scale(1); }
}
@keyframes authRipple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes authBtnShimmer {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}
@keyframes authFogDrift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes authGeoFloat1 {
  0%, 100% { transform: translate(0,0) rotate(15deg); }
  33%      { transform: translate(15px,-20px) rotate(25deg); }
  66%      { transform: translate(-10px,10px) rotate(5deg); }
}
@keyframes authGeoFloat2 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-20px,-15px); }
}
@keyframes authGeoFloat3 {
  0%, 100% { transform: translate(0,0); }
  33%      { transform: translate(10px,20px); }
  66%      { transform: translate(-15px,-10px); }
}
@keyframes authGeoSpin {
  to { transform: rotate(360deg); }
}
@keyframes authDotPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(197,160,89,.4); }
  50%      { box-shadow: 0 0 20px rgba(197,160,89,.6); }
}
@keyframes authCountUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:480px) {
  .auth-card { padding: 40px 32px; }
}
@media(min-width:640px) {
  .auth-card { padding: 44px 36px; }
}
@media(min-width:768px) {
  .auth-ticker { opacity: .45; }
}
@media(min-width:1024px) {
  .auth-split {
    flex-direction: row; align-items: center; gap: 80px;
  }
  .auth-form-side { max-width: 440px; flex-shrink: 0; }
  .auth-hero-side { display: flex; }
  .auth-card { padding: 44px 40px; }
}
@media(min-width:1280px) {
  .auth-split { gap: 100px; }
}

/* ──────────────────────────────────────
   REDUCED MOTION (Accessibility)
   ────────────────────────────────────── */
@media(prefers-reduced-motion: reduce) {
  .auth-scene__orb,
  .auth-scene__grid,
  .auth-scene__ring,
  .auth-scene__geo,
  .auth-scene__fog-layer,
  .auth-hero__pc,
  .auth-hero__phone,
  .auth-hero__badge,
  .auth-hero__geo,
  .auth-hero__trust-card,
  .auth-ticker__track,
  .mk-bar,
  .mk-welcome-bar span,
  .auth-showcase__bar {
    animation: none !important;
    transform: none !important;
  }
  .mk-bar { transform: scaleY(1) !important; }
  .mk-welcome-bar span { width: 87% !important; }
  .auth-form-side,
  .auth-hero-side,
  .auth-step--active {
    animation-duration: .01ms !important;
  }
  .auth-btn::before { animation: none !important; }
  .auth-cursor-light { display: none; }
  .hero-mascot__core,
  .hero-mascot__ring,
  .hero-orbit,
  .hero-particle { animation: none !important; }
  .hero-mascot { transition: none !important; }
  .hud-character,
  .hud-scanlines,
  .hud-sweep,
  .hud-reticle { display: none !important; }
  .hud-targeted { box-shadow: none !important; }
}

/* ──────────────────────────────────────
   FOCUS VISIBLE (Accessibility)
   ────────────────────────────────────── */
.auth-btn:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 2px;
}
.auth-field__wrap input:focus-visible {
  outline: none; /* handled by parent wrap styling */
}
.auth-quiz__opt:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 2px;
}
.auth-link:focus-visible,
.auth-link--gold:focus-visible {
  outline: 2px solid var(--auth-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* From Uiverse.io by BlackisPlay */ 
#ghost {
  position: relative;
  scale: 0.8;
}

#red {
  animation: upNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
  0%,
  49% {
    transform: translateY(0px);
  }
  50%,
  100% {
    transform: translateY(-10px);
  }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
  background-color: red;
}

#top0 {
  grid-area: top0;
}

#top1 {
  grid-area: top1;
}

#top2 {
  grid-area: top2;
}

#top3 {
  grid-area: top3;
}

#top4 {
  grid-area: top4;
}

#st0 {
  grid-area: st0;
}

#st1 {
  grid-area: st1;
}

#st2 {
  grid-area: st2;
}

#st3 {
  grid-area: st3;
}

#st4 {
  grid-area: st4;
}

#st5 {
  grid-area: st5;
}

#an1 {
  grid-area: an1;
  animation: flicker0 infinite 0.5s;
}

#an18 {
  grid-area: an18;
  animation: flicker0 infinite 0.5s;
}

#an2 {
  grid-area: an2;
  animation: flicker1 infinite 0.5s;
}

#an17 {
  grid-area: an17;
  animation: flicker1 infinite 0.5s;
}

#an3 {
  grid-area: an3;
  animation: flicker1 infinite 0.5s;
}

#an16 {
  grid-area: an16;
  animation: flicker1 infinite 0.5s;
}

#an4 {
  grid-area: an4;
  animation: flicker1 infinite 0.5s;
}

#an15 {
  grid-area: an15;
  animation: flicker1 infinite 0.5s;
}

#an6 {
  grid-area: an6;
  animation: flicker0 infinite 0.5s;
}

#an12 {
  grid-area: an12;
  animation: flicker0 infinite 0.5s;
}

#an7 {
  grid-area: an7;
  animation: flicker0 infinite 0.5s;
}

#an13 {
  grid-area: an13;
  animation: flicker0 infinite 0.5s;
}

#an9 {
  grid-area: an9;
  animation: flicker1 infinite 0.5s;
}

#an10 {
  grid-area: an10;
  animation: flicker1 infinite 0.5s;
}

#an8 {
  grid-area: an8;
  animation: flicker0 infinite 0.5s;
}

#an11 {
  grid-area: an11;
  animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {
  0%,
  49% {
    background-color: red;
  }
  50%,
  100% {
    background-color: transparent;
  }
}

@keyframes flicker1 {
  0%,
  49% {
    background-color: transparent;
  }
  50%,
  100% {
    background-color: red;
  }
}

#eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}

#eye::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}

#eye1::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye1::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#pupil {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

#pupil1 {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
  0%,
  49% {
    transform: translateX(0px);
  }
  50%,
  99% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

#shadow {
  background-color: black;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
  0%,
  49% {
    opacity: 0.5;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}

/* ═══════════════════════════════════════════════
   LIGHT MODE OVERRIDES — Login / Register
   ═══════════════════════════════════════════════ */
html.light .auth-form-side { background: #FFF !important; }
html.light .auth-form-side p,
html.light .auth-form-side .auth-form-header p { color: #666 !important; }
html.light .auth-header__logo,
html.light .auth-form-side img[alt*="iHUB"],
html.light .auth-form-side img[alt*="IHUB"] { filter: brightness(0) saturate(100%) !important; }
html.light .auth-field__wrap { background: #F8F9FA !important; border-color: #DDD !important; }
html.light .auth-field__wrap:hover { border-color: #01A6FD !important; }
html.light .auth-field__wrap input { color: #111 !important; -webkit-text-fill-color: #111 !important; }
html.light .auth-field__wrap input::placeholder { color: #AAA !important; }
html.light .auth-field__wrap input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #F8F9FA inset !important; -webkit-text-fill-color: #111 !important; }
html.light .auth-field__label { color: #005793 !important; }
html.light .auth-field__icon { color: #999 !important; }
html.light .auth-field__toggle { color: #999 !important; }
html.light .auth-field__check { border-color: #DDD !important; }
html.light .auth-check__box { border-color: #DDD !important; background: #F8F9FA !important; }
html.light .auth-row { color: #666 !important; }
html.light .auth-check span { color: #666 !important; }
html.light .auth-link { color: #005793 !important; }
html.light .auth-link--gold { color: #005793 !important; }
html.light .auth-footer-link { color: #666 !important; }
html.light .auth-footer-link a { color: #005793 !important; }
html.light .auth-btn { background: #FFF !important; color: #111 !important; border: 2px solid #DDD !important; border-bottom: 3px solid #C5A059 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
html.light .auth-btn:hover { border-color: #01A6FD !important; }
html.light .glow-btn-inner { background: #FFF !important; color: #111 !important; }
html.light .glow-spin-intense::before,
html.light .glow-spin-inside::before { background: linear-gradient(90deg, #C5A059 20%, #0000 45% 55%, #01A6FD 80%) !important; }
html.light .auth-hero-side { background: #F0F4F8 !important; border-radius: 20px !important; padding: 40px !important; overflow: hidden !important; }
html.light .auth-hero__robot-wrap { background: transparent !important; }
html.light .auth-hero__robot-glow,
html.light .auth-hero__glow,
html.light .auth-hero__glow--1,
html.light .auth-hero__glow--2,
html.light .hero-orbit,
html.light .hero-orbit--1,
html.light .hero-orbit--2,
html.light .hero-orbit--3,
html.light .hud-sweep { display: none !important; opacity: 0 !important; }
html.light .hero-content { color: #111 !important; }
html.light .hero-content__desc { color: #555 !important; }
html.light .hero-content__title { color: #111 !important; }
html.light .hero-content__title span { color: #01A6FD !important; }
html.light .hero-content__desc { color: #555 !important; }
html.light .hero-stat-card { background: #FFF !important; border-color: #E0E0E0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
html.light .hero-stat-card__val { color: #01A6FD !important; }
html.light .hero-stat-card__lbl { color: #888 !important; }
html.light .hero-feature-card { background: #FFF !important; border-color: #E0E0E0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
html.light .hero-feature-card span { color: #333 !important; }
html.light .hero-feature-card span:last-child { color: #888 !important; }
html.light .hero-footer span { color: #666 !important; }
html.light .banter-loader__box:before { background: #01A6FD !important; }
html.light .hero-stats-grid { border-color: #E0E0E0 !important; }
html.light .auth-step-label { color: #888 !important; }
html.light .auth-step-title { color: #111 !important; }
html.light .auth-quiz__opt { background: #F5F5F5 !important; border-color: #E0E0E0 !important; color: #333 !important; }
html.light .auth-quiz__opt:hover { border-color: #01A6FD !important; }
html.light .auth-quiz__opt.selected { border-color: #01A6FD !important; background: rgba(1,166,253,0.06) !important; }
html.light .auth-btn-ghost { color: #888 !important; }
html.light .auth-btn-ghost:hover { color: #01A6FD !important; }
html.light .auth-flash { background: #FFF !important; border-color: #E0E0E0 !important; }
html.light .auth-flash--error { border-color: #FD1A27 !important; }

/* Register hero — PC mockup + cards no light mode */
html.light .auth-hero__scene { background: transparent !important; }
html.light .auth-hero__geo { display: none !important; }
html.light .auth-hero__pc { background: #FFF !important; border-color: #DDD !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }
html.light .auth-hero__pc-bar { background: #F5F5F5 !important; border-color: #E0E0E0 !important; }
html.light .auth-hero__pc-url { color: #888 !important; }
html.light .auth-hero__pc-body { background: #FAFBFC !important; }
html.light .auth-hero__pc-body h3,
html.light .mk-welcome h3 { color: #111 !important; }
html.light .auth-hero__pc-body p,
html.light .mk-welcome p { color: #666 !important; }
html.light .mk-welcome-card { background: #FFF !important; border-color: #E0E0E0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; }
html.light .mk-welcome-card span { color: #666 !important; }
html.light .mk-welcome-bar { background: #E0E0E0 !important; }
html.light .mk-welcome-bar span { background: linear-gradient(90deg, #005793, #01A6FD) !important; }
html.light .auth-hero__phone { background: #FFF !important; border-color: #DDD !important; }
html.light .auth-hero__phone-body { background: #FAFBFC !important; }
html.light .auth-hero__badge { background: #FFF !important; border-color: #DDD !important; color: #111 !important; }
html.light .auth-hero__trust-card { background: #FFF !important; border-color: #DDD !important; }
html.light .auth-hero__trust-card span { color: #333 !important; }
html.light .mk-stat { background: #FFF !important; border-color: #E0E0E0 !important; }
html.light .mk-stat strong { color: #01A6FD !important; }
html.light .mk-stat span { color: #666 !important; }

/* Showcase (idle popup) light mode */
html.light .hud-sc-overlay { background: rgba(255,255,255,0.96) !important; }
html.light .sc-title { color: #111 !important; }
html.light .sc-title span { color: #01A6FD !important; }
html.light .sc-close { background: rgba(0,0,0,0.06) !important; color: #333 !important; }
html.light .sc-close:hover { background: rgba(0,0,0,0.12) !important; }
html.light .sc-mockup-frame { background: #FFF !important; border-color: #DDD !important; box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important; }
html.light .sc-sidebar { background: #F5F5F5 !important; border-color: #E0E0E0 !important; }
html.light .sc-sidebar-logo { background: rgba(1,166,253,0.15) !important; }
html.light .sc-item { background: rgba(0,0,0,0.04) !important; }
html.light .sc-item.active { background: rgba(1,166,253,0.1) !important; border-left-color: #01A6FD !important; }
html.light .sc-main { background: #FAFBFC !important; }
html.light .sc-kpi { background: #FFF !important; border-color: #E0E0E0 !important; }
html.light .sc-kpi-g { border-top-color: #01A6FD !important; }
html.light .sc-kpi-y { border-top-color: #C5A059 !important; }
html.light .sc-chart { background: #FFF !important; border-color: #E0E0E0 !important; }
html.light .sc-chart-line { background: linear-gradient(180deg, rgba(1,166,253,0.2) 0%, transparent 100%) !important; }