/* =========================================================
   QuickPixel Landing Templates — Design System (qp-system.css)
   Goal: consistent spacing, typography, buttons, glass, layout
   Theme: dark, premium, teal/lime gradients, Apple-ish SaaS
========================================================= */

/* ---------- Root Tokens ---------- */
:root{
  /* Brand */
  --qp-teal:#01ddc3;
  --qp-lime:#c0d731;

  /* Base */
  --qp-bg:#06070a;
  --qp-ink:#0b0d12;

  /* Text */
  --qp-txt:rgba(255,255,255,.92);
  --qp-muted:rgba(255,255,255,.72);
  --qp-muted2:rgba(255,255,255,.58);

  /* Surfaces */
  --qp-panel:rgba(255,255,255,.06);
  --qp-panel2:rgba(255,255,255,.04);
  --qp-line:rgba(255,255,255,.12);

  /* Glass */
  --qp-glass:rgba(10,14,22,.55);
  --qp-glassLine:rgba(140,200,255,.18); /* bluish border hint */
  --qp-blur:16px;

  /* Shadows */
  --qp-shadow-lg: 0 30px 80px rgba(0,0,0,.65);
  --qp-shadow-md: 0 16px 44px rgba(0,0,0,.55);

  /* Radius */
  --qp-r-2xl: 28px;
  --qp-r-xl: 22px;
  --qp-r-lg: 18px;
  --qp-r-md: 14px;

  /* Layout */
  --qp-container: 1240px;
  --qp-pad-x: 24px;

  /* Vertical rhythm (B: Slightly Spacious SaaS) */
  --qp-sec-lg: 140px;
  --qp-sec: 110px;
  --qp-sec-sm: 80px;

  /* Typography scale (A: Slightly bold typography) */
  --qp-h1: clamp(40px, 4vw, 64px);
  --qp-h2: clamp(32px, 3.2vw, 46px);
  --qp-h3: clamp(20px, 1.7vw, 26px);

  --qp-p: 17px;
  --qp-p-lg: 18px;

  /* Motion */
  --qp-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--qp-bg);
  color: var(--qp-txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Container ---------- */
.qp-container{
  width:100%;
  max-width: var(--qp-container);
  margin:0 auto;
  padding:0 var(--qp-pad-x);
}

/* ---------- Sections ---------- */
.qp-section-lg{ padding: var(--qp-sec-lg) 0; }
.qp-section{ padding: var(--qp-sec) 0; }
.qp-section-sm{ padding: var(--qp-sec-sm) 0; }

/* Optional: full-bleed dark band */
.qp-band{
  background:
    radial-gradient(900px 400px at 20% 30%, rgba(1,221,195,.10), transparent 55%),
    radial-gradient(800px 380px at 80% 40%, rgba(192,215,49,.09), transparent 60%),
    var(--qp-bg);
}

/* ---------- Headings / Text ---------- */
.qp-eyebrow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--qp-muted2);
}
.qp-eyebrow::before{
  content:"";
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(135deg, var(--qp-teal), var(--qp-lime));
  box-shadow: 0 0 0 6px rgba(1,221,195,.08);
}

.qp-h1, h1.qp{
  font-size: var(--qp-h1);
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0;
  font-weight:780;
}
.qp-h2, h2.qp{
  font-size: var(--qp-h2);
  letter-spacing:-.02em;
  line-height:1.12;
  margin:0;
  font-weight:760;
}
.qp-h3, h3.qp{
  font-size: var(--qp-h3);
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0;
  font-weight:720;
}

.qp-lead{
  font-size: var(--qp-p-lg);
  line-height:1.85;
  color: var(--qp-muted);
  margin:0;
}
.qp-text{
  font-size: var(--qp-p);
  line-height:1.85;
  color: var(--qp-muted);
  margin:0;
}

/* Gradient text utility */
.qp-gradient-text{
  background: linear-gradient(90deg, rgba(190,255,64,.92), rgba(0,255,204,.72));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Layout helpers ---------- */
.qp-stack-10 > * + *{ margin-top:10px; }
.qp-stack-14 > * + *{ margin-top:14px; }
.qp-stack-18 > * + *{ margin-top:18px; }
.qp-stack-24 > * + *{ margin-top:24px; }
.qp-stack-32 > * + *{ margin-top:32px; }

.qp-center{ text-align:center; }
.qp-max-860{ max-width:860px; margin-left:auto; margin-right:auto; }
.qp-max-780{ max-width:780px; margin-left:auto; margin-right:auto; }

/* ---------- Glass / Cards ---------- */
.qp-glass{
  background: var(--qp-glass);
  border:1px solid var(--qp-glassLine);
  border-radius: var(--qp-r-2xl);
  backdrop-filter: blur(var(--qp-blur));
  -webkit-backdrop-filter: blur(var(--qp-blur));
  box-shadow: var(--qp-shadow-lg);
  position:relative;
  overflow:hidden;
}

/* subtle “blue glass” glow edge (premium) */
.qp-glass::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 22% 18%, rgba(120,210,255,.18), transparent 60%),
    radial-gradient(520px 240px at 82% 26%, rgba(1,221,195,.14), transparent 62%),
    radial-gradient(520px 240px at 70% 80%, rgba(192,215,49,.10), transparent 62%);
  pointer-events:none;
  opacity:.85;
}

/* standard card (less heavy than glass) */
.qp-card{
  background: var(--qp-panel2);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--qp-r-xl);
  box-shadow: var(--qp-shadow-md);
}

/* Hover premium lift */
.qp-hoverlift{
  transition: transform .35s var(--qp-ease), border-color .35s var(--qp-ease), box-shadow .35s var(--qp-ease);
}
.qp-hoverlift:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.22);
}

/* Gradient border on hover (Apple-ish) */
.qp-gradborder{
  position:relative;
}
.qp-gradborder::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, var(--qp-teal), var(--qp-lime));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .35s var(--qp-ease);
  pointer-events:none;
}
.qp-gradborder:hover::after{ opacity:1; }

/* ---------- Buttons ---------- */
/* ---------- Buttons ---------- */
.qp-btnrow{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

/* Base */
.qp-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;

  border:1px solid transparent;
  transform: translateZ(0);
  isolation:isolate;
  overflow:hidden;

  transition:
    transform .22s var(--qp-ease),
    box-shadow .22s var(--qp-ease),
    background .22s var(--qp-ease),
    border-color .22s var(--qp-ease),
    color .22s var(--qp-ease),
    filter .22s var(--qp-ease);
}

/* better focus */
.qp-btn:focus{ outline:none; }
.qp-btn:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 0 0 4px rgba(1,221,195,.26),
    0 18px 46px rgba(0,0,0,.45);
}

/* lift only for real hover devices */
@media (hover:hover) and (pointer:fine){
  .qp-btn:hover{ transform: translateY(-2px); }
}
.qp-btn:active{ transform: translateY(0) scale(.985); }

/* Optional sizing helpers */
.qp-btn-sm{ padding:10px 14px; font-size:13.5px; }
.qp-btn-lg{ padding:14px 22px; font-size:15px; }

/* ============ PRIMARY ============ */
.qp-btn-primary{
  color: rgba(0,0,0,.92);
  background: linear-gradient(135deg, rgba(192,215,49,.98), rgba(1,221,195,.88));
  border-color: rgba(255,255,255,.14);

  box-shadow:
    0 18px 50px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* glossy top sheen */
.qp-btn-primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(140px 90px at 22% 10%, rgba(255,255,255,.62), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* shimmer sweep on hover (only) */
.qp-btn-primary::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 18%,
    rgba(255,255,255,.06) 28%,
    transparent 44%
  );
  transform: translateX(-65%) rotate(12deg);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition: opacity .25s var(--qp-ease), transform .65s var(--qp-ease);
}

.qp-btn-primary > *{ position:relative; z-index:1; }

/* premium hover */
@media (hover:hover) and (pointer:fine){
  .qp-btn-primary:hover{
    filter: saturate(1.08) brightness(1.02);
    box-shadow:
      0 28px 74px rgba(0,0,0,.62),
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 0 34px rgba(1,221,195,.18),
      0 0 26px rgba(192,215,49,.12);
  }
  .qp-btn-primary:hover::after{
    opacity:1;
    transform: translateX(65%) rotate(12deg);
  }
}

/* crisp press */
.qp-btn-primary:active{
  filter: saturate(1.02) brightness(.98);
  box-shadow:
    0 16px 44px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

/* ============ SECONDARY ============ */
.qp-btn-secondary{
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 12px 40px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

.qp-btn-secondary::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(220px 140px at 25% 20%, rgba(1,221,195,.10), transparent 60%),
    radial-gradient(240px 160px at 80% 40%, rgba(192,215,49,.08), transparent 65%);
  opacity:.0;
  pointer-events:none;
  transition: opacity .25s var(--qp-ease);
  z-index:0;
}
.qp-btn-secondary > *{ position:relative; z-index:1; }

@media (hover:hover) and (pointer:fine){
  .qp-btn-secondary:hover{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.24);
    box-shadow:
      0 18px 56px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .qp-btn-secondary:hover::after{ opacity:1; }
}

/* ============ DISABLED ============ */
.qp-btn[aria-disabled="true"],
.qp-btn.is-disabled,
.qp-btn:disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(.2);
  transform:none !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .qp-btn,
  .qp-btn-primary::after,
  .qp-btn-secondary::after{
    transition:none !important;
  }
}

/* full-width buttons on mobile when needed */
.qp-btn-block{ width:100%; }

/* ---------- Horizontal scroll helper (for carousels) ---------- */
.qp-hscroll{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 18px;
}
.qp-hscroll > *{ scroll-snap-align:start; }
.qp-hscroll::-webkit-scrollbar{ display:none; }
.qp-hscroll{ scrollbar-width:none; }

/* Optional fade edges (use inside relative wrapper) */
.qp-fade-right{
  position:absolute;
  top:0; right:0;
  width:110px; height:100%;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(6,7,10,0) 0%, rgba(6,7,10,.8) 70%, rgba(6,7,10,1) 100%);
}

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 980px){
  :root{
    --qp-pad-x: 18px;
    --qp-sec-lg: 110px;
    --qp-sec: 92px;
    --qp-sec-sm: 70px;

    /* make mobile more readable (your request) */
    --qp-p: 16.5px;
    --qp-p-lg: 17.5px;
  }
  .qp-btn{ padding: 12px 18px; }
}

@media (max-width: 640px){

  :root{
    --qp-pad-x: 16px;

    --qp-sec-lg: 96px;
    --qp-sec: 82px;
    --qp-sec-sm: 64px;

    --qp-h1: clamp(36px, 9vw, 46px);
    --qp-h2: clamp(28px, 8vw, 36px);
    --qp-h3: clamp(20px, 6vw, 24px);

    --qp-p: 17px;
    --qp-p-lg: 19px;
  }

  .qp-btnrow{
    gap:12px;
  }

  .qp-btn{
    padding: 14px 20px;
  }

}

/* ---------- Debug helper (optional) ----------
.qp-debug *{ outline:1px dashed rgba(255,255,255,.08); }
------------------------------------------------ */