/* Apona design system — matches the live apona.ai look.
   Light theme, Epilogue font, white cards with soft shadows, monochrome
   black CTA buttons, neutral-gray palette. Used by sites/apona-ai/,
   sites/penzzer-com/, and sites/we-fuzz-com/ for visual consistency. */

:root{
  /* Neutrals */
  --bg:           #ffffff;
  --bg-soft:      #fafafa;
  --bg-soft-2:    #f7f7f9;
  --bg-soft-3:    #f0f3f8;
  --ink:          #111111;
  --ink-2:        #222222;
  --ink-3:        #333333;
  --muted:        #626265;
  --muted-2:      #5d6c7b;
  --muted-3:      #aaadb0;
  --line:         #e6eaf1;
  --line-soft:    #ebeffa;

  /* Accent gradients (used sparingly on hero/CTA panels) */
  --grad-blue:    linear-gradient(135deg,#eef2f8 0%,#f0f3f8 100%);
  --grad-pink:    linear-gradient(135deg,#f9eff6 0%,#fff5f9 100%);
  --grad-warm:    linear-gradient(135deg,#fdfbfa 0%,#fafafa 100%);

  /* Card shadow tuned to match Webflow's shadow-xxlarge */
  --shadow-card:  0 32px 64px -12px rgba(184,179,222,.30);
  --shadow-soft:  0 8px 24px -8px rgba(40,40,60,.10);

  /* Radii */
  --r-sm: .5rem;
  --r-md: .75rem;
  --r-lg: 1rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Epilogue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on;
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ---- Header / nav ---- */
header{
  position:sticky; top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  z-index:20;
}
nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--ink); letter-spacing:-.01em}
.brand img{height:28px; width:auto}
nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
nav ul a{color:var(--muted); font-size:15px; font-weight:500}
nav ul a:hover{color:var(--ink); text-decoration:none}

/* ---- Sections / type ---- */
section{padding:80px 0}
section.hero{padding:96px 0 56px}
section.alt{background:var(--bg-soft)}
section.gradient-blue{background:var(--grad-blue)}
section.gradient-pink{background:var(--grad-pink)}
section.gradient-warm{background:var(--grad-warm)}

h1{font-size:clamp(34px,5vw,56px); line-height:1.05; letter-spacing:-.025em; margin:.2em 0 .4em; font-weight:600; color:var(--ink)}
h2{font-size:clamp(26px,3.2vw,38px); line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em; font-weight:600; color:var(--ink-2)}
h3{font-size:20px; line-height:1.3; margin:0 0 .35em; font-weight:600; color:var(--ink-2)}
.lede{font-size:clamp(18px,2vw,21px); color:var(--muted); max-width:760px; line-height:1.55; margin:0 0 28px}

/* ---- Badge / pill (intro labels) ---- */
.badge{
  display:inline-block;
  font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
  background:var(--bg-soft-2); border:1px solid var(--line);
  color:var(--muted-2);
  margin-bottom:20px;
}

/* ---- Cards (white-card pattern from Webflow) ---- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:28px;
  box-shadow:var(--shadow-soft);
}
.card.lift{box-shadow:var(--shadow-card)}
.card h3{margin-top:0}
.card p{color:var(--muted); margin:8px 0 0; font-size:15px; line-height:1.55}

.grid-2{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:36px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin-top:36px}

/* ---- Buttons (monochrome, black-on-light) ---- */
.btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:.625rem;
  font-weight:600; font-size:15px; line-height:1.2;
  border:1px solid var(--ink);
  background:#fff; color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .05s;
}
.btn:hover{background:#fff; border-color:var(--ink); transform:translateY(-1px); text-decoration:none}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

.muted{color:var(--muted)}

/* ---- Trusted-by logo strip ---- */
.trusted{padding:48px 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trusted-label{
  color:var(--muted); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  text-align:center; margin-bottom:24px;
}
.logo-strip{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:44px}
.logo-strip img{
  height:36px; width:auto; max-width:160px; object-fit:contain;
  opacity:.55; filter:grayscale(1);
  transition:opacity .2s, filter .2s;
}
.logo-strip img:hover{opacity:1; filter:grayscale(0)}

/* ---- Testimonials ---- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; margin-top:32px}
.quote{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:28px;
  box-shadow:var(--shadow-soft);
}
.quote p{color:var(--ink-3); font-size:15px; line-height:1.6; margin:0 0 18px}
.quote .who{color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:14px; margin-top:6px}
.quote .who strong{color:var(--ink); font-weight:600}

/* ---- Callout ---- */
.callout{
  background:var(--bg-soft-3);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--muted-2);
  border-radius:var(--r-sm);
  padding:18px 22px;
  margin:24px 0; color:var(--ink-3); font-size:15px;
}

/* ---- Forms ---- */
form.lead{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:32px;
  display:grid; gap:14px;
  max-width:620px;
  box-shadow:var(--shadow-soft);
}
form.lead label{font-size:13px; color:var(--muted); display:block; font-weight:500; margin-bottom:4px}
form.lead input, form.lead select, form.lead textarea{
  width:100%; padding:11px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); font:inherit; font-size:15px;
}
form.lead input:focus, form.lead select:focus, form.lead textarea:focus{
  outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(34,34,34,.08);
}
form.lead textarea{min-height:108px; resize:vertical}
form.lead .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
form.lead button{justify-self:start}
form.lead .hp{position:absolute; left:-9999px}
.form-status{margin-top:8px; color:var(--muted); font-size:14px}
.form-status.ok{color:#0a8a3f}
.form-status.err{color:#b42318}

/* ---- Footer ---- */
footer.site{padding:64px 0 48px; color:var(--muted); font-size:14px; background:var(--bg-soft); border-top:1px solid var(--line); margin-top:40px}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:32px; margin-bottom:32px}
footer.site .cols a{color:var(--muted); display:block; margin-bottom:8px; font-size:14px}
footer.site .cols a:hover{color:var(--ink)}
footer.site .copy{border-top:1px solid var(--line); padding-top:20px; color:var(--muted-2); font-size:13px}

/* ---- Responsive ---- */
@media (max-width: 640px){
  nav{height:60px}
  nav ul{gap:18px}
  section{padding:56px 0}
  section.hero{padding:64px 0 40px}
  form.lead .row{grid-template-columns:1fr}
}