@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root{
  --quantix-bg-0:#0B0F1A;
  --quantix-bg-1:#121C2F;
  --quantix-panel:rgba(20,25,40,0.72);
  --quantix-panel-border:rgba(148,163,184,0.16);
  --quantix-blue:#3B82F6;
  --quantix-blue-soft:rgba(59,130,246,0.22);
  --quantix-red:#FF4B6E;
  --quantix-red-deep:#D61F3C;
  --quantix-text:#F3F7FF;
  --quantix-muted:#95A7C4;
  --quantix-grid:rgba(132,150,191,0.08);
}

body.quantix-auth-page{
  margin:0;
  min-height:100vh;
  color:var(--quantix-text);
  background:linear-gradient(135deg,var(--quantix-bg-0) 0%, #0d1424 35%, var(--quantix-bg-1) 100%);
  font-family:Inter, sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
}

.quantix-auth-shell{
  position:relative;
  min-height:100vh;
  isolation:isolate;
}

.quantix-auth-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(380px,0.95fr);
  min-height:100vh;
}

.quantix-auth-bg,
.quantix-auth-grid::before,
.quantix-auth-grid::after{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.quantix-auth-grid::before{
  content:"";
  background-image:
    linear-gradient(var(--quantix-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--quantix-grid) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.65;
  mask-image:radial-gradient(circle at center, rgba(0,0,0,1) 45%, rgba(0,0,0,.2) 100%);
}

.quantix-auth-grid::after{
  content:"";
  background:radial-gradient(circle at 12% 18%, rgba(59,130,246,0.18), transparent 28%), radial-gradient(circle at 82% 20%, rgba(255,75,110,0.14), transparent 24%), radial-gradient(circle at 62% 70%, rgba(59,130,246,0.14), transparent 30%);
}

.quantix-auth-bg{
  z-index:0;
}

.quantix-particle-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.92;
}

.quantix-hero,
.quantix-auth-aside{
  position:relative;
  z-index:1;
}

.quantix-hero{
  padding:72px 68px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:36px;
}

.quantix-brand-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,23,42,0.54);
  border:1px solid rgba(148,163,184,0.14);
  color:#dbe8ff;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,0.16);
}

.quantix-brand-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--quantix-blue);
  box-shadow:0 0 14px var(--quantix-blue);
}

.quantix-hero-copy{
  max-width:760px;
}

.quantix-hero-copy h1{
  margin:20px 0 16px;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:clamp(44px, 5.8vw, 82px);
  line-height:.96;
  letter-spacing:-.045em;
}

.quantix-hero-copy .quantix-hero-subtitle{
  margin:0 0 18px;
  color:#b7caf0;
  font-size:clamp(20px, 2vw, 28px);
  font-weight:600;
  line-height:1.25;
}

.quantix-hero-copy .quantix-hero-description{
  margin:0;
  max-width:680px;
  color:var(--quantix-muted);
  font-size:16px;
  line-height:1.75;
}

.quantix-chart-overlay{
  position:relative;
  height:240px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,0.1);
  background:linear-gradient(180deg, rgba(14,20,38,0.12), rgba(14,20,38,0.02));
  overflow:hidden;
}

.quantix-chart-line{
  position:absolute;
  inset:18px 18px 18px 18px;
  opacity:.6;
}

.quantix-chart-line svg{
  width:100%;
  height:100%;
}

.quantix-chart-line path{
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(59,130,246,0.3));
}

.quantix-chart-line.line-a path{stroke:rgba(59,130,246,0.9); animation:quantixLineFloatA 12s linear infinite;}
.quantix-chart-line.line-b path{stroke:rgba(255,75,110,0.62); animation:quantixLineFloatB 15s linear infinite;}
.quantix-chart-line.line-c path{stroke:rgba(125,211,252,0.55); animation:quantixLineFloatC 13s linear infinite;}

.quantix-chart-axis{
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,0.16), transparent);
}

.quantix-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.quantix-feature-card{
  position:relative;
  padding:20px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(19,29,48,0.82), rgba(15,20,35,0.6));
  border:1px solid rgba(148,163,184,0.14);
  box-shadow:0 20px 40px rgba(0,0,0,0.18);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.quantix-feature-card:hover,
.quantix-feature-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(59,130,246,0.32);
  box-shadow:0 20px 50px rgba(59,130,246,0.12), 0 0 0 1px rgba(59,130,246,0.1) inset;
  outline:none;
}

.quantix-feature-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(59,130,246,0.3), rgba(255,75,110,0.18));
  color:#f8fbff;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
}

.quantix-feature-copy h3{
  margin:0 0 8px;
  font-size:15px;
  color:#f8fbff;
}

.quantix-feature-copy p{
  margin:0;
  color:var(--quantix-muted);
  line-height:1.6;
  font-size:13px;
}

.quantix-auth-aside{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 34px;
}

.quantix-login-card{
  position:relative;
  width:min(100%, 470px);
  padding:34px 32px 28px;
  background:rgba(20,25,40,0.7);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-radius:16px;
  border:1px solid var(--quantix-panel-border);
  box-shadow:0 26px 80px rgba(0,0,0,0.36), inset 0 0 0 1px rgba(255,255,255,0.02);
  overflow:hidden;
}

.quantix-login-card-glow{
  position:absolute;
  inset:-30% auto auto -20%;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,0.2), transparent 66%);
  pointer-events:none;
}

.quantix-login-head{position:relative; z-index:1;}
.quantix-login-eyebrow{
  display:inline-block;
  color:#8fb6ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.quantix-login-head h2{
  margin:12px 0 10px;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-.04em;
}

.quantix-login-head p{
  margin:0 0 24px;
  color:var(--quantix-muted);
  line-height:1.65;
}

.quantix-auth-group{margin-bottom:14px;}
.quantix-auth-input{
  min-height:52px;
  border-radius:14px;
  background:rgba(8,13,25,0.82);
  border:1px solid rgba(148,163,184,0.16);
  color:#f6fbff;
}

.quantix-auth-input:focus{
  border-color:rgba(59,130,246,0.6);
  box-shadow:0 0 0 3px rgba(59,130,246,0.12);
}

.quantix-terms-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:14px 0 18px;
  color:#b6c6e0;
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
}

.quantix-terms-row input{
  margin-top:3px;
  accent-color:var(--quantix-red);
}

.quantix-login-btn{
  position:relative;
  width:100%;
  min-height:56px;
  border:none;
  border-radius:16px;
  color:#fff3f5;
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(135deg, #FF4B6E, #D61F3C);
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(214,31,60,0.32);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.quantix-login-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,75,110,0.12), 0 20px 40px rgba(214,31,60,0.42), 0 0 24px rgba(255,75,110,0.34);
  animation:quantixPulseGlow 1.4s infinite;
}

.quantix-login-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.quantix-login-btn-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 44%, transparent 78%);
  transform:translateX(-120%);
}

.quantix-login-btn:hover .quantix-login-btn-shine{animation:quantixButtonShine .9s ease;}
.quantix-login-btn.is-busy .quantix-login-btn-shine{display:none;}

.quantix-login-links{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.quantix-login-links a{
  color:#9fc0ff;
  text-decoration:none;
  font-size:13px;
}

.quantix-login-links a:hover{text-decoration:underline;}

.quantix-disclaimer{
  margin-top:18px;
  color:#7f90ad;
  font-size:12px;
  line-height:1.65;
}

.quantix-form-msg{
  min-height:20px;
  margin-top:14px;
  font-size:13px;
  color:#9fb0cb;
}

.quantix-form-msg.is-success{color:#79f0b2;}
.quantix-form-msg.is-error{color:#ff9caf;}

body.quantix-auth-page.quantix-auth-outro .quantix-auth-grid{
  transform:scale(.988);
  opacity:0;
  filter:blur(8px);
  transition:transform .45s ease, opacity .45s ease, filter .45s ease;
}

.quantix-logo-intro,
.quantix-dashboard-intro{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  z-index:1000;
  transition:opacity .45s ease, transform .45s ease;
}

.quantix-logo-intro.is-visible,
.quantix-dashboard-intro.is-visible{
  opacity:1;
}

.quantix-logo-intro__backdrop,
.quantix-dashboard-intro__backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(18,28,47,0.45), rgba(4,8,16,0.97) 60%);
}

.quantix-logo-intro__core{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.quantix-logo-mark{
  width:94px;
  height:94px;
  border-radius:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  place-items:center;
  background:linear-gradient(135deg, rgba(59,130,246,0.16), rgba(59,130,246,0.04));
  border:1px solid rgba(96,165,250,0.42);
  box-shadow:0 0 24px rgba(59,130,246,0.34), inset 0 0 24px rgba(59,130,246,0.12);
  color:#eff6ff;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:34px;
  font-weight:700;
  letter-spacing:-.06em;
  animation:quantixLogoPulse 1.4s ease-in-out infinite;
}

.quantix-logo-wordmark{
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:clamp(28px, 4vw, 52px);
  font-weight:700;
  letter-spacing:-.05em;
  color:#f8fbff;
}

.quantix-logo-underline{
  width:0;
  height:2px;
  background:linear-gradient(90deg, transparent, #3B82F6, transparent);
  animation:quantixUnderline 1.8s ease forwards;
}

.quantix-logo-tagline,
.quantix-logo-status{
  color:#9bb4da;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.quantix-logo-status{
  font-size:12px;
  letter-spacing:.18em;
}

.quantix-logo-intro__burst{
  position:absolute;
  width:240px;
  height:240px;
}

.quantix-logo-intro__burst span{
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,130,246,0.92), transparent);
  transform:translate(-50%, -50%) rotate(calc(var(--burst-index) * 18deg)) translateY(-80px);
  opacity:.35;
  animation:quantixBurst 1.8s ease-out infinite;
  animation-delay:calc(var(--burst-index) * 0.04s);
}

.quantix-dashboard-intro__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.quantix-dashboard-intro__loader{
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid rgba(96,165,250,0.18);
  border-top-color:#3B82F6;
  animation:quantixSpin 1s linear infinite;
}

.quantix-dashboard-intro__text{
  color:#d8e7ff;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}

.quantix-dashboard-intro.is-exiting{
  opacity:0;
}

body.quantix-dashboard-prep .app{
  opacity:0;
  transform:scale(.986);
  filter:blur(6px);
}

body.quantix-dashboard-live .app{
  opacity:1;
  transform:scale(1);
  filter:none;
  transition:opacity .45s ease, transform .45s ease, filter .45s ease;
}

@keyframes quantixPulseGlow{
  0%,100%{box-shadow:0 18px 36px rgba(214,31,60,0.32), 0 0 0 rgba(255,75,110,0.22);} 
  50%{box-shadow:0 18px 40px rgba(214,31,60,0.42), 0 0 26px rgba(255,75,110,0.28);} 
}

@keyframes quantixButtonShine{
  from{transform:translateX(-120%);} to{transform:translateX(120%);} 
}

@keyframes quantixLineFloatA{0%,100%{transform:translateX(0);}50%{transform:translateX(-14px);}}
@keyframes quantixLineFloatB{0%,100%{transform:translateX(0);}50%{transform:translateX(18px);}}
@keyframes quantixLineFloatC{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
@keyframes quantixLogoPulse{0%,100%{box-shadow:0 0 24px rgba(59,130,246,0.34), inset 0 0 24px rgba(59,130,246,0.12);}50%{box-shadow:0 0 44px rgba(59,130,246,0.48), inset 0 0 28px rgba(59,130,246,0.18);}}
@keyframes quantixUnderline{0%{width:0;opacity:0;}100%{width:240px;opacity:1;}}
@keyframes quantixBurst{0%{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--burst-index) * 18deg)) translateY(-46px) scale(.7);}40%{opacity:.5;}100%{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--burst-index) * 18deg)) translateY(-106px) scale(1.15);}}
@keyframes quantixSpin{to{transform:rotate(360deg);}}

@media (max-width: 1180px){
  .quantix-auth-grid{grid-template-columns:1fr;}
  .quantix-hero{padding:52px 34px 24px;}
  .quantix-auth-aside{padding:0 34px 40px;}
}

@media (max-width: 780px){
  .quantix-hero{padding:36px 20px 16px; gap:24px;}
  .quantix-auth-aside{padding:0 20px 24px;}
  .quantix-feature-grid{grid-template-columns:1fr;}
  .quantix-chart-overlay{height:170px;}
  .quantix-login-card{padding:26px 20px 22px;}
  .quantix-login-head h2{font-size:28px;}
  .quantix-logo-underline{max-width:76vw;}
}