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

/* ---- Palette & tokens ---- */
:root{--bg:#e6e9ef;--fg:#3c3f52;--muted:#5a5f7a;--accentA:#7287fd;--accentB:#babbf1;--glass-a:rgba(255,255,255,0.30);--glass-b:rgba(255,255,255,0.20);--glass-border:rgba(50,55,85,0.12);--glass-shadow:0 0 0 1px rgba(50,55,85,0.08),0 1px 5px rgba(10,15,25,0.04);--hairline:rgba(50,55,85,0.12);--inner-border:rgba(50,55,85,0.10);--glass-frost:blur(5px) saturate(120%);--tile-bg:rgba(245,245,255,0.10);--ctp-lavender:#7287fd;--ctp-mauve:#8839ef;--ctp-surface0:#dce0e8;--ctp-surface1:#ccd0da;--ctp-surface2:#bcc0cc;--ctp-base:#eff1f5;}
:root{
  --glass-frost: blur(6px) saturate(120%);
  --inner-border: rgba(12,18,34,0.10);
  --hairline: rgba(12,18,34,0.12);
  --tile-bg: rgba(255,255,255,0.18);
}


/* ---- Base ---- */
*{box-sizing:border-box}
html,body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--fg);background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));background-color:#e6e9ef;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--fg);background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));background-color:#e6e9ef;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(90px);opacity:0.25;background:radial-gradient(1200px 760px at 68% -10%, rgba(114,135,253,0.40), transparent 70%),radial-gradient(1000px 600px at 22% 110%, rgba(186,187,241,0.35), transparent 72%),linear-gradient(180deg, rgba(255,255,255,0.10), 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, rgba(255,255,255,0.42), rgba(240,240,250,0.25));backdrop-filter:var(--glass-frost);border-bottom:1px solid var(--hairline);}
.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: block;
    width: 100%;
    padding: 96px 0;
}

.hero__content {
    max-width: 1800px;
    margin: 0 auto; /* centers content block while keeping text left-aligned */
    text-align: left;
}
.hero__art {
    justify-self: center;
    align-self: center;
    max-width: 6px;
}
.hero__art { opacity: 0.9; transform: scale(0.85); }
.hero__img {
    width: 100%;
    max-width: 6px;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.hero__content h1{
  font-size:42px;line-height:1.1;margin:0 0 14px;
  background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));
  -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:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid var(--hairline);color:var(--fg);background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));backdrop-filter:var(--glass-frost);transition:transform .14s ease,box-shadow .14s ease;}
.btn:hover{transform:translateY(-0.5px);box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;}
.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(90deg, var(--ctp-lavender), var(--ctp-mauve));
  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(90deg, var(--ctp-lavender), var(--ctp-mauve));border:1px solid var(--inner-border);border-radius:14px;padding:22px;box-shadow:0 1px 3px rgba(10,15,25,0.04);backdrop-filter:var(--glass-frost);}

/* Grid feature tiles */
.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.feature,.price-card,.support .card{background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));border:1px solid var(--inner-border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(10,15,25,0.03);backdrop-filter:var(--glass-frost);}
.feature__head {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 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(90deg, var(--ctp-lavender), var(--ctp-mauve));border:1px solid var(--inner-border);border-radius:10px;padding:12px 14px;box-shadow:0 1px 2px rgba(10,15,25,0.03);backdrop-filter:var(--glass-frost);}
.how .screens{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.screen{width:calc(50% - 7px);min-width:280px;border-radius:12px;border:1px solid var(--inner-border);background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));box-shadow:0 6px 16px rgba(2,6,23,0.05);}

/* 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:calc(50% - 7px);min-width:280px;border-radius:12px;border:1px solid var(--inner-border);background:linear-gradient(90deg, var(--ctp-lavender), var(--ctp-mauve));box-shadow:0 6px 16px rgba(2,6,23,0.05);}
}

/* 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(90px);opacity:0.25;background:radial-gradient(1200px 760px at 68% -10%, rgba(114,135,253,0.40), transparent 70%),radial-gradient(1000px 600px at 22% 110%, rgba(186,187,241,0.35), transparent 72%),linear-gradient(180deg, rgba(255,255,255,0.10), 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 8px 24px rgba(0,0,0,0.06);
    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); }
}

:root{
  --ctp-text: #4c4f69;
  --ctp-subtext0: #6c6f85;
  --ctp-surface0: #ccd0da;
  --ctp-surface1: #bcc0cc;
  --ctp-surface2: #acb0be;
  --ctp-base: #eff1f5;
  --ctp-lavender: #7287fd;
  --ctp-blue: #8caaee;
  --ctp-mauve: #8839ef;
  --hairline: rgba(52,58,90,0.14);
  --inner-border: rgba(52,58,90,0.12);
  --tile-bg: rgba(255,255,255,0.16);
  --glass-frost: blur(6px) saturate(120%);
}


/* =========================================================
   Latte Lavender 95% (Desaturated) — Neutral-first overrides
   Keeps thin liquid-glass borders; greatly reduces saturation.
   ========================================================= */

:root{
  /* Neutral Latte-ish foundation */
  --bg: #eceff4;           /* very light, slightly cool */
  --fg: #3c3f52;           /* latte text-ish */
  --muted: #6c6f85;

  /* Keep accents but use sparingly */
  --lavender: #7287fd;
  --accentA: #7287fd;
  --accentB: #8caaee;

  /* Glass tuning (subtler) */
  --glass-a: rgba(255,255,255,0.26);
  --glass-b: rgba(255,255,255,0.16);
  --hairline: rgba(50,55,85,0.12);
  --inner-border: rgba(50,55,85,0.10);
  --glass-frost: blur(5px) saturate(115%);
}

/* Neutral background; minimal tint */
body{
  color: var(--fg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(236,239,244,0.85)),
    linear-gradient(90deg, rgba(236,239,244,1), rgba(255,255,255,1));
  background-color: #eceff4;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Ambient glow: almost neutral, very faint */
.bg-glow{
  opacity: 0.12 !important;
  filter: blur(84px) !important;
  background:
    radial-gradient(1100px 680px at 70% -12%, rgba(180,188,205,0.18), transparent 70%),
    radial-gradient(900px 560px at 24% 108%, rgba(190,196,210,0.16), transparent 72%);
}

/* Headline: remove colorful gradient; add tiny lavender underline only */
.hero__content h1{
  background: none !important;
  -webkit-text-fill-color: initial;
  color: var(--fg);
  position: relative;
}
.hero__content h1::after{
  content:"";
  position:absolute;
  left:0; bottom:-0.3rem;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg, rgba(114,135,253,0.35), rgba(114,135,253,0));
  border-radius: 2px;
}

/* Cards & tiles: keep very flat glass */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(245,245,255,0.06)) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 1px 3px rgba(10,15,25,0.03) !important;
  backdrop-filter: var(--glass-frost) !important;
}
.feature,
.price-card,
.support .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(245,245,255,0.05)) !important;
  border: 1px solid var(--inner-border) !important;
  box-shadow: 0 1px 2px rgba(10,15,25,0.02) !important;
  backdrop-filter: var(--glass-frost) !important;
}
.how .steps li{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(245,245,255,0.04)) !important;
  border: 1px solid var(--inner-border) !important;
  box-shadow: 0 1px 2px rgba(10,15,25,0.02) !important;
}

/* Screens / frames */
.screen{
  border: 1px solid var(--inner-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(245,245,255,0.05)) !important;
  box-shadow: 0 6px 14px rgba(10,15,25,0.04) !important;
}

/* Nav: neutral glass */
.nav{
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(240,242,247,0.24)) !important;
  border-bottom: 1px solid var(--hairline) !important;
  backdrop-filter: var(--glass-frost) !important;
}

/* Buttons: neutral surfaces; lavender only as hint on hover/focus */
.btn{
  color: var(--fg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(245,245,255,0.12)) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset !important;
}
.btn:hover{
  transform: translateY(-0.5px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset !important;
}
.btn:focus-visible{
  outline: 2px solid rgba(114,135,253,0.25);
  outline-offset: 2px;
  border-radius: 14px;
}

/* Links: keep neutral; add lavender only on hover underline */
a{ color: var(--fg); }
a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(114,135,253,0.35);
  text-underline-offset: 2px;
}


/* =========================================================
   Remove faint global ring or border around viewport edges
   ========================================================= */

html, body {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove possible container or wrapper outline */
.container, .site, .app, .wrapper, main {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove inner-glow or frame from main glass panel if any */
.bg-glow::before, .bg-glow::after {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
/* === Remove edge halo (purple ring) === */
.bg-glow {
    inset: 0% 0 0% 0%; /* tighter containment */
    overflow: hidden;
    mask-image: radial-gradient(circle at 50% 50%, black 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 80%, transparent 100%);
    opacity: 0.10 !important; /* cut strength in half */
    background:
        radial-gradient(1000px 600px at 65% 0%, rgba(114,135,253,0.18), transparent 70%),
        radial-gradient(800px 500px at 30% 100%, rgba(140,170,238,0.15), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 70%) !important;
}
html, body {
    background-color: #eceff4; /* neutral background */
    overflow-x: hidden;
}



/* === FINAL OVERRIDE: remove any purple ring / edge tint === */
html, body {
  background: #eceff4 !important;
  background-color: #eceff4 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Kill ambient glow entirely (source of ring) */
.bg-glow,
.bg-glow::before,
.bg-glow::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Prevent any container-based halo */
.container, .site, .app, .wrapper, main {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Safety: remove any full-viewport gradient leftovers */
:root {
  --ctp-lavender: #808080 !important; /* neutralize if referenced */
  --ctp-mauve: #808080 !important;
}
/* ---- Force single-column hero (kill legacy grid) ---- */
section.hero,
.hero {
    display: block !important;              /* break any grid/flex */
    width: 100%;
    padding: 96px;
}

/* If any grid survives, make the content span all columns */
.hero__content {
    grid-column: 1 / -1 !important;
    max-width: none;                         /* allow full container width */
    margin: 0;                               /* no auto-centering constraints */
    text-align: left;                        /* keep left-aligned text */
}

/* Remove the image column entirely if the node still exists */
.hero__art { display: none !important; }

/* Optional: keep comfy reading width just for the paragraph */
.hero .lead { max-width: 46ch; }
.hero__content { grid-column: 1 / -1 !important; max-width: 880px; margin: 0 auto; }

.badges img {
    transition: transform 0.2s ease;
}
.badges img:hover {
    transform: scale(1.05);
}
<style>
.cta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.store-badge img { height:56px; display:block; }
@media (max-width: 600px) {
    .store-badge img { height:48px; }
}
</style>