/* ===================================================================
   POLUS — "LUMINOUS GLASS"
   Bright, frosted, interactive. The opposite of dark + gloomy.
   Light base · animated color mesh · glassmorphism · vivid gradient CTAs.
   =================================================================== */
:root {
  --bg:           #eaf0fb;          /* soft cool daylight base */
  --ink:          #141a2b;          /* primary text */
  --ink-soft:     #5a6582;          /* secondary text */
  --ink-faint:    #646e8c;          /* darkened for WCAG AA on translucent glass */

  --glass:        rgba(255,255,255,0.62);  /* a touch more opaque so text stays legible on the color mesh */
  --glass-strong: rgba(255,255,255,0.74);
  --glass-edge:   rgba(255,255,255,0.9);
  --hairline:     rgba(20,26,43,0.08);

  /* DEFAULT palette = Emerald (green → mint → teal). Swap via [data-theme]. */
  --accent:       #047857;          /* emerald-700 — passes WCAG AA (4.8:1) as body text */
  --accent-2:     #10b981;
  --accent-3:     #34d399;
  --sky:          #38bdf8;
  --star:         #d97706;           /* amber — visible 5-star glyphs (accent-3 was invisible) */
  --grad:         linear-gradient(120deg, #047857 0%, #059669 55%, #0d9488 100%);  /* white CTA text clears 4.5:1 across the whole sweep */
  --grad-soft:    linear-gradient(120deg, #10b981, #34d399);
  /* color-mesh stops (themeable) */
  --m1: rgba(5,150,105,0.32);
  --m2: rgba(16,185,129,0.30);
  --m3: rgba(52,211,153,0.24);
  --m4: rgba(45,212,191,0.26);

  --shadow-sm:    0 4px 18px -8px rgba(79,107,255,0.30);
  --shadow:       0 14px 50px -16px rgba(79,107,255,0.34), 0 3px 12px -6px rgba(20,26,43,0.10);
  --shadow-lg:    0 28px 70px -22px rgba(139,92,246,0.42);

  --radius:       22px;
  --radius-sm:    14px;
  --radius-pill:  100px;
  --maxw:         1140px;

  --font:         "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:        "Fraunces", Georgia, serif;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.62; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; position: relative; -webkit-tap-highlight-color: transparent;
}

/* ---- animated bright color mesh (the "pull you in" backdrop) ---- */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 48% at 18% 12%, var(--m1), transparent 60%),
    radial-gradient(42% 52% at 86% 8%,  var(--m2), transparent 62%),
    radial-gradient(48% 52% at 72% 82%, var(--m3), transparent 60%),
    radial-gradient(44% 50% at 8% 86%,  var(--m4), transparent 60%);
  filter: blur(34px) saturate(135%); will-change: transform;
  animation: mesh 28s var(--ease) infinite alternate;
}
@keyframes mesh {
  0%   { transform: translate3d(-2%,-1%,0) scale(1.05); }
  100% { transform: translate3d(2%,2.5%,0) scale(1.14); }
}
/* faint top sheen so glass reads against the light */
body::after {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 40vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media (max-width: 767px) { body::before { animation: none; } }   /* static mesh on phones — saves CPU/battery + protects INP */

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; margin: 0; text-wrap: balance; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-2); }
img, svg, canvas { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }

/* ---- glass primitive ---- */
.glass {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-edge); border-radius: var(--radius); box-shadow: var(--shadow);
}
.glass-card {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-edge); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px; contain: paint; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.glass-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

/* ---- buttons (vivid liquid-gradient + glass) ---- */
.btn, .btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: var(--radius-pill); font-family: var(--font);
  font-weight: 600; font-size: 1.02rem; cursor: pointer; border: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-position 0.7s var(--ease);
}
.btn {
  color: #fff; background: var(--grad); background-size: 180% 180%; background-position: 0% 0%;
  box-shadow: 0 12px 32px -8px rgba(5,150,105,0.5);
}
.btn:hover { transform: translateY(-3px) scale(1.02); background-position: 100% 100%; box-shadow: 0 18px 44px -8px rgba(5,150,105,0.45); }
.btn-lg { padding: 19px 40px; font-size: 1.1rem; }
.btn-glass {
  color: var(--ink); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm);
}
.btn-glass:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---- header (sticky glass bar) ---- */
.site-header { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header.scrolled .bar { box-shadow: var(--shadow); }
.bar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 12px 10px 18px; border-radius: var(--radius-pill);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm);
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink-soft); font-weight: 500; font-size: 0.96rem; }
.nav a:hover { color: var(--ink); }
.nav .nav-cta { color: #fff; background: var(--grad); padding: 10px 20px; border-radius: var(--radius-pill); font-weight: 600; }
.nav .nav-cta:hover { color: #fff; transform: translateY(-1px); }
@media (max-width: 820px) { .nav { display: none; } }   /* mobile: the sticky bottom bar carries the CTAs, so keep the header clean for the full wordmark */

/* ---- hero ---- */
.hero { padding: clamp(70px, 12vh, 130px) 0 clamp(50px, 9vh, 100px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent); padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(139,92,246,0.7); }
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); max-width: 16ch; margin-bottom: 24px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--ink-soft); max-width: 40ch; margin: 0 0 36px; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---- sections ---- */
.section { padding: clamp(60px, 9vh, 110px) 0; }
.section-head { max-width: 620px; margin: 0 auto 50px; text-align: center; }
.section-head .kicker { display: inline-block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.section-head .lead { color: var(--ink-soft); font-size: 1.12rem; margin-top: 16px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* steps */
.step .node { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--grad); box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.step h3 { font-size: 1.3rem; margin-bottom: 8px; }
.step p { color: var(--ink-soft); margin: 0; }

.feature h3 { font-size: 1.25rem; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); margin: 0; }
.feature .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: linear-gradient(135deg, rgba(79,107,255,0.16), rgba(236,72,153,0.16)); }
.feature .ico svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.8; }

/* reviews */
.review .stars { color: var(--star); letter-spacing: 2px; margin-bottom: 12px; }
.review .quote { color: var(--ink); font-size: 1rem; line-height: 1.6; margin: 0 0 16px; }
.review .who { font-weight: 600; color: var(--ink); }
.review .who span { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-faint); margin-top: 3px; }

/* closer */
.closer-card { text-align: center; padding: clamp(40px, 6vw, 70px); }
.closer-card h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 16px; }
.closer-card .lead { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 30px; }

/* footer */
.site-footer { padding: 50px 0 40px; color: var(--ink-soft); }
.site-footer .fgrid { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; padding: 34px; }
.site-footer h4 { color: var(--ink); font-size: 0.95rem; margin: 0 0 12px; }
.site-footer li { list-style: none; margin: 7px 0; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.fbottom { text-align: center; color: var(--ink-faint); font-size: 0.86rem; margin-top: 26px; }

/* reveal-on-scroll (motion.js compatible) */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

.skip-link { position: absolute; left: 8px; top: -48px; z-index: 999; background: var(--grad); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top 0.2s var(--ease); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 4px rgba(255,255,255,0.9); }

/* ---- forms (glass / light) ---- */
.field { margin-bottom: 18px; }
.two-col { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--ink); margin-bottom: 8px; }
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,0.72); border: 1px solid var(--hairline); border-radius: 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(79,107,255,0.16);
}
.field textarea { min-height: 110px; resize: vertical; }
.btn-full { width: 100%; }
.consent { display: flex; gap: 11px; align-items: flex-start; margin: 6px 0 18px; }
.consent input { width: 24px; height: 24px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.consent label { font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: 0.95rem; }
.form-status.err { color: #c2255c; }
.form-status.ok { color: #087f5b; }
.form-fallback { margin-top: 18px; text-align: center; display: none; }
.form-fallback.is-visible { display: block; }
.form-fallback .ff-text { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 8px; }
.form-fallback .ff-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.form-fallback .ff-call svg { width: 18px; height: 18px; fill: currentColor; }
/* collapsible "add details (optional)" on the sell form — fewer visible fields = less friction */
.more-fields { margin: 2px 0 18px; }
.more-fields > summary { cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: 0.92rem; padding: 8px 0; display: inline-block; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields[open] > summary { margin-bottom: 10px; }
/* FAQ glass */
.faq-item { border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--ink); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body { padding: 0 22px 18px; color: var(--ink-soft); }
.faq-item .faq-body p { margin: 0; }

/* ---- palette options (all bright + glass-friendly) ---- */
[data-theme="ocean"] {
  --accent: #2563eb; --accent-2: #06b6d4; --accent-3: #14b8a6;
  --grad: linear-gradient(120deg, #2563eb 0%, #06b6d4 55%, #14b8a6 100%);
  --m1: rgba(37,99,235,0.34); --m2: rgba(6,182,212,0.30); --m3: rgba(20,184,166,0.22); --m4: rgba(56,189,248,0.26);
}
[data-theme="coral"] {
  --accent: #ea580c; --accent-2: #f97316; --accent-3: #f59e0b;
  --grad: linear-gradient(120deg, #ea580c 0%, #f97316 55%, #f59e0b 100%);
  --m1: rgba(234,88,12,0.28); --m2: rgba(249,115,22,0.26); --m3: rgba(245,158,11,0.26); --m4: rgba(251,191,36,0.24);
}

/* ---- wordmark logo (clean, no keystone) ---- */
.wordmark { font-family: var(--font); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; color: var(--ink); display: inline-flex; align-items: center; line-height: 1; }
.wordmark .dot { display: inline-block; width: 0.4em; height: 0.4em; border-radius: 50%; margin-left: 3px; background: var(--grad); box-shadow: 0 0 12px var(--accent-2); }
.wordmark .wm-sub { font-weight: 600; color: var(--ink-soft); letter-spacing: -0.01em; margin-left: 0.28em; }
.wordmark:hover { color: var(--ink); }
.wordmark:hover .wm-sub { color: var(--ink-soft); }

/* ---- sticky mobile call/offer bar (phone-only; desktop hidden) ---- */
.mobile-cta { display: none; }
@media (max-width: 820px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--glass-edge); box-shadow: 0 -8px 30px -12px rgba(20,26,43,0.18);
  }
  .mobile-cta a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: 1rem; }
  .mobile-cta .mc-call { color: var(--ink); background: var(--glass); border: 1px solid var(--glass-edge); }
  .mobile-cta .mc-offer { color: #fff; background: var(--grad); }
  body { padding-bottom: 80px; }
}