/* ==========================================================================
   QUOTARIDER DESIGN SYSTEM v1.0
   AI Revenue Intelligence Platform — XDQ Labs Private Limited
   Theme: Deep purple / near-black, glassmorphic, floating pill navigation
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* Surfaces */
  --bg:              #08060f;
  --bg-2:            #0d0a1a;
  --bg-3:            #120e22;
  --surface:         rgba(255,255,255,.035);
  --surface-2:       rgba(255,255,255,.055);
  --surface-solid:   #14102a;

  /* Brand */
  --violet:          #8b5cf6;
  --violet-2:        #a78bfa;
  --violet-3:        #c4b5fd;
  --violet-deep:     #6d28d9;
  --violet-glow:     rgba(139,92,246,.35);

  /* Semantic */
  --green:           #34d399;
  --green-dim:       rgba(52,211,153,.12);
  --red:             #f87171;
  --red-dim:         rgba(248,113,113,.12);
  --amber:           #fbbf24;
  --amber-dim:       rgba(251,191,36,.12);
  --blue:            #60a5fa;
  --pink:            #f472b6;

  /* Text */
  --text:            #f4f2fb;
  --text-2:          #a5a1bd;
  --text-3:          #6f6b8a;

  /* Lines */
  --line:            rgba(255,255,255,.08);
  --line-2:          rgba(255,255,255,.14);
  --line-violet:     rgba(139,92,246,.4);

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Playfair Display", Georgia, serif;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --t: .4s var(--ease);

  /* Layout */
  --max: 1240px;
  --nav-h: 72px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; }

/* Ambient purple wash — the Xtallo signature */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(900px 600px at 15% -5%,  rgba(109,40,217,.30), transparent 60%),
    radial-gradient(800px 500px at 85% 0%,   rgba(139,92,246,.16), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%,rgba(76,29,149,.14), transparent 65%);
  pointer-events:none; z-index:0;
}
main,header,footer{ position:relative; z-index:1; }

/* ---------- TYPE ---------- */
h1,h2,h3,h4{ line-height:1.08; letter-spacing:-.03em; font-weight:800; }
h1{ font-size:clamp(2.6rem,6.4vw,5rem); }
h2{ font-size:clamp(2rem,4.4vw,3.4rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); letter-spacing:-.02em; }
h4{ font-size:1.05rem; letter-spacing:-.01em; font-weight:700; }
p{ color:var(--text-2); }
.ital{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--violet-3); letter-spacing:-.01em; }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--violet-2);
}
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--text-2); max-width:62ch; }

/* ---------- LAYOUT ---------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:24px; }
.section{ padding:clamp(72px,9vw,130px) 0; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.stack-sm > * + *{ margin-top:12px; }
.stack   > * + *{ margin-top:20px; }
.stack-lg> * + *{ margin-top:36px; }
.head{ max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.head.center{ margin-inline:auto; }

.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); align-items:center; }

/* ---------- NAV (floating pill) ---------- */
.nav-outer{ position:sticky; top:0; z-index:100; padding:18px 24px; }
.nav{
  max-width:var(--max); margin-inline:auto;
  display:flex; align-items:center; gap:28px;
  padding:11px 12px 11px 22px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:rgba(13,10,26,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; font-size:1.02rem; flex-shrink:0; }
.mark{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  display:grid; place-items:center;
  box-shadow:0 0 22px var(--violet-glow);
}
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links > a, .drop-btn{
  padding:8px 14px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500; color:var(--text-2);
  transition:var(--t); display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.nav-links > a:hover, .drop-btn:hover{ color:var(--text); background:var(--surface); }
.nav-links a[aria-current="page"]{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Dropdown */
.drop{ position:relative; }
.drop-btn svg{ transition:transform .3s var(--ease); }
.drop:hover .drop-btn svg{ transform:rotate(180deg); }
.drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:300px; padding:8px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(18,14,34,.97);
  backdrop-filter:blur(24px);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transition:var(--t);
}
.drop:hover .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop-menu a{ display:block; padding:11px 13px; border-radius:var(--r-sm); transition:background .2s; }
.drop-menu a:hover{ background:var(--surface-2); }
.drop-menu strong{ display:block; font-size:.875rem; font-weight:600; color:var(--text); }
.drop-menu span{ font-size:.775rem; color:var(--text-3); }

.burger{ display:none; padding:9px; border-radius:10px; border:1px solid var(--line); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:600; letter-spacing:-.01em;
  transition:var(--t); white-space:nowrap; border:1px solid transparent;
}
.btn-p{
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  color:#fff; box-shadow:0 6px 26px var(--violet-glow);
}
.btn-p:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(139,92,246,.5); }
.btn-g{ border-color:var(--line-2); color:var(--text); background:var(--surface); }
.btn-g:hover{ border-color:var(--line-violet); background:var(--surface-2); }
.btn-t{ color:var(--text-2); }
.btn-t:hover{ color:var(--text); background:var(--surface); }
.btn-lg{ padding:15px 30px; font-size:.95rem; }
.btn-full{ width:100%; }

/* ---------- CARD ---------- */
.card{
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:var(--t);
  position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--line-violet); transform:translateY(-3px); }
.card-glow{ border-color:var(--line-violet); box-shadow:0 0 0 1px var(--line-violet), 0 24px 70px rgba(109,40,217,.25); }
.ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.24);
  font-size:1.05rem; margin-bottom:16px;
}

/* ---------- PILL / BADGE / CHIP ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:.78rem; font-weight:600; color:var(--text-2);
  transition:var(--t);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--violet); }
.pill:hover{ border-color:var(--line-violet); color:var(--text); }
.pill.on{ border-color:var(--line-violet); background:rgba(139,92,246,.14); color:var(--text); }

.tag{
  display:inline-block; padding:5px 11px; border-radius:var(--r-pill);
  font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(139,92,246,.15); color:var(--violet-2); border:1px solid rgba(139,92,246,.25);
}
.tag.g{ background:var(--green-dim); color:var(--green); border-color:rgba(52,211,153,.25); }
.tag.r{ background:var(--red-dim);   color:var(--red);   border-color:rgba(248,113,113,.25); }
.tag.a{ background:var(--amber-dim); color:var(--amber); border-color:rgba(251,191,36,.25); }

/* ---------- FORM ---------- */
.field{ display:block; }
.field > label{
  display:block; margin-bottom:7px;
  font-size:.76rem; font-weight:600; letter-spacing:.03em;
  color:var(--text-2); text-transform:uppercase;
}
.field .hint{ margin-top:6px; font-size:.75rem; color:var(--text-3); }
.inp{
  width:100%; padding:12px 15px;
  border:1px solid var(--line-2); border-radius:12px;
  background:rgba(0,0,0,.32); color:var(--text);
  font-size:.95rem; transition:var(--t);
}
.inp:focus{ outline:0; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.inp::placeholder{ color:var(--text-3); }
select.inp{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236f6b8a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;
}
input[type=range]{
  -webkit-appearance:none; width:100%; height:5px; border-radius:99px;
  background:var(--line-2); cursor:pointer; outline:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--violet); border:3px solid var(--bg-3);
  box-shadow:0 0 14px var(--violet-glow); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%; border:3px solid var(--bg-3);
  background:var(--violet); box-shadow:0 0 14px var(--violet-glow); cursor:pointer;
}

/* ---------- STAT / METRIC ---------- */
.stat{ padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.stat .k{ font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.stat .v{ font-size:1.85rem; font-weight:800; letter-spacing:-.03em; margin-top:6px; }
.stat .v.violet{ color:var(--violet-2); }
.stat .v.green { color:var(--green); }
.stat .v.red   { color:var(--red); }
.stat .v.amber { color:var(--amber); }
.stat .d{ font-size:.78rem; color:var(--text-3); margin-top:4px; }

/* Bar */
.bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--violet-2)); transition:width .7s var(--ease); }
.bar > i.g{ background:linear-gradient(90deg,#059669,var(--green)); }
.bar > i.r{ background:linear-gradient(90deg,#dc2626,var(--red)); }
.bar > i.a{ background:linear-gradient(90deg,#d97706,var(--amber)); }

/* ---------- AI INSIGHT BLOCK ---------- */
.ai{
  display:flex; gap:13px; padding:15px 17px;
  border:1px solid rgba(139,92,246,.26); border-radius:var(--r);
  background:linear-gradient(135deg, rgba(139,92,246,.10), rgba(109,40,217,.04));
}
.ai .spark{
  flex-shrink:0; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  font-size:.8rem; box-shadow:0 0 18px var(--violet-glow);
}
.ai h5{ font-size:.86rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.ai p{ font-size:.82rem; line-height:1.55; color:var(--text-2); }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding:74px 0 34px; margin-top:60px; background:rgba(0,0,0,.28); }
.f-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:44px; margin-bottom:56px; }
.f-col h5{ font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.f-col a{ display:block; padding:6px 0; font-size:.875rem; color:var(--text-2); transition:color .2s; }
.f-col a:hover{ color:var(--violet-2); }
.f-bot{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--text-3);
}
.f-bot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.f-bot nav a:hover{ color:var(--text-2); }

/* ---------- UTIL ---------- */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.mono{ font-variant-numeric:tabular-nums; }
.divider{ height:1px; background:var(--line); border:0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .nav-links{ display:none; }
  .burger{ display:grid; place-items:center; margin-left:auto; }
  .f-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .wrap{ padding-inline:18px; }
  .nav{ padding:10px 10px 10px 16px; }
  .nav-cta .btn-t{ display:none; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr; }
  .f-bot{ flex-direction:column; align-items:flex-start; }
  .section{ padding:60px 0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}