/* ==========================================================================
   polarisweb — shared design system
   Recreated from the Claude Design handoff prototypes (pixel-faithful).
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            oklch(97% 0.012 90);
  --surface:       oklch(99% 0.006 95);
  --surface-2:     oklch(97% 0.012 90);
  --border:        oklch(90% 0.012 90);
  --border-input:  oklch(88% 0.012 90);

  /* Ink */
  --ink:           oklch(23% 0.02 50);
  --ink-2:         oklch(35% 0.02 50);
  --muted:         oklch(48% 0.02 50);

  /* Brand */
  --accent:        oklch(64% 0.13 260);   /* primary blue-violet */
  --accent-strong: oklch(48% 0.13 260);   /* eyebrow / labels    */
  --accent-soft:   oklch(84% 0.05 260);
  --accent-tint:   oklch(93% 0.03 260);
  --warm:          oklch(74% 0.13 55);    /* warm orange accent  */
  --warm-2:        oklch(72% 0.13 55);

  /* Dark sections */
  --dark:          oklch(23% 0.02 50);
  --dark-2:        oklch(20% 0.015 50);   /* footer */
  --on-dark:       oklch(96% 0.01 90);
  --on-dark-soft:  oklch(70% 0.02 50);
  --on-dark-line:  oklch(35% 0.015 50);

  --maxw: 1240px;
  --radius-pill: 100px;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

a, button, span, div, input, [onclick] {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Fallback for older Androids */
}

/* ---------- Layout helpers ------------------------------------------------ */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-dark  { background: var(--ink);   color: #fff; }
.btn-dark:hover  { box-shadow: 0 14px 30px -12px oklch(23% 0.02 50 / 0.55); }
.btn-white { background: #fff;         color: var(--ink); }
.btn-white:hover { box-shadow: 0 14px 30px -14px oklch(23% 0.02 50 / 0.40); }
.btn-accent{ background: var(--accent); color: #fff; padding: 12px 22px; font-size: 15px; white-space: nowrap; }
.btn-accent:hover { box-shadow: 0 12px 28px -10px var(--accent); }
.btn-ghost-dark { background: transparent; color: #fff; border: 1.5px solid oklch(45% 0.02 50); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.btn-ghost-dark:hover { border-color: #fff; background: oklch(100% 0 0 / 0.06); }

.link-underline {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), color .2s ease, border-color .2s ease;
}
.link-underline:hover { transform: translateX(4px); color: var(--accent-strong); border-color: var(--accent); }

/* ---------- Header / Nav -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(97% 0.012 90 / 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: oklch(97% 0.012 90 / 0.92);
  box-shadow: 0 10px 34px -20px oklch(23% 0.02 50 / 0.4);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--warm-2));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); box-shadow: 0 8px 20px -8px var(--accent); }
.brand-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a:not(.nav-cta) {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:not(.nav-cta):hover::after, .nav-links a.active:not(.nav-cta)::after { transform: scaleX(1); }
.nav-links a:not(.nav-cta):hover { color: var(--ink); }
.nav-links a.active:not(.nav-cta) { color: var(--ink); }
/* CTA lives inside .nav-links so it collapses into the same mobile dropdown;
   margin-left nudges it away from the last plain link on desktop. */
.nav-links .nav-cta { margin-left: 4px; }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; color: var(--ink);
  border-radius: 8px;
  transition: background .2s ease;
}
.nav-toggle:hover { background: oklch(90% 0.012 90 / 0.6); }
.nav-toggle svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); display: block; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--dark-2);
  color: oklch(94% 0.01 90);
  padding: 72px 0 32px;
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-brand p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 280px;
}
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-dark-soft);
  margin-bottom: 16px;
}
.footer-list { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-list a { color: oklch(94% 0.01 90); text-decoration: none; transition: opacity .15s ease; }
.footer-list a:hover { opacity: .7; }
.footer-list span { color: var(--on-dark-soft); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 13px;
  color: oklch(60% 0.02 50);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Generic section framing -------------------------------------- */
.band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.founder {
  padding: 100px 32px;
}

/* ---------- Legal / policy pages ----------------------------------------- */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 24px 32px 100px; }
.legal-meta {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-strong);
  margin: 0 0 40px;
}
.legal-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 40px;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  margin: 48px 0 18px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 12px;
}
.legal p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.legal ul li {
  position: relative;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  padding-left: 22px;
  margin-bottom: 10px;
}
.legal ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal ol { margin: 0 0 16px; padding-left: 20px; }
.legal ol li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 10px; padding-left: 4px; }
.legal a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 30px;
  margin: 0 0 16px;
}
.legal .info-card ul { margin: 0; }

/* legal link in footer bottom bar */
.footer-bottom a { color: oklch(60% 0.02 50); text-decoration: none; transition: color .15s ease; }
.footer-bottom a:hover { color: oklch(94% 0.01 90); }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 88px 32px 60px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.hero-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
  margin: 0 0 36px;
}
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blob {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  background: radial-gradient(circle at 30% 30%, var(--warm), var(--accent) 70%);
  filter: blur(2px);
  opacity: .9;
  animation: floatBlob 9s ease-in-out infinite;
}
.blob-small {
  position: absolute;
  width: 190px; height: 190px;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  top: 20px; right: 20px;
  box-shadow: 0 24px 60px -20px oklch(23% 0.02 50 / 0.25);
  animation: floatBlob 7s ease-in-out infinite
}
.hero-disc {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 70px -24px oklch(23% 0.02 50 / 0.5);
  animation: floatBlob 8s ease-in-out infinite;
}
.hero-disc span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: oklch(94% 0.01 90);
  text-align: center;
  padding: 0 24px;
}
@keyframes floatBlob {
  0%   { transform: translate(0, 0)     rotate(0deg); }
  50%  { transform: translate(10px,-16px) rotate(6deg); }
  100% { transform: translate(0, 0)     rotate(0deg); }
}

/* Trust strip */
.trust {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px 80px;
}
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.trust-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-logos { display: flex; gap: 32px; flex-wrap: wrap; }
.trust-logos span { font-family: var(--serif); font-size: 19px; color: var(--ink-2); }

/* Section wrappers */
.section { max-width: var(--maxw); margin: 0 auto; padding: 20px 32px 100px; }
.section-head { max-width: 600px; margin: 0 0 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Process steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 26px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-num { font-family: var(--serif); font-size: 38px; color: var(--accent-soft); }
.step-card h3 { font-size: 18px; font-weight: 700; margin: 0; }
.step-card p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }

/* Services */
.services { padding: 100px 0; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  background: var(--surface-2);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-chip { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.service-card h3 { font-size: 17px; font-weight: 700; margin: 0; }
.service-card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* Portfolio preview */
.pf-preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pf-card { text-decoration: none; color: inherit; display: block; }
.pf-card .thumb { border-radius: 20px; height: 220px; margin-bottom: 16px; transition: transform .2s ease; }
.pf-card:hover .thumb { transform: translateY(-4px); }
.pf-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pf-card h3 { font-size: 17px; font-weight: 700; margin: 0; }

/* Testimonial */
.testimonial { background: var(--dark); padding: 100px 0; }
.testimonial-inner { max-width: 840px; margin: 0 auto; padding: 0 32px; text-align: center; }
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.45;
  color: var(--on-dark);
  margin: 0 0 32px;
}
.testimonial-name { font-size: 15px; font-weight: 700; color: oklch(94% 0.01 90); }
.testimonial-role { font-size: 14px; color: var(--on-dark-soft); }

/* Pricing preview */
.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.tier-mini {
  border-radius: 22px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-mini h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.tier-mini .price { font-family: var(--serif); font-size: 40px; margin-bottom: 4px; }
.tier-mini .price small { font-size: 15px; font-family: var(--sans); opacity: .6; }
.tier-mini p { font-size: 14px; opacity: .75; margin: 0 0 18px; }

/* FAQ */
.faq { padding: 100px 0; }
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
}
.band .faq-item { background: var(--surface-2); }
.faq-q {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  box-sizing: border-box;
}
.faq-icon { font-size: 22px; color: var(--accent-strong); line-height: 1; margin-left: 16px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

/* Content-driven expand/collapse — grid-template-rows animates from 0fr to
   1fr, so the browser always resolves the real content height itself.
   No JS px measurement, so it can never clip (font loading, dynamic
   content, viewport resize — none of it matters). The nested <p> is the
   grid item; only an explicit item (not the anonymous box a bare text
   node would create) can be told overflow:hidden so it's allowed to
   shrink below its content size. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.faq-a > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; }

/* Contact */
.contact {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 100px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact h2 { margin-bottom: 20px; }
.contact-lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 440px; margin: 0 0 32px; }
.contact-meta { display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.contact-meta span { color: var(--muted); }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.input, .textarea, .select {
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-input);
  background: #fff;
  outline: none;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.textarea { resize: vertical; }
.form-submit {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 16px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  margin-top: 8px;
}
.form-success { padding: 40px 10px; text-align: center; }
.form-success .title { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
.form-success p { font-size: 15px; color: var(--muted); margin: 0; }
[hidden] { display: none !important; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.page-head { max-width: 800px; margin: 0 auto; padding: 88px 32px 24px; text-align: center; }
.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  margin: 0 0 20px;
}
.page-head p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }

.filter-strip { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 36px 32px 8px; }
.filter-chip {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .15s ease;
}
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pf-grid { max-width: var(--maxw); margin: 0 auto; padding: 40px 32px 100px; }
.pf-grid .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pf-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pf-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px oklch(23% 0.02 50 / 0.45); }
.pf-tile .cover { height: 200px; }
.pf-tile .body { padding: 24px; }
.pf-tile .cat {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 10px;
}
.pf-tile h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.pf-tile p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* Stats strip */
.stats { background: var(--dark); padding: 70px 0; }
.stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat .num { font-family: var(--serif); font-size: 44px; color: var(--on-dark); }
.stat .cap { font-size: 14px; color: var(--on-dark-soft); margin-top: 6px; }

/* CTA (portfolio) */
.cta-center { max-width: 1000px; margin: 0 auto; padding: 100px 32px; text-align: center; }
.cta-center h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 18px; }
.cta-center p { font-size: 16px; color: var(--muted); margin: 0 0 32px; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.billing-toggle { display: flex; justify-content: center; padding: 36px 32px 8px; }
.billing-toggle .switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px;
}
.billing-toggle .opt {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--sans);
  transition: all .15s ease;
}
.billing-toggle .opt.active { background: var(--ink); color: #fff; }

.pricing-table { max-width: 1160px; margin: 0 auto; padding: 40px 32px 100px; }
.pricing-table .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.tier {
  position: relative;
  border-radius: 26px;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}
.tier.featured { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.tier-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--warm);
  color: oklch(20% 0.02 50);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tier h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.tier .tagline { font-size: 14.5px; opacity: .75; margin: 0 0 26px; min-height: 42px; }
.tier .price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 28px; }
.tier .price-row .amt { font-family: var(--serif); font-size: 44px; }
.tier .price-row .per { font-size: 15px; opacity: .6; }
.tier .cta {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: #fff;
  background: var(--ink);
}
.tier.featured .cta { background: #fff; color: var(--ink); }
.tier .divider { height: 1px; background: var(--border); margin: 28px 0 24px; }
.tier.featured .divider { background: oklch(35% 0.02 50); }
.tier .features { display: flex; flex-direction: column; gap: 14px; }
.tier .feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; }
.tier .check { color: var(--accent-strong); font-weight: 800; margin-top: 1px; }
.tier.featured .check { color: var(--warm); }

.pricing-note { padding: 90px 0; }
.pricing-note-inner { max-width: 900px; margin: 0 auto; padding: 0 32px; text-align: center; }
.pricing-note-inner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 20px;
  line-height: 1.15;
}
.pricing-note-inner p { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 640px; margin: 0 auto; }

.big-cta { max-width: 1000px; margin: 0 auto; padding: 20px 32px 110px; text-align: center; }
.big-cta .box { background: var(--dark); border-radius: 32px; padding: 64px 40px; color: var(--on-dark); }
.big-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 18px; }
.big-cta p { font-size: 16px; color: oklch(78% 0.02 50); margin: 0 0 32px; }
.big-cta .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   QUOTE WIZARD (Ajanlatkeres)
   ========================================================================== */
.wizard-header { border-bottom: 1px solid var(--border); }
.wizard-header .inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wizard-header .back { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.wizard-wrap { max-width: 760px; margin: 0 auto; padding: 60px 32px 120px; }
.wizard-intro { text-align: center; margin-bottom: 48px; }
.wizard-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  margin: 0 0 16px;
}
.wizard-intro p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }

.progress { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.progress .dot { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--border); transition: background .2s ease; }
.progress .dot.on { background: var(--accent-strong); }
.step-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 32px; text-align: right; }

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
}
.step-card h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 24px; }
.step-card h2.tight { margin-bottom: 8px; }
.step-hint { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; }

.opt-list { display: flex; flex-direction: column; gap: 12px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opt.compact { padding: 14px 16px; }
.opt.checked { border-color: var(--accent-strong); background: var(--accent-tint); }
.opt input { accent-color: var(--accent-strong); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.opt span { font-size: 15.5px; font-weight: 600; }
.opt.compact span { font-size: 15px; }

.summary {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 8px;
}
.summary .h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}
.summary .body { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

.wizard-error {
  font-size: 14px;
  font-weight: 600;
  color: oklch(52% 0.16 25);
  background: oklch(94% 0.04 25);
  border: 1px solid oklch(85% 0.08 25);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 24px 0 0;
}

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; gap: 16px; }
.wizard-nav .btn-back {
  all: unset;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid oklch(85% 0.012 90);
  box-sizing: border-box;
}
.wizard-nav .btn-fwd {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: none;
  margin-left: auto;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.wizard-nav .btn-fwd.submit { background: var(--accent-strong); }
.wizard-nav .btn-fwd:disabled { background: var(--border); color: oklch(60% 0.02 50); cursor: not-allowed; }

.wizard-success { text-align: center; padding: 60px 20px; }
.wizard-success .badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
}
.wizard-success h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 16px;
}
.wizard-success p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 440px; margin: 0 auto 32px; }
.wizard-success .badge { animation: badgePop .5s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes badgePop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   INTERACTIONS / ANIMATIONS
   ========================================================================== */

/* Scroll-reveal — JS adds .is-visible when the element enters the viewport */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Card hovers */
.service-card { transition: transform .22s ease, box-shadow .22s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px oklch(23% 0.02 50 / 0.42); }
.service-chip { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .service-chip { transform: scale(1.15) rotate(-8deg); }

.step-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.step-card:hover { transform: translateY(-5px); border-color: var(--accent-soft); box-shadow: 0 22px 44px -30px oklch(23% 0.02 50 / 0.42); }
.step-num { transition: color .22s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.step-card:hover .step-num { color: var(--accent); transform: translateY(-2px); }

.tier { transition: transform .22s ease, box-shadow .22s ease; }
.tier:not(.featured):hover { transform: translateY(-5px); box-shadow: 0 26px 52px -32px oklch(23% 0.02 50 / 0.42); }
.tier.featured:hover { transform: translateY(-7px); box-shadow: 0 32px 60px -30px oklch(23% 0.02 50 / 0.55); }

.tier-mini { transition: transform .22s ease, box-shadow .22s ease; }
.tier-mini:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -30px oklch(23% 0.02 50 / 0.42); }

/* Homepage portfolio-preview cards — lift + shadow like the portfolio page.
   Re-declared here (after .reveal.is-visible) so the hover transform wins. */
.pf-card .thumb { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease; }
.pf-card:hover .thumb { transform: translateY(-6px); box-shadow: 0 26px 52px -32px oklch(23% 0.02 50 / 0.5); }
.pf-tag, .pf-card h3 { transition: color .2s ease; }
.pf-card:hover h3 { color: var(--accent-strong); }

/* Portfolio-page tiles — hover lift must be declared after .reveal.is-visible
   or the reveal's transform:none would cancel it. */
.pf-tile { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .2s ease; }
.pf-tile:hover { transform: translateY(-6px); border-color: var(--accent-soft); box-shadow: 0 28px 56px -32px oklch(23% 0.02 50 / 0.5); }

.stat .num { transition: transform .3s cubic-bezier(.2,.7,.2,1); display: inline-block; }
.stat:hover .num { transform: scale(1.08); }

/* FAQ */
.faq-item { transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover { border-color: var(--accent-soft); }

/* Form inputs subtle lift on focus already handled; add option hover */
.opt { transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.opt:hover { transform: translateY(-1px); }

/* Hero entrance on load */
.hero > div:first-child > * { opacity: 0; animation: heroUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.hero > div:first-child > *:nth-child(2) { animation-delay: .13s; }
.hero > div:first-child > *:nth-child(3) { animation-delay: .21s; }
.hero > div:first-child > *:nth-child(4) { animation-delay: .29s; }
.hero-visual { opacity: 0; animation: heroFade 1.1s ease .25s forwards; }
@keyframes heroUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced-motion: turn everything static */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero > div:first-child > *, .hero-visual { opacity: 1 !important; animation: none !important; }
  .blob, .blob-small, .hero-disc, .wizard-success .badge { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .hero-visual { height: 340px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid, .cards-3, .pricing-preview-grid,
  .pf-grid .grid, .pricing-table .grid { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .founder { padding: 80px 32px; }
  .founder > div { grid-template-columns: 1fr !important; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-inner { gap: 32px; }
}

/* Navbar collapses to a hamburger well before the 5 links + CTA button
   run out of room (that used to only happen at 680px, leaving a broken,
   overflowing bar between ~680-920px). The dropdown uses a generous
   max-height cap (not a measured one) — safe here because the item count
   is fixed and short, unlike free-form text (see the FAQ's grid-rows
   technique for why measured heights are avoided elsewhere). */
@media (max-width: 900px) {
  /* iOS Safari can fail to keep position:sticky pinned when an ancestor
     (html/body here) has overflow-x:hidden, so the header would scroll
     away with the page. position:fixed sidesteps that bug on mobile;
     body padding compensates for the header leaving normal flow. */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  /* Scoped to pages using .site-header (not ajanlatkeres.html's separate
     .wizard-header) so pages without the fixed nav don't get a phantom gap. */
  body:has(> .site-header) { padding-top: 80px; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.2,.7,.2,1), opacity .3s ease, padding .38s ease;
  }
  .nav-links.open {
    max-height: 480px;
    opacity: 1;
    padding: 22px 20px 26px;
  }
  .nav-links a:not(.nav-cta) { padding: 4px 0; }
  .nav-links .nav-cta { margin: 4px 0 0; text-align: center; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 680px) {
  .container, .hero, .trust, .section, .contact,
  .nav-inner, .footer-grid, .pf-grid, .pricing-table { padding-left: 20px; padding-right: 20px; }
  .steps-grid, .services-grid, .cards-3,
  .pricing-preview-grid, .pf-grid .grid,
  .pricing-table .grid, .opt-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .pf-preview-head { flex-direction: column; align-items: flex-start; }
  .tier.featured { order: -1; }
  .step-card { padding: 28px 22px; }
  .form-card { padding: 28px 22px; }
  .wizard-nav { flex-wrap: wrap; }
  .billing-toggle .switch { flex-wrap: wrap; justify-content: center; }
  .big-cta .box, .pricing-note-inner, .legal-wrap { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 420px) {
  .blob { width: 260px; height: 260px; }
  .hero-disc { width: 180px; height: 180px; }
  .hero-disc span { font-size: 17px; padding: 0 18px; }
  .blob-small { width: 150px; height: 150px; }
  .footer-cols { grid-template-columns: 1fr; }
}