/* ============================================================
   LUMIFIN — Marketing Site Stylesheet
   Single source of truth for the public site. Built on the
   Lumifin Design System (tokens derived from the app + the
   marketing UI kit). Component class names match the existing
   page markup so pages only need to drop their inline <style>
   and link this file.

   Sections:
     1. Tokens (:root)            5. Buttons & CTAs
     2. Base & reset              6. Cards
     3. Layout                    7. Calculator & forms
     4. Header / Hero / Sections  8. Footer & responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Brand — indigo / violet */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;   /* PRIMARY */
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --grad-brand: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Accent — amber / orange */
  --amber-50:  #fffbeb;
  --orange-50: #fff7ed;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --orange-500: #f97316;
  --grad-accent: linear-gradient(135deg, #f59e0b, #f97316);

  /* Success — green */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #10b981;
  --green-600: #16a34a;
  --green-700: #166534;
  --emerald-500: #059669;

  /* Error — red */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #991b1b;

  /* Neutrals */
  --ink:      #0f172a;   /* cooler deep slate — reads more credible than warm near-black */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white:    #ffffff;

  /* Surfaces */
  --bg:          #ffffff;
  --bg-alt:      #f9fafb;
  --surface:     #ffffff;
  --grad-hero: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #e2e8f0 100%);

  /* Semantic foreground */
  --fg1: var(--ink);
  --fg2: var(--gray-600);
  --fg3: var(--gray-500);
  --fg4: var(--gray-400);
  --link: var(--indigo-500);
  --link-hover: var(--indigo-600);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --text-hero:    clamp(32px, 4.5vw, 52px);
  --text-display: clamp(26px, 3.5vw, 36px);
  --text-title:   24px;
  --text-xl:      20px;
  --text-lg:      17px;
  --text-md:      15px;
  --text-base:    16px;
  --text-sm:      14px;
  --text-xs:      13px;
  --text-2xs:     11px;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.7;
  --tracking-eyebrow: 0.05em;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-nav:    0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px 0 rgba(0,0,0,.06);
  --shadow-card:   0 1px 2px rgba(15,23,42,.04), 0 12px 32px -14px rgba(15,23,42,.14);
  --shadow-hover:  0 1px 2px rgba(15,23,42,.05), 0 18px 40px -16px rgba(15,23,42,.20);
  --shadow-pop:    0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-cta:        0 1px 2px rgba(15,23,42,.10), 0 6px 16px -4px rgba(79,70,229,.35);
  --shadow-cta-hover:  0 2px 4px rgba(15,23,42,.12), 0 10px 24px -6px rgba(79,70,229,.45);
  --focus-ring: 0 0 0 3px rgba(99,102,241,.15);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur:      .2s;
  --dur-slow: .6s;
}

/* Semantic type utilities (use directly on elements) */
.ds-h1 { font: var(--weight-bold) var(--text-hero)/var(--leading-tight) var(--font-sans); color: var(--fg1); letter-spacing: -0.01em; }
.ds-h2 { font: var(--weight-bold) var(--text-display)/1.2 var(--font-sans); color: var(--fg1); }
.ds-h3 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans); color: var(--fg1); }
.ds-lead { font: var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans); color: var(--fg2); }
.ds-eyebrow { font: var(--weight-semibold) var(--text-2xs)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--indigo-500); }
.ds-grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ds-value-positive { color: var(--green-600); font-weight: var(--weight-bold); }
.ds-value-negative { color: var(--red-600); font-weight: var(--weight-semibold); }

/* ============================================================
   2. BASE & RESET
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   4. HEADER / HERO / SECTIONS
   ============================================================ */
/* Sticky, frosted header (design-system upgrade over the old static bar) */
.header {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.header-logo svg { display: block; height: 36px; width: auto; }
.header-nav { display: flex; gap: 24px; align-items: center; }
.header-nav a { color: var(--gray-500); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: color var(--dur) var(--ease); }
.header-nav a:hover { color: var(--indigo-500); }
.header-nav .nav-cta {
  background: var(--indigo-600);
  color: #fff !important;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header-nav .nav-cta:hover { transform: translateY(-1px); background: var(--indigo-700); box-shadow: var(--shadow-cta); }

/* Hero */
.hero {
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
  padding: 60px 0 80px;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 80%; height: 160%;
  background: radial-gradient(circle, rgba(99,102,241,.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; animation: fadeInUp var(--dur-slow) var(--ease); }
.hero-content h1 { font-size: clamp(38px, 5.2vw, 62px); font-weight: var(--weight-extrabold); line-height: 1.08; margin-bottom: 22px; color: var(--ink); letter-spacing: -0.03em; }
.hero-content h1 .highlight { color: var(--indigo-600); }
.hero-content .subtitle { font-size: clamp(17px, 1.6vw, 20px); color: var(--gray-600); margin-bottom: 32px; line-height: var(--leading-relaxed); }
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: var(--gray-50); }
.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--weight-extrabold); color: var(--ink); margin-bottom: 12px; letter-spacing: -0.02em; }
.section-heading p { font-size: var(--text-lg); color: var(--gray-500); max-width: 560px; margin: 0 auto; }

/* ============================================================
   5. BUTTONS & CTAs
   ============================================================ */
.hero-cta-link,
.cta-button,
.btn-submit {
  display: inline-block;
  background: var(--indigo-600);
  color: #fff;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-cta-link { padding: 14px 32px; border-radius: var(--radius-lg); font-size: var(--text-base); }
.cta-button { padding: 16px 40px; border-radius: var(--radius-lg); font-size: var(--text-base); }
.btn-submit { display: block; width: 100%; padding: 14px; border-radius: var(--radius-lg); font-size: var(--text-base); }
.hero-cta-link:hover,
.cta-button:hover { transform: translateY(-2px); background: var(--indigo-700); box-shadow: var(--shadow-cta-hover); }
.btn-submit:hover { transform: translateY(-1px); background: var(--indigo-700); box-shadow: var(--shadow-cta-hover); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.hero-cta-secondary {
  color: var(--indigo-500);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.hero-cta-secondary:hover { border-bottom-color: var(--indigo-500); }

/* ============================================================
   6. CARDS
   ============================================================ */
.card,
.capability-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 28px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover,
.capability-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

.card-icon,
.capability-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  background: var(--indigo-50);
}
.card-icon.purple, .capability-icon.purple { background: var(--indigo-50); }
.card-icon.orange, .capability-icon.orange { background: var(--orange-50); }
.card-icon.green,  .capability-icon.green  { background: var(--green-50); }

.card h3, .capability-card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 8px; color: var(--ink); }
.card p, .capability-card p { font-size: var(--text-sm); color: var(--gray-500); line-height: var(--leading-normal); }

/* Benefit card (icon-left layout) */
.benefit-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.benefit-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.benefit-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--indigo-50);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.benefit-text h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: 4px; }
.benefit-text p { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.5; }

/* Screenshot frame */
.screenshot-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.screenshot-frame img { display: block; width: 100%; height: auto; }

/* ============================================================
   7. CALCULATOR & FORMS
   ============================================================ */
.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.input-group { margin-bottom: 20px; }
.input-group label { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-700); margin-bottom: 6px; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-prefix, .input-suffix { position: absolute; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--gray-500); pointer-events: none; }
.input-prefix { left: 14px; }
.input-suffix { right: 14px; }

.calc-input,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--ink);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--indigo-500); box-shadow: var(--focus-ring); }
.calc-input.has-prefix { padding-left: 28px; }
select.calc-input { cursor: pointer; }

/* Range slider with brand-gradient thumb */
.calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--gray-200); outline: none; margin-top: 10px; cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--indigo-600); cursor: pointer;
  box-shadow: 0 1px 4px rgba(79,70,229,.4); transition: transform var(--dur-fast) var(--ease);
}
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-range::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background: var(--indigo-500); box-shadow: 0 1px 4px rgba(99,102,241,.4); }
.calc-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--gray-200); }

/* Tooltip */
.tooltip-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gray-200); color: var(--gray-500);
  font-size: 10px; font-weight: var(--weight-bold); cursor: help; position: relative; flex-shrink: 0;
}
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus .tooltip-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tooltip-content {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 260px; padding: 12px 14px;
  background: var(--gray-800); color: var(--gray-100);
  font-size: 12px; font-weight: var(--weight-regular); line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 20; pointer-events: none;
}
.tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--gray-800); }

/* Results */
.results { text-align: center; padding: 24px 0 8px; }
.result-intro { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.result-value { font-size: clamp(32px, 5vw, 42px); font-weight: var(--weight-bold); color: var(--green-600); line-height: 1.2; }
.result-detail { font-size: var(--text-sm); color: var(--gray-500); margin-top: 4px; }
.result-caveat { margin-top: 16px; padding: 12px 14px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--gray-500); line-height: var(--leading-normal); }
.caveat-link { display: block; margin-top: 8px; color: var(--indigo-500); font-weight: var(--weight-medium); }
.caveat-link:hover { text-decoration: underline; }
.calc-method { margin-top: 16px; }
.calc-method summary { list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gray-600); padding: 4px 0; user-select: none; }
.calc-method summary::-webkit-details-marker { display: none; }
.calc-method summary::before { content: "+ "; color: var(--gray-400); font-weight: var(--weight-bold); }
.calc-method[open] summary::before { content: "\2212 "; }
.calc-method summary:hover { color: var(--gray-900); }
.calc-method-body { margin-top: 8px; padding: 12px 14px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--gray-500); line-height: var(--leading-normal); }
.calc-method-body a:hover { text-decoration: underline; }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 32px; max-width: 520px; margin: 0 auto; text-align: left; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--gray-700); margin-bottom: 6px; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.form-section-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); margin-bottom: 16px; }
.form-message { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: 16px; display: none; }
.form-message.error { background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100); display: block; }
.form-message.success { background: var(--green-50); color: var(--green-700); border: 1px solid #bbf7d0; display: block; }

/* ============================================================
   8. FOOTER & RESPONSIVE
   ============================================================ */
.footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.footer-links a { color: var(--gray-500); font-size: var(--text-sm); transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--indigo-500); }
.footer-copy { font-size: var(--text-xs); color: var(--gray-400); }
.footer-disclaimer { font-size: 12px; color: var(--gray-400); max-width: 600px; margin: 12px auto 0; line-height: 1.5; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header-nav { gap: 14px; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 56px 0; }
  .input-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-links { flex-direction: column; gap: 12px; }
}