:root {
  --bg: #08090c;
  --panel: #101218;
  --line: rgba(255,255,255,.09);
  --text: #f6f7fb;
  --muted: #9aa1b2;
  --accent: #8b5cf6;
  --accent2: #c084fc;
  --green: #62e6a5;
  --shadow: 0 30px 80px rgba(0,0,0,.35);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  opacity: .18;
}

a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 40px)); margin: auto; }

.nav {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
}

.brand > span:last-child > span { color: var(--accent2); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(192,132,252,.4);
  border-radius: 10px;
  background: rgba(139,92,246,.13);
  color: #d8b4fe;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--muted);
}

.nav-links a:hover { color: white; }
.menu-btn { display:none; background:none; border:0; color:white; font-size:24px; }

.btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: white;
  background: rgba(255,255,255,.03);
  transition: .25s;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(192,132,252,.4);
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 12px 30px rgba(139,92,246,.23);
}

.btn-primary:hover { box-shadow: 0 18px 38px rgba(139,92,246,.34); }
.btn-ghost { background: rgba(255,255,255,.025); }
.btn-large { padding: 14px 20px; font-size: 15px; }
.btn-full { width: 100%; padding: 14px; }

.hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 60px;
  padding-top: 45px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
  color: #c4b5fd;
  margin-bottom: 14px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(98,230,165,.08);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-size: clamp(50px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
  margin-bottom: 24px;
}

h1 span, h2 span { color: #b88cff; }

h2 {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -.05em;
  margin-bottom: 18px;
}

h3 { letter-spacing: -.02em; }

.hero-text {
  max-width: 610px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.hero-actions { display:flex; gap:12px; margin:30px 0 20px; }
.trust-row { display:flex; gap:18px; flex-wrap:wrap; color:#8e96a8; font-size:12px; }

.hero-visual {
  height: 500px;
  position: relative;
  display: grid;
  place-items: center;
}

.orb { position:absolute; border-radius:50%; filter:blur(1px); }
.orb-a {
  width:340px;
  height:340px;
  background:radial-gradient(circle,rgba(139,92,246,.24),transparent 65%);
  animation:orb 8s ease-in-out infinite;
}
.orb-b {
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(34,211,238,.1),transparent 65%);
  right:0;
  top:70px;
}

.invoice-card,.data-card,.excel-card {
  position:absolute;
  background:rgba(16,18,24,.82);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.invoice-card {
  width:285px;
  height:355px;
  border-radius:22px;
  padding:25px;
  transform:rotate(-5deg);
  z-index:2;
}

.invoice-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#8f96a8;
  letter-spacing:.15em;
}

.mini-logo {
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(139,92,246,.18);
  display:grid;
  place-items:center;
  color:#d8b4fe;
}

.skeleton {
  height:12px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  margin-top:20px;
}

.skeleton.big {
  height:58px;
  margin-top:30px;
}

.skeleton.short { width:65%; }

.invoice-total {
  border-top:1px solid var(--line);
  margin-top:65px;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#9299aa;
}

.invoice-total strong { color:white; }

.data-card {
  right:4%;
  top:100px;
  border-radius:15px;
  padding:14px 16px;
  display:flex;
  gap:11px;
  align-items:center;
  z-index:3;
}

.data-icon {
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(98,230,165,.12);
  color:var(--green);
  display:grid;
  place-items:center;
}

.data-card small,.excel-card small {
  display:block;
  color:#7f8798;
  font-size:10px;
}

.data-card strong,.excel-card strong { font-size:12px; }

.excel-card {
  left:5%;
  bottom:80px;
  border-radius:15px;
  padding:14px 16px;
  display:flex;
  gap:11px;
  align-items:center;
  z-index:3;
}

.excel-icon { font-size:23px; color:#62e6a5; }

.floating { animation:float 5s ease-in-out infinite; }
.floating-delay { animation:float 5.5s .7s ease-in-out infinite; }
.floating-delay-2 { animation:float 6s 1.1s ease-in-out infinite; }

.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:30px 0;
  margin-bottom:130px;
}

.stats div {
  padding:0 25px;
  border-right:1px solid var(--line);
}

.stats div:first-child { padding-left:0; }
.stats div:last-child { border:0; }
.stats strong { display:block; font-size:30px; letter-spacing:-.04em; }
.stats span { color:var(--muted); font-size:12px; }

.section { padding-bottom:140px; }
.section-heading { max-width:720px; margin-bottom:50px; }
.section-heading p { color:var(--muted); font-size:16px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.step-card,.info-card {
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  position:relative;
  overflow:hidden;
}

.step-card:after,.info-card:after {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(139,92,246,.09);
  right:-70px;
  top:-70px;
}

.step-number { font-size:11px; color:#7f8798; }

.step-icon,.card-icon {
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(139,92,246,.12);
  color:#c4b5fd;
  font-size:20px;
  margin:30px 0 18px;
}

.step-card p,.info-card p { color:var(--muted); font-size:14px; }

.security-section {
  padding:105px 0;
  background:linear-gradient(90deg,rgba(139,92,246,.08),transparent 55%),#0b0d12;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.security-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.security-grid>div:first-child p { color:var(--muted); max-width:500px; }

.security-list { display:grid; gap:14px; }

.security-list>div {
  display:flex;
  gap:14px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.security-list span { color:var(--green); }
.security-list small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }

.cta {
  margin-top:110px;
  margin-bottom:110px;
  padding:42px 46px;
  border:1px solid rgba(139,92,246,.22);
  border-radius:28px;
  background:radial-gradient(circle at 80% 0,rgba(139,92,246,.2),transparent 40%),rgba(255,255,255,.025);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.cta h2 { font-size:38px; margin:0; }

.footer {
  border-top:1px solid var(--line);
  padding:25px 0 35px;
  display:flex;
  justify-content:space-between;
  color:#72798a;
  font-size:11px;
}

.auth-page,.dashboard-page { min-height:100vh; }

.auth-glow {
  position:fixed;
  width:700px;
  height:700px;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,.12),transparent 65%);
  pointer-events:none;
}

.auth-shell {
  min-height:calc(100vh - 82px);
  display:grid;
  place-items:center;
  padding:30px 0 70px;
}

.auth-card {
  width:min(455px,100%);
  padding:36px;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(16,18,24,.82);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
}

.auth-brand { display:flex; gap:12px; align-items:center; margin-bottom:28px; }

.auth-icon {
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(139,92,246,.14);
  color:#d8b4fe;
}

.auth-brand small { display:block; color:var(--muted); font-size:11px; }

.auth-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}

.auth-tabs a {
  padding:12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.auth-tabs a.active {
  color:white;
  border-bottom:2px solid #a855f7;
}

.auth-form h1 { font-size:42px; margin-bottom:8px; }
.muted { color:var(--muted); }

label {
  display:block;
  font-size:12px;
  color:#aeb4c2;
  margin:19px 0;
}

input {
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b0d12;
  color:white;
  padding:13px 14px;
  outline:none;
  font:inherit;
}

input:focus {
  border-color:rgba(168,85,247,.65);
  box-shadow:0 0 0 4px rgba(168,85,247,.08);
}

.form-message { min-height:20px; margin-top:12px; font-size:12px; }
.error { color:#fca5a5; }
.switch-text { font-size:12px; color:var(--muted); text-align:center; margin:20px 0 0; }
.switch-text a { color:#c4b5fd; }
.hidden { display:none!important; }

.dashboard { padding-top:65px; padding-bottom:90px; }

.dash-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:35px;
}

.dash-head h1 { font-size:52px; margin-bottom:8px; }

.user-menu { display:flex; align-items:center; gap:13px; }
.user-menu>span { font-size:12px; color:var(--muted); }

.usage-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px;
  border:1px solid var(--line);
  border-radius:26px;
  background:radial-gradient(circle at 0 50%,rgba(139,92,246,.15),transparent 40%),rgba(255,255,255,.025);
  margin-bottom:18px;
}

.usage-copy .label {
  display:block;
  color:#9ca3b2;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.usage-copy>strong {
  display:block;
  font-size:48px;
  letter-spacing:-.06em;
  margin:5px 0;
}

.usage-copy p { margin:0; color:var(--muted); font-size:13px; }

.progress-ring {
  width:115px;
  height:115px;
  border-radius:50%;
  background:conic-gradient(#a855f7 var(--progress,0%),rgba(255,255,255,.07) 0);
  display:grid;
  place-items:center;
}

.progress-ring>div {
  width:91px;
  height:91px;
  border-radius:50%;
  background:#101218;
  display:grid;
  place-items:center;
  align-content:center;
}

.progress-ring strong { font-size:19px; }
.progress-ring span { font-size:9px; color:var(--muted); }

.dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.info-card { min-height:230px; }

.status-pill {
  display:inline-block;
  margin-top:12px;
  color:var(--green);
  font-size:10px;
  border:1px solid rgba(98,230,165,.18);
  background:rgba(98,230,165,.06);
  border-radius:999px;
  padding:5px 9px;
}

.status-pill.neutral {
  color:#c4b5fd;
  border-color:rgba(196,181,253,.18);
  background:rgba(196,181,253,.05);
}

.text-btn {
  border:0;
  background:none;
  color:#c4b5fd;
  font-weight:700;
  padding:0;
  cursor:pointer;
  font-size:12px;
}

.reveal {
  opacity:0;
  transform:translateY(18px);
  animation:reveal .8s .05s forwards;
}

.delay-1 { animation-delay:.16s; }
.delay-2 { animation-delay:.28s; }

@keyframes reveal {
  to { opacity:1; transform:none; }
}

@keyframes float {
  0%,100% { transform:translateY(0) rotate(-5deg); }
  50% { transform:translateY(-13px) rotate(-5deg); }
}

@keyframes orb {
  50% { transform:scale(1.1) translate(10px,-10px); }
}

@media(max-width:800px) {
  .nav-links { display:none; }
  .menu-btn { display:block; }
  .hero { grid-template-columns:1fr; padding-top:25px; }
  .hero-visual { height:430px; }
  .stats { grid-template-columns:1fr 1fr; gap:22px; }
  .stats div { border:0; padding:0; }
  .steps,.dash-grid,.security-grid { grid-template-columns:1fr; }
  .security-grid { gap:35px; }
  .cta { display:block; }
  .cta .btn { margin-top:20px; }
  .dash-head { display:block; }
  .dash-head .btn { margin-top:20px; }
  .user-menu { display:none; }
}

@media(max-width:520px) {
  .container { width:min(100% - 26px,1160px); }
  .hero h1 { font-size:49px; }
  .hero-actions { flex-direction:column; }
  .hero-visual { transform:scale(.9); margin-left:-20px; margin-right:-20px; }
  .invoice-card { width:260px; }
  .data-card { right:0; }
  .excel-card { left:0; }
  .auth-card { padding:25px; }
  .usage-card { padding:24px; }
  .usage-copy>strong { font-size:39px; }
  .footer { display:block; }
  .footer>span { display:block; margin-top:12px; }
}





.upload-section {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}

.upload-header h2 {
  margin: 6px 0 8px;
}

.tally-container {
  width: 100%;
  min-height: 274px;
  border-radius: 16px;
  overflow: hidden;
  
}

.tally-container iframe {
  display: block;
  width: 100%;
  min-height: 274px;
  border: 0;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tally-limit-message {
  min-height: 274px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}

.limit-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-weight: 700;
  background: rgba(255, 180, 0, 0.12);
}

.tally-limit-message h3 {
  margin-bottom: 8px;
}

.tally-limit-message p {
  color: #9ca3af;
  margin: 0;
}

@media (max-width: 700px) {
  .upload-section {
    padding: 18px;
    border-radius: 18px;
  }

  .upload-header {
    flex-direction: column;
  }
}