/* Visory — See further. Sell faster. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Light theme as default */
  --bg: #FAFAF7;
  --bg-elev: #F4F2EE;
  --bg-elev-2: #EBE8E2;
  --line: #C9C5BD;
  --line-soft: #DAD6CE;
  --fg: #15151A;
  --fg-muted: #4A4A52;
  --fg-dim: #7A7A82;
  --fg-faint: #B5B2AB;
  --accent: oklch(58% 0.10 78);
  --accent-soft: oklch(58% 0.10 78 / 0.10);
  --accent-line: oklch(58% 0.10 78 / 0.32);
  --good: oklch(48% 0.13 158);
  --info: oklch(48% 0.10 230);
  --serif: 'Manrope', system-ui, sans-serif;
  --sans: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

/* Dark theme via class */
body.dark {
  --bg: #0A0A0B;
  --bg-elev: #111113;
  --bg-elev-2: #17171A;
  --line: #232326;
  --line-soft: #1B1B1E;
  --fg: #F5F1EA;
  --fg-muted: #A1A1A6;
  --fg-dim: #6B6B72;
  --fg-faint: #3A3A40;
  --accent: oklch(76% 0.09 78);
  --accent-soft: oklch(76% 0.09 78 / 0.12);
  --accent-line: oklch(76% 0.09 78 / 0.28);
}
.grain::before { mix-blend-mode: multiply; opacity: 0.18; }
body.dark .grain::before { mix-blend-mode: overlay; opacity: 0.5; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, button { font-family: inherit; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.eyebrow-dim {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 500;
}
.rule { height: 1px; background: var(--line); width: 100%; }
.rule-accent { height: 1px; background: var(--accent-line); width: 100%; }

/* Subtle film-grain backdrop */
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: all .25s ease; border: 1px solid var(--accent);
}
.btn-primary:hover { background: transparent; color: var(--accent); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; background: transparent; color: var(--fg);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); transition: all .25s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Display type */
.display {
  font-family: var(--serif); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.02;
  text-wrap: balance;
}
.display-sm { font-size: clamp(34px, 4.2vw, 60px); }
.display-md { font-size: clamp(46px, 5.6vw, 84px); }
.display-lg { font-size: clamp(54px, 7.4vw, 116px); }
.display em { font-style: normal; color: var(--accent); font-weight: 700; }

/* Section scaffolding */
.section { position: relative; padding: 140px 32px; }
.section-tight { padding: 96px 32px; }
.container { max-width: 1280px; margin: 0 auto; }
.container-wide { max-width: 1440px; margin: 0 auto; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Diagonal divider tick (decoration, not arrow) */
.tick {
  width: 28px; height: 1px; background: var(--accent); display: inline-block; vertical-align: middle;
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Slider (calculator) */
input[type="range"].vs-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px; background: var(--line); outline: none;
}
input[type="range"].vs-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; background: var(--accent);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(201,169,110,0.10);
  transition: box-shadow .2s;
}
input[type="range"].vs-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(201,169,110,0.18);
}
input[type="range"].vs-slider::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--accent);
  border: 0; border-radius: 50%; cursor: pointer;
}

/* Number input */
.num-input {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg); padding: 8px 12px;
  font-family: var(--mono); font-size: 13px; text-align: right;
  width: 110px; outline: none; transition: border-color .2s;
}
.num-input:focus { border-color: var(--accent); }
.num-input::-webkit-inner-spin-button, .num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Soft glow ring (used sparingly) */
.glow-ring { box-shadow: 0 0 0 1px var(--accent-line), inset 0 0 60px rgba(201,169,110,0.04); }

/* Pulse dot */
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(201,169,110,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201,169,110,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}

/* Marquee (used in trust strip) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* FAQ */
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; background: transparent; border: 0; color: var(--fg);
  text-align: left; padding: 28px 4px; font-size: 20px;
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em;
  transition: color .25s; cursor: pointer;
}
.faq-q:hover { color: var(--accent); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .5s ease, padding .5s ease, opacity .4s;
  color: var(--fg-muted); padding: 0 4px; opacity: 0;
}
.faq-a.open { max-height: 400px; padding: 0 4px 28px; opacity: 1; }

/* Comparison table */
.cmp-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.cmp-grid > div { padding: 22px 24px; border-bottom: 1px solid var(--line-soft); }
.cmp-grid .cmp-head { border-bottom: 1px solid var(--line); }
.cmp-grid > div:not(:last-child) { border-right: 1px solid var(--line-soft); }
.cmp-grid > div:nth-child(3n) { border-right: 0; }
.cmp-row-label { font-size: 14px; color: var(--fg); font-weight: 400; }
.cmp-cell { font-size: 14px; color: var(--fg-muted); display: flex; gap: 12px; align-items: center; }
.cmp-mark { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.cmp-grid .visory-col { background: linear-gradient(180deg, rgba(201,169,110,0.04), transparent); }

/* Hero corner marks */
.corner-mark {
  position: absolute; width: 24px; height: 24px;
  border: 1px solid var(--accent-line);
}
.corner-mark.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corner-mark.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner-mark.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corner-mark.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Number marker (process steps) */
.step-num {
  font-family: var(--serif); font-size: 56px; font-weight: 500;
  color: transparent; -webkit-text-stroke: 1px var(--accent-line);
  line-height: 1; letter-spacing: -0.04em;
  transition: -webkit-text-stroke-color .5s, color .5s;
}
.step-card:hover .step-num { color: var(--accent); -webkit-text-stroke-color: var(--accent); }

/* Vertical text */
.vtext { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.4em; font-size: 10px; text-transform: uppercase; color: var(--fg-dim); }

/* Spinning logo wrapper */
.logo-orbit { position: relative; }
.logo-orbit .ring {
  position: absolute; inset: -18px; border-radius: 50%;
  border: 1px dashed var(--accent-line);
  animation: spin 24s linear infinite;
}
.logo-orbit .ring-2 {
  position: absolute; inset: -36px; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.12);
  animation: spin 60s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero ticker */
.ticker {
  font-family: var(--mono); font-size: 11px; color: var(--fg-dim);
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Calculator card panels */
.calc-stat {
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
  padding: 22px 22px 20px;
  position: relative;
  transition: border-color .3s;
}
.calc-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); opacity: 0.6;
}
.calc-stat.muted::before { background: var(--fg-faint); }
.calc-stat.good::before { background: var(--good); }
.calc-stat.info::before { background: var(--info); }
.calc-stat:hover { border-color: var(--accent-line); }

/* Tier scenarios */
.tier-btn {
  background: transparent; border: 1px solid var(--line);
  padding: 14px 16px; text-align: left; transition: all .2s;
  display: block; width: 100%;
}
.tier-btn:hover { border-color: var(--fg-dim); }
.tier-btn.active { border-color: var(--accent); background: var(--accent-soft); }

/* Solution tabs */
.sol-tab {
  text-align: left; padding: 24px 26px; background: transparent;
  border: 1px solid var(--line); transition: all .25s;
  display: block; width: 100%;
}
.sol-tab:hover { border-color: var(--fg-dim); }
.sol-tab.active { border-color: var(--accent); background: linear-gradient(180deg, rgba(201,169,110,0.06), transparent); }
.sol-tab .sol-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; color: var(--fg-dim); }
.sol-tab.active .sol-num { color: var(--accent); }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 22px 32px; transition: all .3s ease;
}
.site-header.scrolled {
  background: oklch(from var(--bg) l c h / 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 32px;
}
.nav-link {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500; transition: color .2s;
}
.nav-link:hover { color: var(--accent); }

/* Hover lift cards */
.lift-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  border: 1px solid var(--line-soft);
  padding: 36px 32px;
  transition: all .4s ease;
  position: relative; overflow: hidden;
}
.lift-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s ease;
}
.lift-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.lift-card:hover::after { transform: scaleY(1); transform-origin: top; }

/* Big quote / pull */
.pull {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Marker line */
.kicker-line {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.kicker-line::before {
  content: ""; width: 32px; height: 1px; background: var(--accent);
}

/* Misc */
.text-fg { color: var(--fg); }
.text-muted { color: var(--fg-muted); }
.text-dim { color: var(--fg-dim); }
.text-accent { color: var(--accent); }
.text-good { color: var(--good); }
.text-info { color: var(--info); }

/* ─── Mobile responsive (≤ 768px) ──────────────────────────────────── */
@media (max-width: 768px) {

  /* Container — full width with breathing room */
  .container, .container-wide { padding-left: 20px !important; padding-right: 20px !important; }

  /* Header — keep logo + CTA on one line, hide everything else */
  .site-header > .container-wide {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  .site-header .nav-link, .hide-md { display: none !important; }
  .btn-primary { padding: 9px 14px !important; font-size: 10.5px !important; }

  /* Hero padding shrink + smaller headline */
  section h1, .hero h1, [class*="hero"] h1 {
    font-size: clamp(34px, 8vw, 52px) !important;
    line-height: 1.08 !important;
  }
  section h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.15 !important;
  }
  section p { font-size: 15px !important; line-height: 1.6 !important; }

  /* Outer hero block padding */
  [style*="padding: 140px 32px 120px"] {
    padding: 96px 20px 72px !important;
  }
  [style*="padding: 120px"] { padding-top: 72px !important; padding-bottom: 64px !important; }
  [style*="padding: 100px"] { padding-top: 64px !important; padding-bottom: 56px !important; }
  [style*="padding: 96px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 80px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* All multi-column grids → stack */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"],
  [style*="repeat(2, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(12, 1fr)"],
  [style*="2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 8-column budget grid → 2 columns */
  [style*="repeat(8, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Inline flex button rows wrap full-width */
  [style*="display: flex"][style*="gap: 16"] { flex-wrap: wrap !important; }
  [style*="display: flex"][style*="gap: 16"] > .btn-primary,
  [style*="display: flex"][style*="gap: 16"] > .btn-ghost { flex: 1 1 100% !important; text-align: center; }

  /* Stat cards / tables shrink type */
  table, .table { font-size: 13px !important; }
  th, td { padding: 8px 10px !important; }

  /* Inputs: full-width, larger tap target */
  input, select, textarea, button { font-size: 16px !important; }

  /* Reduce big margin/gaps used in section layouts */
  [style*="gap: 80"]  { gap: 32px !important; }
  [style*="gap: 56"]  { gap: 28px !important; }
  [style*="gap: 48"]  { gap: 24px !important; }
  [style*="gap: 40"]  { gap: 20px !important; }
  [style*="gap: 32"]  { gap: 16px !important; }

  /* Margin bottoms used to space sections */
  [style*="marginBottom: 80"] { margin-bottom: 40px !important; }
  [style*="marginBottom: 56"] { margin-bottom: 32px !important; }
  [style*="marginBottom: 48"] { margin-bottom: 28px !important; }

  /* Ticker scroll speed feels right on mobile */
  /* (no override needed — keep marquee animation) */
}