/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --background:           oklch(100% 0 0);
  --foreground:           oklch(0.2795 0.0368 260.0310);
  --primary:              oklch(0.5854 0.2041 277.1173);
  --primary-foreground:   oklch(1.0000 0 0);
  --secondary:            oklch(0.9276 0.0058 264.5313);
  --secondary-foreground: oklch(0.3729 0.0306 259.7328);
  --muted:                oklch(0.9670 0.0029 264.5419);
  --muted-foreground:     oklch(0.5510 0.0234 264.3637);
  --accent:               oklch(0.9299 0.0334 272.7879);
  --accent-foreground:    oklch(0.3729 0.0306 259.7328);
  --destructive:          oklch(0.6368 0.2078 25.3313);
  --border:               oklch(0.8717 0.0093 258.3382);
  --ring:                 oklch(0.5854 0.2041 277.1173);
}

/* ── Fonts ───────────────────────────────────────────────────── */
@font-face {
  font-family: 'Open Runde';
  src: url('fonts/OpenRunde-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Runde';
  src: url('fonts/OpenRunde-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Runde';
  src: url('fonts/OpenRunde-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Runde';
  src: url('fonts/OpenRunde-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: 'Open Runde', ui-rounded, system-ui, sans-serif; }
nav a { transition: color 0.2s; }

/* ── Section label ───────────────────────────────────────────── */
.section-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem; border-radius: 9999px;
  background: #111827; color: white;
  font-size: 0.75rem; font-weight: 600; margin-bottom: 1.25rem;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.72 0.18 277.1173); display: inline-block; flex-shrink: 0; }
.tag-dot-white { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); display: inline-block; flex-shrink: 0; }
.section-tag-light { background: #ffffff; color: #111827; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Browser chrome mockup ───────────────────────────────────── */
.browser-chrome { background: #f1f3f5; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; }
.browser-bar { background: #e8eaed; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d1d5db; }
.browser-dots { display: flex; gap: 6px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-url { flex: 1; background: white; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #6b7280; border: 1px solid #d1d5db; font-family: 'Mona Sans', sans-serif; }
.browser-content { overflow: hidden; max-height: 380px; }
.browser-content img { width: 100%; display: block; object-fit: cover; object-position: top; }

/* ── Gradient panel ──────────────────────────────────────────── */
.gradient-panel { background: linear-gradient(145deg, #f43f5e 0%, #a855f7 50%, #f97316 100%); }
.gradient-stripe { background-image: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,0.06) 38px, rgba(255,255,255,0.06) 40px); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, oklch(0.5854 0.2041 277.1173 / 0.08) 0%, transparent 70%); pointer-events: none; top: -100px; left: 50%; transform: translateX(-50%); z-index: 0; }
.hero-search-cursor { display: inline-block; width: 1.5px; height: 13px; background: #374151; vertical-align: text-bottom; margin-left: 1px; animation: cursor-blink 0.75s step-end infinite; }
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Mobile menu ─────────────────────────────────────────────── */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#mobile-menu.open { max-height: 400px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary { background: var(--primary); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; }
.btn-primary:hover { background: oklch(0.5106 0.2301 276.9656); box-shadow: 0 4px 20px oklch(0.5854 0.2041 277.1173 / 0.35); transform: translateY(-1px); }
.btn-secondary { transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.btn-secondary:hover { background: oklch(0.970 0.010 277); border-color: var(--primary); transform: translateY(-1px); }

/* ── Cards ───────────────────────────────────────────────────── */
.feature-card { transition: box-shadow 0.25s, transform 0.25s; }
.feature-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.09); transform: translateY(-3px); }
.testimonial-card { transition: box-shadow 0.25s; }
.testimonial-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.09); }
.pricing-card { transition: box-shadow 0.25s, transform 0.25s; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }

/* ── How it works step number ────────────────────────────────── */
.step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── FAQ accordion ───────────────────────────────────────────── */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer.open { max-height: 300px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── CTA background decorations ─────────────────────────────── */
.cta-bg::before, .cta-bg::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; }
.cta-bg::before { background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); top: -100px; left: -100px; }
.cta-bg::after  { background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); bottom: -100px; right: -100px; }

/* ── Utilities ──────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Product card thumbnail aspect ratio ─────────────────────── */
.product-thumb { padding-top: 72%; }

/* ── Contact section: stable height across view switches ─────── */
#cta-views-grid { display: grid; }
#cta-view-cards,
#cta-view-form,
#cta-view-success { grid-area: 1 / 1; min-width: 0; }

/* ── Features section animations ────────────────────────────── */
@keyframes bar-grow { from { width: 0; } to { width: var(--bar-w, 0%); } }
.feat-bar { width: 0; }
.reveal.visible .feat-bar-1 { animation: bar-grow 0.8s cubic-bezier(0.4,0,0.2,1) 0.35s forwards; }
.reveal.visible .feat-bar-2 { animation: bar-grow 0.8s cubic-bezier(0.4,0,0.2,1) 0.52s forwards; }
.reveal.visible .feat-bar-3 { animation: bar-grow 0.8s cubic-bezier(0.4,0,0.2,1) 0.69s forwards; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.sync-spin { display: inline-block; animation: spin-slow 2.4s linear infinite; }

@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.live-dot { animation: live-pulse 1.8s ease-in-out infinite; }

.feat-row { transform: translateX(-8px); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible .feat-row:nth-child(1) { transform: translateX(0); transition-delay: 0.32s; }
.reveal.visible .feat-row:nth-child(2) { transform: translateX(0); transition-delay: 0.46s; }
.reveal.visible .feat-row:nth-child(3) { transform: translateX(0); transition-delay: 0.60s; }

.feat-illus-content { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.feature-card:hover .feat-illus-content { transform: translateY(-4px); }

.text-feature { transition: transform 0.25s ease; }
.text-feature:hover { transform: translateX(5px); }
.text-feature-icon { transition: color 0.25s ease; color: #9ca3af; }
.text-feature:hover .text-feature-icon { color: var(--primary); }