/* ============================================
   Quirely — Light "Liquid Glass" Theme (v2)
   Build: hover gradient via JS only; base buttons are flat.
   ============================================ */

/* ---- Palette & tokens ---- */
:root{
  --bg:#f6f8fb;                 /* soft paper white */
  --fg:#0b1220;                 /* crisp near-black text */
  --muted:#5f6c7b;              /* cool gray for secondary text */

  --accentA:#b388ff;            /* brand purple */
  --accentB:#69d0ff;            /* brand cyan  */

  /* glass surfaces */
  --glass-a: rgba(255,255,255,0.62);
  --glass-b: rgba(255,255,255,0.46);
  --glass-border: rgba(15,23,42,0.10);   /* slate-900 @10% */
  --glass-shadow: 0 0 0 1px rgba(15,23,42,0.06),
                  0 12px 30px rgba(2,6,23,0.08);

  /* tiles: slightly gray like Catppuccin Mocha but washed out */
  /* mocha base #1e1e2e -> desaturate + raise alpha glass */
  --tile-tint: rgba(30,31,46,0.08);      /* very light gray-violet */
  --tile-highlight: rgba(255,255,255,0.65);

  --ring: var(--glass-shadow);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: var(--fg);
    background:
        linear-gradient(135deg, rgba(188,150,255,0.25) 0%, rgba(105,208,255,0.25) 40%, rgba(255,255,255,0.8) 100%),
        radial-gradient(circle at 80% 20%, rgba(179,150,255,0.35), transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(111,208,255,0.35), transparent 60%);
    background-color: #eef5ff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Site-wide ambient glow */
.bg-glow {
    position: fixed;
    inset: -20% -20% -40% -20%;
    pointer-events: none;
    z-index: 0;
    filter: blur(160px);
    opacity: 0.45;
    background:
        radial-gradient(1400px 900px at 65% -10%, rgba(179,136,255,0.45), transparent 70%),
        radial-gradient(1200px 800px at 20% 100%, rgba(105,208,255,0.45), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.15), transparent 70%);
}
body > * {
    position: relative;
    z-index: 1; /* keep all content above the background glow */
}

/* Ensure content layers above the glow */
body > * { position: relative; z-index: 1; }.container{max-width:1100px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* ---- Nav (glassy) ---- */
.nav{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg, var(--glass-a), var(--glass-b));
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--glass-border);
}
.nav__inner{display:flex;align-items:left;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand.small .brand__name{font-size:16px}
.brand__icon{width:28px;height:28px;border-radius:6px}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav__links a{color:var(--fg);text-decoration:none;margin-left:18px;opacity:.9}
.nav__links a:hover{opacity:1}

/* ---- Hero ---- */
/*.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:64px 0}*/

.hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    padding: 96px 0;
}

.hero__art {
    justify-self: center;
    align-self: center;
    max-width: 600px;
}
.hero__art { opacity: 0.9; transform: scale(0.85); }
.hero__img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.hero__content h1{
  font-size:42px;line-height:1.1;margin:0 0 14px;
  background:linear-gradient(90deg,var(--accentA),var(--accentB));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{font-size:18px;color:var(--muted);max-width:46ch}
.cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}

/* ---- Buttons (base: flat / subtle glass) ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;text-decoration:none;
  font-weight:600;border:1px solid var(--glass-border);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  color:var(--fg);
  background:linear-gradient(180deg, var(--glass-a), var(--glass-b));
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:var(--ring);
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary,
.btn--ghost{ /* no gradient ink by default per request */ }

/* On-gradient state is applied by JS via .is-gradient */
.btn.is-gradient{
  color:#0c1222;
  background:linear-gradient(135deg, rgba(179,136,255,0.45), rgba(105,208,255,0.45));
  box-shadow:0 6px 20px rgba(105,208,255,0.25);
}
.btn.is-gradient:active{ transform:translateY(0) scale(.99) }

/* ---- Cards & tiles (liquid glass) ---- */
.card{
  background:
    linear-gradient(180deg, var(--tile-highlight), var(--glass-b)),
    linear-gradient(0deg, var(--tile-tint), var(--tile-tint));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:16px;padding:24px;
  backdrop-filter:saturate(140%) blur(12px);
}

/* Grid feature tiles */
.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.feature,
.price-card,
.support .card{
  background:
    linear-gradient(180deg, var(--tile-highlight), var(--glass-b)),
    linear-gradient(0deg, var(--tile-tint), var(--tile-tint));
  border:1px solid var(--glass-border);
  border-radius:14px;padding:18px;
  backdrop-filter:saturate(140%) blur(12px);
}
.feature__head {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* space between icon and title */
}

.feature__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.feature__head h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Lists / steps */
.how{padding:34px 0}
.how .steps{display:grid;gap:10px;counter-reset:step}
.how .steps li{
  background:
    linear-gradient(180deg, var(--tile-highlight), var(--glass-b)),
    linear-gradient(0deg, var(--tile-tint), var(--tile-tint));
  border:1px solid var(--glass-border);
  border-radius:12px;padding:14px 14px 14px 18px;
  backdrop-filter:saturate(140%) blur(10px);
}
.how .screens{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.screen{
  width:calc(50% - 7px);min-width:280px;border-radius:14px;
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg, var(--glass-a), var(--glass-b));
  box-shadow:0 14px 40px rgba(2,6,23,0.10);
}

/* Pricing / Support / Privacy centering helpers */
.features, .pricing, .support, .privacy{ margin:40px auto; text-align:left; }
.pricing__grid{ justify-content:left; margin:0 auto; max-width:900px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }

/* Footer */
.footer{
  display:flex;flex-direction:column;align-items:left;justify-content:left;gap:12px;
  text-align:left;padding:40px 0;color:var(--muted);
}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero__art{justify-self:start}
  .grid{grid-template-columns:1fr}
  .pricing__grid{grid-template-columns:1fr}
  .support{display:flex;flex-wrap:wrap;justify-content:left;gap:16px}
  .screen{width:100%}
}

/* Hide the square hero art on larger screens */
@media (min-width: 720px){
    .hero__art { display: none !important; }
}


/* Site-wide ambient gradient glow behind all content */
.bg-glow{
    position: fixed;
    inset: -20% -20% -40% -20%;
    pointer-events: none;
    z-index: 0;
    filter: blur(120px);
    opacity: 0.32; /* bumped up so you can see it */
    background:
        radial-gradient(1200px 800px at 70% -10%, rgba(179,136,255,0.38), transparent 70%),
        radial-gradient(1000px 620px at 20% -10%, rgba(105,208,255,0.36), transparent 70%);
}

/* keep all content above the glow */
body > * { position: relative; z-index: 1; }

/* Hero layout */
.hero{
    display: grid;
    grid-template-columns: 1.1fr .9fr; /* text + art */
    align-items: center;
    gap: 40px;
    padding: 96px 0;
}

/* Make sure the art is NOT hidden by any old media rule */
.hero__art{
    display: block !important;        /* overrides any display:none leftovers */
    justify-self: end;
    align-self: center;
    max-width: 560px;
}

/* Tame the image size (no giant square) */
.hero__img{
    width: min(38vw, 560px);
    height: auto;
    border: none;
    border-radius: 24px;               /* optional: soften corners */
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    opacity: 0.98;
}

/* Mobile: stack neatly */
@media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; gap: 24px; padding: 72px 0; }
    .hero__art{ justify-self: center; }
    .hero__img{ width: min(78vw, 520px); }
}