/* ===== Viseon Framer Skin (no markup changes required) ===== */

/* --- 0) Font: try Geist, fall back gracefully --- */
@font-face {
  font-family: "Geist";
  src: local("Geist"), local("Geist Variable"); /* if available on system/app */
  font-display: swap;
}
:root{
  /* Typography */
  --font-sans: "Geist","Geist Placeholder",system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans";
  --ink: #0a0a0a;
  --muted: #6b7280;

  /* Palette */
  --bg: #ffffff;
  --ink-inverse: #ffffff;
  --elev: #0a0a0a;           /* black surfaces for CTAs/cards */
  --card: #0f1115;           /* very dark card */
  --card-border: rgba(255,255,255,0.08);
  --ring: rgba(0,0,0,0.08);

  /* Radii + shadows */
  --r: 16px;
  --r-lg: 24px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);

  /* Layout rhythm */
  --container: 1200px;
  --px: 24px;
  --section-y: clamp(64px, 10vw, 96px);

  /* Type scale */
  --display: clamp(36px, 6vw, 72px);
  --h2: clamp(28px, 3.5vw, 40px);
  --h3: 22px;
  --p: 16px;
  --lead: 18px;

  /* Buttons */
  --btn-h: 44px;
  --btn-r: 999px;
}

/* --- 1) Base / reset-ish --- */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Container & section rhythm (applies even if your markup already has wrappers) */
main, .app, .page, body > div {
  /* safe default so most top-level wraps inherit the same max width */
  --_container: min(var(--container), 100% - 2*var(--px));
  margin-inline: auto;
}
section { padding-block: var(--section-y); }
section > * { max-width: var(--_container); margin-inline: auto; padding-inline: var(--px); }

/* --- 2) Typography to match Framer feel --- */
h1 {
  font-size: var(--display);
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 0.6em;
}
h2 {
  font-size: var(--h2);
  line-height: 1;
  font-weight: 700;
  margin: 0 0 0.75em;
}
h3 {
  font-size: var(--h3);
  font-weight: 600;
  margin: 0 0 0.5em;
}
p, li { font-size: var(--p); color: var(--muted); }
.lead, p.lead { font-size: var(--lead); color: var(--muted); max-width: 680px; }

/* Small uppercase "kicker" line often above headings */
.kicker, .eyebrow, [data-kicker], .overline {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: var(--muted);
}

/* --- 3) Buttons (applies to <button>, .button, and links that look like CTAs) --- */
button, .button,
a[role="button"],
a[href][data-cta],
a[href].btn, 
a[href].Button, 
a[href*="get-started"], 
a[href*="signup"],
a[href*="book"], 
a[href*="demo"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 20px;
  border-radius: var(--btn-r);
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1;
  gap: 8px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}

/* Primary: black pill on white */
button.primary, .button.primary,
a[role="button"].primary,
a[href][data-cta="primary"],
a[href*="get-started"]:not(.secondary),
a[href*="signup"]:not(.secondary) {
  background: var(--elev);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-lg);
}
button.primary:hover, .button.primary:hover,
a[role="button"].primary:hover,
a[href][data-cta="primary"]:hover,
a[href*="get-started"]:not(.secondary):hover,
a[href*="signup"]:not(.secondary):hover {
  transform: translateY(-1px);
  opacity: .95;
}

/* Secondary: outline that inverts on hover */
button.secondary, .button.secondary,
a[role="button"].secondary,
a[href][data-cta="secondary"],
a[href*="book"].secondary, a[href*="demo"].secondary,
a[href*="book"]:not([data-cta]):not(.primary),
a[href*="demo"]:not([data-cta]):not(.primary) {
  background: transparent;
  border-color: rgba(0,0,0,.10);
  color: var(--ink);
}
button.secondary:hover, .button.secondary:hover,
a[role="button"].secondary:hover,
a[href][data-cta="secondary"]:hover,
a[href*="book"]:not(.primary):hover,
a[href*="demo"]:not(.primary):hover {
  background: var(--elev);
  color: var(--ink-inverse);
  border-color: transparent;
}

/* --- 4) Rolling text hover (Framer-like) ---
   Usage: just wrap CTA label like <span class="roll"><span>Label</span><span>Label</span></span>
   If you can't change markup, this still enhances buttons with data-roll="y". */
.roll{ display:inline-flex; overflow:hidden; vertical-align:top; line-height:1.2; }
.roll > span{ display:block; transition: transform .35s; }
button:hover .roll > span,
a:hover .roll > span{ transform: translateY(-100%); }

/* Fallback: if markup can't add .roll, simulate slight lift/shadow on hover for CTAs */
button:hover, .button:hover, a[role="button"]:hover, a[href][data-cta]:hover { box-shadow: 0 12px 30px rgba(0,0,0,.18); }

/* --- 5) Cards / feature blocks (auto-detects common classnames) --- */
[class*="card"], [class*="Card"], .feature, .panel, .tile {
  background: var(--card);
  color: var(--ink-inverse);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
[class*="card"] > *, .feature > *, .panel > *, .tile > * { color: rgba(255,255,255,.85); }
[class*="card"] h3, .feature h3, .panel h3, .tile h3 { color: #fff; }

/* Generic padding for any obvious card-like wrappers */
[class*="card"], [class*="Card"], .feature, .panel, .tile { padding: clamp(20px, 3vw, 32px); }

/* --- 6) Grids (typical 1→3 layout without changing markup) --- */
.grid-1-3, .features-grid, .cards-grid {
  display: grid; gap: clamp(16px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid-1-3, .features-grid, .cards-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* --- 7) Navigation: simple pill links + subtle bottom border on scroll --- */
header, nav {
  position: relative;
  backdrop-filter: saturate(1.1);
}
header.is-sticky, nav.is-sticky { border-bottom: 1px solid rgba(0,0,0,.06); }
nav a, header a { font-size: 13px; text-transform: uppercase; letter-spacing: .2em; }

a.pill, nav a.pill { border: 1px solid rgba(0,0,0,.10); padding: 8px 14px; border-radius: 999px; }

/* --- 8) Forms match buttons --- */
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--r);
  padding: 12px 14px;
  outline: none;
  background: #fff;
  transition: box-shadow .2s, border-color .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}

/* --- 9) Utilities that often exist already but ensure consistency --- */
.rounded { border-radius: var(--r); }
.rounded-lg { border-radius: var(--r-lg); }
.shadow-brand { box-shadow: var(--shadow-lg); }

/* --- 10) Hero spacing helpers (applies even if different structure) --- */
.hero, [data-hero] { padding-block: var(--section-y); }
.hero h1, [data-hero] h1 { margin-bottom: 0.6em; }
.hero .lead, [data-hero] .lead { margin-bottom: 1.25em; }