/* ==========================================================================
   ZENITH CROWN CAPITAL — Auth Experience
   style.css  ·  shared by login.html, register.html, thankyou.html
   Palette: #FFFFFF  #D4AF37  #F5D76E  #071426  #030914  #F7F5EF
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --white:#FFFFFF;
  --gold:#D4AF37;
  --gold-light:#F5D76E;
  --navy:#071426;
  --ink:#030914;
  --pearl:#F7F5EF;

  --gold-grad:linear-gradient(135deg,#F5D76E 0%,#D4AF37 45%,#B8912A 100%);
  --gold-soft:rgba(212,175,55,.16);
  --gold-line:rgba(212,175,55,.22);
  --glass:rgba(10,24,42,.55);
  --glass-2:rgba(255,255,255,.045);
  --text:#EFEAE0;
  --text-dim:rgba(247,245,239,.62);
  --danger:#E4614F;
  --success:#C9A227;

  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;

  --shadow-card:
    0 40px 90px -30px rgba(0,0,0,.85),
    0 2px 0 0 rgba(255,255,255,.05) inset,
    0 -30px 60px -40px rgba(212,175,55,.35) inset;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter","DM Sans",system-ui,-apple-system,sans-serif;
  --font-ui:"Montserrat","Inter",system-ui,sans-serif;
}

@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(120% 90% at 50% -10%, #0E2440 0%, transparent 55%),
    radial-gradient(90% 70% at 85% 105%, #10243C 0%, transparent 60%),
    linear-gradient(180deg,var(--navy) 0%, var(--ink) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--gold-light); text-decoration:none; }

::selection{ background:rgba(212,175,55,.3); color:#fff; }

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:6px;
}

/* Custom scrollbar (register page can scroll) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--gold),#8A6C1E);
  border-radius:20px;
  border:3px solid var(--ink);
}

/* --------------------------------------------------------------------------
   3. BACKGROUND STACK (injected by auth.js)
   -------------------------------------------------------------------------- */
.bg-stack{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* 3a. Blurred financial photograph layer.
   Swap the data-image for your own asset:
   .bg-photo{ background-image:url("assets/finance-bg.jpg"); } */
.bg-photo{
  position:absolute;
  inset:-6%;
  background-size:cover;
  background-position:center;
  filter:blur(26px) saturate(120%) brightness(.55);
  opacity:.5;
  transform:scale(1.08);
}

.bg-veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,20,38,.82) 0%, rgba(3,9,20,.94) 100%),
    radial-gradient(60% 50% at 50% 42%, rgba(212,175,55,.16) 0%, transparent 70%);
}

/* 3b. Financial grid */
.bg-grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(rgba(212,175,55,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.055) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
  animation:gridDrift 44s linear infinite;
}
@keyframes gridDrift{ to{ background-position:78px 78px, 78px 78px; } }

/* 3c. Chart line art */
.bg-chart{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(1600px,140%);
  transform:translateX(-50%);
  opacity:.5;
}
.bg-chart .chart-area{ fill:url(#zccArea); }
.bg-chart .chart-line{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.75;
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  animation:drawLine 4.2s var(--ease-out) .5s forwards;
}
.bg-chart .candle{ fill:rgba(212,175,55,.35); }
.bg-chart .wick{ stroke:rgba(212,175,55,.35); stroke-width:1; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

/* 3d. Blurred gold orbs */
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.34;
  will-change:transform;
}
.orb-1{
  width:460px;height:460px;top:-12%;left:-8%;
  background:radial-gradient(circle at 35% 35%, var(--gold-light), rgba(212,175,55,0) 68%);
  animation:float1 19s ease-in-out infinite;
}
.orb-2{
  width:560px;height:560px;bottom:-18%;right:-12%;
  background:radial-gradient(circle at 60% 40%, var(--gold), rgba(212,175,55,0) 70%);
  opacity:.26;
  animation:float2 25s ease-in-out infinite;
}
.orb-3{
  width:300px;height:300px;top:44%;right:16%;
  background:radial-gradient(circle at 50% 50%, #3E7BD1, rgba(62,123,209,0) 70%);
  opacity:.2;
  animation:float1 31s ease-in-out infinite reverse;
}
@keyframes float1{
  50%{ transform:translate3d(60px,44px,0) scale(1.1); }
}
@keyframes float2{
  50%{ transform:translate3d(-70px,-50px,0) scale(1.08); }
}

/* 3e. 3D floating shapes */
.shape{
  position:absolute;
  border:1px solid var(--gold-line);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(245,215,110,.10), rgba(212,175,55,0));
  box-shadow:0 0 40px rgba(212,175,55,.12) inset;
  will-change:transform;
  animation:spin3d var(--dur,26s) linear infinite;
}
.shape.ring{ border-radius:50%; background:none; }
.shape.diamond{ border-radius:4px; }
@keyframes spin3d{
  0%  { transform:rotateX(0deg)   rotateY(0deg)   translateZ(0); }
  50% { transform:rotateX(180deg) rotateY(90deg)  translateZ(30px); }
  100%{ transform:rotateX(360deg) rotateY(360deg) translateZ(0); }
}

/* 3f. Particle canvas */
#particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* 3g. Cursor spotlight + mouse-follow gold glow */
#spotlight{
  position:fixed;
  top:0;left:0;
  width:640px;height:640px;
  margin:-320px 0 0 -320px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background:radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,.06) 38%, transparent 66%);
  transition:opacity .5s var(--ease);
  will-change:transform;
}
#spotlight.on{ opacity:1; }

#cursor-dot{
  position:fixed;
  top:0;left:0;
  width:8px;height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 14px 3px rgba(212,175,55,.75);
  pointer-events:none;
  z-index:60;
  opacity:0;
  transition:opacity .4s var(--ease), width .25s var(--ease), height .25s var(--ease);
  will-change:transform;
}
#cursor-dot.on{ opacity:.9; }
#cursor-dot.hot{ width:16px; height:16px; margin:-8px 0 0 -8px; }

/* --------------------------------------------------------------------------
   4. PAGE LOADER
   -------------------------------------------------------------------------- */
#loader{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:var(--ink);
  transition:opacity .7s var(--ease), visibility .7s;
  /* Safety net: the loader clears itself even if JavaScript never runs */
  animation:loaderOut .7s var(--ease) 2.2s forwards;
}
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; } }
#loader.done{ opacity:0; visibility:hidden; }
.loader-mark{
  width:64px;height:64px;
  border-radius:50%;
  border:1.5px solid rgba(212,175,55,.18);
  border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. LAYOUT SHELL
   -------------------------------------------------------------------------- */
.auth-shell{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,4vw,56px) clamp(16px,4vw,32px);
  perspective:1400px;
}

.auth-wrap{
  width:100%;
  max-width:520px;
}
.auth-wrap--wide{ max-width:820px; }

/* --------------------------------------------------------------------------
   6. GLASS CARD
   -------------------------------------------------------------------------- */
.auth-card{
  position:relative;
  padding:clamp(26px,4.4vw,46px) clamp(20px,4vw,44px);
  border-radius:var(--r-lg);
  border:1px solid var(--gold-line);
  background:
    linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 42%, rgba(3,9,20,.5) 100%),
    var(--glass);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--shadow-card);
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .5s var(--ease);
  opacity:0;
  animation:cardIn 1s var(--ease-out) .25s forwards;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(34px) scale(.965); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

/* Animated gold border */
.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ang),
      transparent 0 26%,
      rgba(212,175,55,.65) 38%,
      var(--gold-light) 50%,
      rgba(212,175,55,.65) 62%,
      transparent 74% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:borderSpin 7s linear infinite;
  pointer-events:none;
}
@keyframes borderSpin{ to{ --ang:360deg; } }

/* Glass reflection */
.auth-card::after{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:46%;
  border-radius:var(--r-lg) var(--r-lg) 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent 85%);
  pointer-events:none;
}

/* Corner glow */
.corner-glow{
  position:absolute;
  width:200px;height:200px;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  background:radial-gradient(circle, rgba(212,175,55,.5), transparent 70%);
  opacity:.4;
}
.corner-glow.tl{ top:-90px; left:-70px; }
.corner-glow.br{ bottom:-90px; right:-70px; opacity:.28; }

.card-inner{ position:relative; z-index:3; transform-style:preserve-3d; }

/* --------------------------------------------------------------------------
   7. BRAND + HEADINGS
   -------------------------------------------------------------------------- */
.brand{
  text-align:center;
  margin-bottom:clamp(18px,2.6vw,26px);
  transform:translateZ(38px);
}
.brand img{
  width:clamp(120px,26vw,168px);
  height:auto;
  filter:drop-shadow(0 10px 26px rgba(212,175,55,.35));
  opacity:0;
  animation:logoIn 1.1s var(--ease-out) .45s forwards;
}
@keyframes logoIn{
  from{ opacity:0; transform:translateY(-14px) scale(.94); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

.divider-gold{
  width:74px;
  height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  position:relative;
}
.divider-gold::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:6px;height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,.9);
}

.auth-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.85rem,4.6vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:20px 0 8px;
  text-align:center;
  color:var(--white);
  background:linear-gradient(180deg,#FFFFFF 30%, #E3D7B4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transform:translateZ(28px);
}
.auth-sub{
  text-align:center;
  color:var(--text-dim);
  font-size:clamp(.88rem,1.6vw,.97rem);
  margin:0 auto clamp(22px,3vw,30px);
  max-width:42ch;
  line-height:1.6;
  transform:translateZ(18px);
}

/* Text reveal */
.reveal{
  opacity:0;
  animation:reveal .9s var(--ease-out) forwards;
}
.reveal.d1{ animation-delay:.55s; }
.reveal.d2{ animation-delay:.68s; }
.reveal.d3{ animation-delay:.8s; }
@keyframes reveal{
  from{ opacity:0; transform:translateY(16px); filter:blur(5px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* --------------------------------------------------------------------------
   8. FORM
   -------------------------------------------------------------------------- */
.field{
  margin-bottom:18px;
  opacity:0;
  animation:fieldUp .7s var(--ease-out) forwards;
}
@keyframes fieldUp{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

.field-label{
  display:block;
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(247,245,239,.5);
  margin-bottom:8px;
  transition:color .3s var(--ease);
}
.field:focus-within .field-label{ color:var(--gold-light); }

.field-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:54px;
  border-radius:var(--r-md);
  border:1px solid rgba(212,175,55,.2);
  background:var(--glass-2);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.field-wrap::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-1px;
  height:1px;
  background:var(--gold-grad);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .45s var(--ease-out);
}
.field-wrap:focus-within{
  border-color:rgba(212,175,55,.72);
  background:rgba(212,175,55,.055);
  box-shadow:0 0 0 4px rgba(212,175,55,.09), 0 12px 30px -16px rgba(212,175,55,.6);
}
.field-wrap:focus-within::after{ transform:scaleX(1); }

.field-wrap > i{
  font-size:1.02rem;
  color:rgba(212,175,55,.6);
  transition:color .3s var(--ease), transform .3s var(--ease);
  flex:none;
}
.field-wrap:focus-within > i{ color:var(--gold-light); transform:scale(1.08); }

.field-wrap input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--pearl);
  font-family:var(--font-body);
  font-size:1rem;
  letter-spacing:.01em;
}
.field-wrap input::placeholder{ color:rgba(247,245,239,.3); }
.field-wrap input:-webkit-autofill,
.field-wrap input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--pearl);
  -webkit-box-shadow:0 0 0 1000px #0A1B30 inset;
  caret-color:var(--pearl);
}

.toggle-pass{
  flex:none;
  border:0;
  background:transparent;
  color:rgba(247,245,239,.42);
  font-size:1.05rem;
  line-height:1;
  padding:6px;
  cursor:pointer;
  border-radius:8px;
  transition:color .3s var(--ease);
}
.toggle-pass:hover{ color:var(--gold-light); }

/* Validation states */
.field.is-invalid .field-wrap{
  border-color:rgba(228,97,79,.75);
  box-shadow:0 0 0 4px rgba(228,97,79,.1);
  animation:shake .45s var(--ease);
}
.field.is-invalid .field-wrap > i{ color:var(--danger); }
.field.is-valid .field-wrap{ border-color:rgba(212,175,55,.5); }
@keyframes shake{
  20%{ transform:translateX(-6px); }
  45%{ transform:translateX(5px); }
  70%{ transform:translateX(-3px); }
  100%{ transform:none; }
}

.field-msg{
  display:block;
  min-height:0;
  max-height:0;
  overflow:hidden;
  font-size:.79rem;
  color:var(--danger);
  margin-top:0;
  opacity:0;
  transition:max-height .3s var(--ease), opacity .3s var(--ease), margin-top .3s var(--ease);
}
.field.is-invalid .field-msg{
  max-height:44px;
  opacity:1;
  margin-top:7px;
}

/* Password strength */
.strength{
  margin-top:10px;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .35s var(--ease), max-height .35s var(--ease);
}
.strength.show{ opacity:1; max-height:50px; }
.strength-bars{ display:flex; gap:6px; }
.strength-bars span{
  flex:1;
  height:3px;
  border-radius:3px;
  background:rgba(247,245,239,.12);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.strength-bars span.on{
  background:var(--gold-grad);
  box-shadow:0 0 10px rgba(212,175,55,.6);
}
.strength-bars.weak span.on{ background:linear-gradient(90deg,#E4614F,#C4432F); box-shadow:none; }
.strength-bars.fair span.on{ background:linear-gradient(90deg,#E0A94F,#C98A2A); box-shadow:none; }
.strength-text{
  display:block;
  margin-top:7px;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--text-dim);
}

/* Row of options */
.form-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:4px 0 26px;
}

/* Custom checkbox */
.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:.86rem;
  color:var(--text-dim);
  line-height:1.5;
  user-select:none;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  flex:none;
  width:19px;height:19px;
  margin-top:1px;
  border-radius:5px;
  border:1px solid rgba(212,175,55,.42);
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  transition:all .3s var(--ease);
}
.check .box::after{
  content:"";
  width:9px;height:5px;
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(0);
  transition:transform .28s var(--ease-out);
}
.check input:checked + .box{
  background:var(--gold-grad);
  border-color:var(--gold-light);
  box-shadow:0 0 14px rgba(212,175,55,.5);
}
.check input:checked + .box::after{ transform:rotate(-45deg) scale(1); }
.check input:focus-visible + .box{ outline:2px solid var(--gold-light); outline-offset:3px; }
.check a{ border-bottom:1px solid rgba(212,175,55,.35); }

/* Link with gold underline sweep */
.link-gold{
  position:relative;
  font-size:.86rem;
  color:var(--gold-light);
  transition:color .3s var(--ease);
}
.link-gold::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.link-gold:hover{ color:var(--white); }
.link-gold:hover::after{ transform:scaleX(1); transform-origin:left; }

/* --------------------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------------------- */
.btn-gold{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:16px 28px;
  border:0;
  border-radius:var(--r-md);
  cursor:pointer;
  overflow:hidden;
  font-family:var(--font-ui);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1B1405;
  background:var(--gold-grad);
  box-shadow:0 14px 34px -14px rgba(212,175,55,.75), 0 1px 0 rgba(255,255,255,.4) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  will-change:transform;
}
.btn-gold span{ position:relative; z-index:2; }
.btn-gold i{
  position:relative;
  z-index:2;
  font-size:1rem;
  transition:transform .35s var(--ease-out);
}
.btn-gold::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transition:left .75s var(--ease-out);
}
.btn-gold:hover{
  transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow:0 22px 46px -16px rgba(212,175,55,.85), 0 0 0 1px rgba(245,215,110,.55);
}
.btn-gold:hover::before{ left:130%; }
.btn-gold:hover i{ transform:translateX(6px); }
.btn-gold:active{ transform:translateY(-1px) scale(.99); }

.btn-gold.loading{ pointer-events:none; color:transparent; }
.btn-gold.loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:22px;height:22px;
  border-radius:50%;
  border:2px solid rgba(27,20,5,.25);
  border-top-color:#1B1405;
  animation:spin .8s linear infinite;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  padding:15px 26px;
  border-radius:var(--r-md);
  border:1px solid rgba(212,175,55,.35);
  background:rgba(255,255,255,.03);
  color:var(--pearl);
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.btn-ghost:hover{
  border-color:var(--gold);
  color:var(--white);
  background:rgba(212,175,55,.1);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   10. FOOTNOTES
   -------------------------------------------------------------------------- */
.switch-line{
  margin:24px 0 0;
  text-align:center;
  font-size:.9rem;
  color:var(--text-dim);
}
.switch-line a{ font-weight:600; margin-left:6px; }

.secure-note{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(212,175,55,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:.78rem;
  letter-spacing:.03em;
  color:rgba(247,245,239,.42);
}
.secure-note i{ color:var(--gold); font-size:.92rem; }

/* --------------------------------------------------------------------------
   11. TOAST
   -------------------------------------------------------------------------- */
#toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:120;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(440px,calc(100vw - 32px));
  padding:15px 20px;
  border-radius:var(--r-md);
  border:1px solid var(--gold-line);
  background:rgba(7,20,38,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  color:var(--pearl);
  font-size:.88rem;
  transform:translate(-50%,140%);
  transition:transform .55s var(--ease-out);
}
#toast.show{ transform:translate(-50%,0); }
#toast i{ color:var(--gold); font-size:1.1rem; }

/* --------------------------------------------------------------------------
   12. REGISTER — two column grid
   -------------------------------------------------------------------------- */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
}
.grid-2 .span-2{ grid-column:1 / -1; }

@media (max-width:767.98px){
  .grid-2{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   13. THANK YOU PAGE
   -------------------------------------------------------------------------- */
.success-stage{
  position:relative;
  width:clamp(128px,24vw,162px);
  height:clamp(128px,24vw,162px);
  margin:0 auto clamp(26px,4vw,34px);
  display:grid;
  place-items:center;
  transform:translateZ(46px);
}
.success-core{
  position:relative;
  z-index:3;
  width:38%;
  height:38%;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 34% 28%, #FBEAB0 0%, var(--gold-light) 28%, var(--gold) 62%, #9C7A1E 100%);
  box-shadow:
    0 24px 60px -18px rgba(212,175,55,.75),
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 -14px 30px -10px rgba(0,0,0,.4) inset;
  transform:scale(0);
  animation:popIn .95s var(--ease-out) .5s forwards;
}
@keyframes popIn{
  0%  { transform:scale(0) rotate(-45deg); }
  62% { transform:scale(1.12) rotate(6deg); }
  100%{ transform:scale(1) rotate(0); }
}
.success-core svg{ width:70%; height:70%; }
.success-core path{
  fill:none;
  stroke:#132038;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:60;
  stroke-dashoffset:60;
  animation:drawCheck .65s var(--ease-out) 1.15s forwards;
}
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

.ring{
  position:absolute;
  inset:-8%;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.45);
  animation:pulseRing 3.2s var(--ease-out) infinite;
}
.ring.r2{ inset:-22%; animation-delay:.9s; }
.ring.r3{ inset:-36%; animation-delay:1.8s; }
@keyframes pulseRing{
  0%  { transform:scale(.88); opacity:.85; }
  70% { opacity:0; }
  100%{ transform:scale(1.32); opacity:0; }
}

.glow-halo{
  position:absolute;
  inset:-45%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.42), transparent 66%);
  filter:blur(28px);
  animation:haloBreathe 4.5s ease-in-out infinite;
}
@keyframes haloBreathe{
  50%{ transform:scale(1.14); opacity:.75; }
}

.status-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:clamp(26px,4vw,36px) 0 clamp(26px,4vw,34px);
}
.status-card{
  position:relative;
  padding:20px 14px;
  border-radius:var(--r-md);
  border:1px solid rgba(212,175,55,.18);
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  text-align:center;
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  opacity:0;
  animation:fieldUp .8s var(--ease-out) forwards;
}
.status-card:nth-child(1){ animation-delay:1.35s; }
.status-card:nth-child(2){ animation-delay:1.48s; }
.status-card:nth-child(3){ animation-delay:1.61s; }
.status-card:hover{
  transform:translateY(-5px) rotateX(5deg);
  border-color:rgba(212,175,55,.5);
  box-shadow:0 20px 40px -22px rgba(212,175,55,.6);
}
.status-card i{
  font-size:1.25rem;
  color:var(--gold);
  display:block;
  margin-bottom:10px;
}
.status-card b{
  display:block;
  font-family:var(--font-ui);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(212,175,55,.85);
  margin-bottom:6px;
}
.status-card span{
  display:block;
  font-size:.85rem;
  color:var(--text);
  line-height:1.4;
}

.cta-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:360px;
  margin:0 auto;
}

#confetti{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
}

@media (max-width:575.98px){
  .status-grid{ grid-template-columns:1fr; gap:10px; }
  .status-card{ display:flex; align-items:center; gap:14px; text-align:left; padding:15px 16px; }
  .status-card i{ margin:0; }
  .status-card .sc-body{ flex:1; }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE + MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (max-width:575.98px){
  .auth-shell{ padding:26px 16px; }
  .auth-card{ padding:26px 18px; border-radius:18px; }
  .field-wrap{ height:52px; }
  .field-wrap input{ font-size:16px; }   /* stops iOS zoom on focus */
  .btn-gold, .btn-ghost{ min-height:54px; letter-spacing:.1em; }
  .form-row-between{ margin-bottom:22px; }
}

@media (max-width:991.98px){
  #spotlight, #cursor-dot{ display:none; }
  .bg-photo{ filter:blur(18px) brightness(.5); }
  .orb{ filter:blur(55px); }
  .shape{ display:none; }
}

@media (hover:none){
  .btn-gold:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .auth-card, .field, .status-card, .brand img, .reveal{ opacity:1 !important; transform:none !important; }
  .success-core{ transform:scale(1) !important; }
  .bg-chart .chart-line, .success-core path{ stroke-dashoffset:0 !important; }
}