/* ═══════════════════════════════════════════════════
   EINLINIO V5 — STYLE.CSS
   Shared base + Landing page
   Blue #0056b3 (brand) · Teal #0d9488 (action) · Gold #f39c12 (solar)
   ═══════════════════════════════════════════════════ */

/* --- TOKENS --- */
:root {
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Consolas, monospace;
  --blue: #0056b3;
  --blue-dark: #004494;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --gold: #f39c12;
  --gold-dark: #d4860a;
  --gold-50: #fefbf0;
  --gold-100: #fef3cd;
  --tech: #445566;
  --white: #ffffff;
  --g50: #f8f9fb;
  --g100: #f1f3f6;
  --g200: #e2e6ec;
  --g300: #cbd1da;
  --g400: #8e99a8;
  --g500: #637083;
  --g600: #4a5568;
  --g700: #374151;
  --g800: #1f2937;
  --g900: #111827;
  --border: var(--g200);
  --border-l: var(--g100);
  --ok: #16a34a;
  --ok-bg: #f0fdf4;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --err: #dc2626;
  --err-bg: #fef2f2;
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
  --sh-lg: 0 12px 32px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --r: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --t: 150ms ease;
}

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--g900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

/* --- BUTTONS --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px;
  font: 600 14px/1 var(--font);
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: all var(--t);
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn-secondary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-secondary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--g600); border-color: var(--border); }
.btn-ghost:hover { background: var(--g50); border-color: var(--g300); color: var(--g900); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 46px; padding: 0 28px; font-size: 16px; font-weight: 700; border-radius: 8px; }
.btn-full { width: 100%; }

/* --- INPUTS --- */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 9px 12px;
  font: 400 14px var(--font);
  color: var(--g900); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
input::placeholder, textarea::placeholder { color: var(--g400); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--g500); margin-bottom: 5px; }

/* --- ALERTS --- */
.alert { padding: 12px 16px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px; }
.alert-error { background: var(--err-bg); color: var(--err); border: 1px solid #fecaca; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bbf7d0; }

/* ═══ NAVIGATION ═══ */
.site-nav {
  display: flex; align-items: center;
  padding: 0 32px; height: 64px;
  background: var(--white);
  border-bottom: 1px solid var(--border-l);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.92);
}
.site-nav .logo { display: flex; align-items: center; }
.site-nav .logo img, .site-nav .logo svg { height: 30px; width: auto; }
.site-nav .nav-links { display: flex; gap: 28px; margin-left: 40px; }
.site-nav .nav-links a {
  font-size: 14px; font-weight: 500; color: var(--g500);
  text-decoration: none; transition: color var(--t);
}
.site-nav .nav-links a:hover { color: var(--teal); }
.site-nav .nav-fill { flex: 1; }
.site-nav .nav-actions { display: flex; gap: 8px; }

/* ═══ HERO ═══ */
.hero {
  max-width: 820px; margin: 0 auto;
  padding: 64px 24px 40px;
  text-align: center;
}
.hero-logo { margin-bottom: 28px; }
.hero-logo svg { width: 120px; height: auto; margin: 0 auto; display: block; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; margin-bottom: 24px;
  font-size: 12px; font-weight: 600; color: var(--blue);
  background: var(--blue-50); border: 1px solid var(--blue-200);
  border-radius: 100px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800; line-height: 1.12;
  letter-spacing: -0.03em; color: var(--g900);
  margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .hero-sub {
  font-size: clamp(15px, 2vw, 18px); line-height: 1.65;
  color: var(--g500); max-width: 600px; margin: 0 auto 32px;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Trust Bar --- */
.trust-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 18px 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--g400);
}
.trust-item { display: flex; align-items: center; gap: 5px; color: var(--g500); font-weight: 500; }
.trust-item svg { color: var(--teal); width: 15px; height: 15px; }
.trust-dot { width: 3px; height: 3px; background: var(--g300); border-radius: 50%; }

/* ═══ SECTIONS ═══ */
.section { padding: 64px 24px; }
.section-alt { background: var(--g50); }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.section-head p { font-size: 15px; color: var(--g500); line-height: 1.6; }

/* --- Problem/Solution --- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
.compare-card { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--border); }
.compare-card.problem { background: #fef8f8; border-color: #fecaca; }
.compare-card.solution { background: #f6fef9; border-color: #bbf7d0; }
.compare-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.compare-card ul { list-style: none; }
.compare-card li { padding: 5px 0; font-size: 13px; color: var(--g600); display: flex; align-items: flex-start; gap: 8px; }
.compare-card li::before { flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.compare-card.problem li::before { content: '✕'; color: var(--err); }
.compare-card.solution li::before { content: '✓'; color: var(--ok); }

/* --- Features --- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.feature-card { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); transition: all var(--t); }
.feature-card:hover { border-color: var(--g300); box-shadow: var(--sh-xs); transform: translateY(-2px); }
.feature-icon {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
  background: var(--teal-50);
}
.feature-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.feature-card p { font-size: 13px; line-height: 1.5; color: var(--g500); }

/* --- Mockup --- */
.mockup-frame { max-width: 880px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); }
.mockup-bar { height: 34px; background: var(--g50); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 14px; gap: 6px; }
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-ver { margin-left: auto; font-size: 10px; color: var(--g400); font-weight: 500; letter-spacing: .04em; }

/* --- Use Cases --- */
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.usecase-card { text-align: center; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); }
.usecase-icon { font-size: 32px; margin-bottom: 12px; }
.usecase-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.usecase-card p { font-size: 13px; line-height: 1.55; color: var(--g500); }

/* --- Pricing --- */
.pricing-card {
  max-width: 460px; margin: 0 auto; padding: 32px;
  border-radius: var(--r-xl); border: 2px solid var(--teal);
  background: var(--white); text-align: center; position: relative;
}
.pricing-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: #fff;
  padding: 4px 20px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pricing-card h3 { font-size: 19px; font-weight: 700; margin: 12px 0 6px; }
.pricing-card .pricing-desc { color: var(--g500); margin-bottom: 18px; font-size: 14px; }
.pricing-list { list-style: none; text-align: left; margin-bottom: 24px; }
.pricing-list li {
  padding: 7px 0; font-size: 14px; color: var(--g600);
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border-l);
}
.pricing-list li::before { content: '✓'; color: var(--teal); font-weight: 700; font-size: 15px; }

/* --- FAQ --- */
.faq-list { max-width: 680px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 6px; overflow: hidden; transition: border-color var(--t); }
.faq-item:hover { border-color: var(--g300); }
.faq-item[open] { border-color: var(--teal); }
.faq-item summary {
  padding: 14px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  list-style: none; color: var(--g900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 18px; color: var(--g400); transition: color var(--t); }
.faq-item[open] summary::after { content: '−'; color: var(--teal); }
.faq-item p { padding: 0 18px 14px; font-size: 13px; line-height: 1.7; color: var(--g500); }

/* --- Contact Form --- */
.contact-form { max-width: 560px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.consent { font-size: 12px; color: var(--g400); margin-bottom: 14px; line-height: 1.5; }
.consent a { color: var(--teal); }
.form-status { margin-top: 12px; font-size: 13px; text-align: center; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }

/* --- Footer --- */
.site-footer {
  padding: 28px 32px; text-align: center;
  font-size: 13px; color: var(--g400);
  border-top: 1px solid var(--border-l);
}
.site-footer a { color: var(--g500); margin: 0 8px; }
.site-footer a:hover { color: var(--teal); }
.footer-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.footer-logo svg { height: 20px; }

/* ═══ LOGIN PAGE ═══ */
.page-login { background: var(--g50); min-height: 100vh; }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); padding: 40px 24px; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 40px;
  box-shadow: var(--sh-lg);
}
.login-header { text-align: center; margin-bottom: 28px; }
.login-header svg { width: 80px; height: auto; margin: 0 auto 8px; display: block; }
.login-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.login-header p { font-size: 14px; color: var(--g500); }
.login-form .field { margin-bottom: 16px; }
.login-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--g400); }
.login-footer a { color: var(--teal); font-weight: 600; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .site-nav { padding: 0 16px; height: 56px; }
  .site-nav .nav-links { display: none; }
  .hero { padding: 40px 16px 24px; }
  .compare-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 40px 16px; }
}