/* ── Inbox Translate — site.css ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:       #0ea5e9;   /* sky-500 — fresh, email-adjacent */
  --brand-dark:  #0284c7;   /* sky-600 */
  --brand-light: #e0f2fe;   /* sky-100 */
  --accent:      #6366f1;   /* indigo-500 */
  --success:     #10b981;
  --danger:      #ef4444;
  --warn:        #f59e0b;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-700:    #334155;
  --gray-900:    #0f172a;
  --radius:      12px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.14);
}

html  { scroll-behavior: smooth; }
body  { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-50); color: var(--gray-900); line-height: 1.6; font-size: 15px; }
a     { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Container ───────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ── Header ──────────────────────────────────────────────────── */
header { background: #fff; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 100; }
header .container { padding-block: 0; }
nav { display: flex; align-items: center; height: 60px; gap: 20px; }
nav h1 { font-size: 1.05rem; font-weight: 800; color: var(--brand); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-logo-icon { width: 28px; height: 28px; background: linear-gradient(135deg, var(--brand), var(--accent)); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-700); }
.nav-links a:hover { color: var(--brand); text-decoration: none; }
#lang-select { font-size: 13px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 5px 10px; background: white; cursor: pointer; color: var(--gray-700); outline: none; }
#lang-select:focus { border-color: var(--brand); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 40%, #ede9fe 100%); padding: 96px 0 80px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(14,165,233,.08) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 50%, rgba(99,102,241,.06) 0%, transparent 70%); pointer-events:none; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:white; border:1px solid var(--gray-200); border-radius:100px; padding:4px 14px 4px 10px; font-size:13px; font-weight:500; color:var(--brand); margin-bottom:24px; box-shadow:var(--shadow-sm); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; color: var(--gray-900); margin-bottom: 20px; letter-spacing: -0.02em; }
.hero h1 span { background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p { font-size: 1.15rem; color: var(--gray-500); max-width: 520px; margin: 0 auto 36px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.hero-disclaimer { font-size: 0.85rem; color: var(--gray-400); }

/* ── Buttons ─────────────────────────────────────────────────── */
.cta-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:white; padding:13px 28px; border-radius:10px; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .2s; box-shadow:0 4px 14px rgba(14,165,233,.35); white-space:nowrap; text-decoration:none; }
.cta-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(14,165,233,.45); text-decoration:none; color:white; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:white; color:var(--gray-700); padding:12px 24px; border-radius:10px; font-size:15px; font-weight:600; border:1.5px solid var(--gray-200); cursor:pointer; transition:all .2s; white-space:nowrap; text-decoration:none; }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-light); text-decoration:none; }
.btn-sm { padding:8px 18px; font-size:13px; border-radius:8px; }

/* ── Features ────────────────────────────────────────────────── */
.features { padding: 80px 0; background: white; }
.section-label { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:12px; display:block; }
.features h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:12px; color:var(--gray-900); letter-spacing:-0.01em; }
.features .lead { color:var(--gray-500); max-width:500px; margin-bottom:56px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.feat-card { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius); padding:28px; transition:all .2s; }
.feat-card:hover { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-light); transform:translateY(-2px); }
.feat-icon { width:44px; height:44px; border-radius:10px; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
.feat-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.feat-card p  { font-size:0.9rem; color:var(--gray-500); line-height:1.6; }

/* ── How it works ────────────────────────────────────────────── */
.how-it-works { padding:80px 0; background:var(--gray-50); text-align:center; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; margin-top:48px; }
.step { display:flex; flex-direction:column; align-items:center; gap:12px; }
.step-num { width:44px; height:44px; background:linear-gradient(135deg, var(--brand), var(--accent)); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; }
.step h3 { font-size:0.95rem; font-weight:700; }
.step p  { font-size:0.85rem; color:var(--gray-500); }

/* ── Languages strip ─────────────────────────────────────────── */
.languages-strip { padding:40px 0; background:white; overflow:hidden; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.marquee-track { display:flex; gap:12px; animation:marquee 28s linear infinite; width:max-content; }
.lang-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:var(--gray-100); border-radius:100px; font-size:13px; font-weight:500; white-space:nowrap; color:var(--gray-700); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Pricing ─────────────────────────────────────────────────── */
.pricing-section { padding:80px 0; background:white; text-align:center; }
.billing-toggle { display:inline-flex; align-items:center; gap:8px; background:var(--gray-100); border-radius:100px; padding:6px; margin-bottom:48px; }
.billing-toggle button { padding:8px 20px; border-radius:100px; border:none; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s; background:transparent; color:var(--gray-500); }
.billing-toggle button.active { background:white; color:var(--gray-900); box-shadow:var(--shadow-sm); }
.save-badge { background:var(--success); color:white; font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; max-width:1000px; margin:0 auto; align-items:start; }
.card { background:white; border:1.5px solid var(--gray-200); border-radius:var(--radius); padding:32px 28px; text-align:left; position:relative; transition:all .2s; }
.card:hover { border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card.featured { border-color:var(--brand); background:linear-gradient(to bottom,var(--brand-light),white); box-shadow:0 0 0 4px rgba(14,165,233,.12); }
.popular-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--brand),var(--accent)); color:white; font-size:11px; font-weight:700; padding:4px 14px; border-radius:100px; white-space:nowrap; letter-spacing:.05em; text-transform:uppercase; }
.card h2 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.card .price { font-size:2.4rem; font-weight:800; color:var(--gray-900); margin-bottom:4px; line-height:1.1; }
.card .price span { font-size:1rem; font-weight:500; color:var(--gray-400); }
.card .price-note { font-size:12px; color:var(--gray-400); margin-bottom:20px; }
.card ul { list-style:none; margin-bottom:24px; display:flex; flex-direction:column; gap:10px; }
.card ul li { font-size:.9rem; color:var(--gray-700); display:flex; align-items:flex-start; gap:8px; }
.card ul li::before { content:'✓'; color:var(--success); font-weight:700; flex-shrink:0; margin-top:1px; }
.card ul li.no::before { content:'✗'; color:var(--gray-400); }
.card .card-cta { display:block; text-align:center; width:100%; }

/* ── Social proof ────────────────────────────────────────────── */
.social-proof { padding:64px 0; background:var(--gray-50); text-align:center; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px; max-width:700px; margin:0 auto; }
.stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat-num { font-size:2.2rem; font-weight:800; background:linear-gradient(135deg,var(--brand),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:.85rem; color:var(--gray-500); font-weight:500; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-box { background:white; border:1px solid var(--gray-200); border-radius:16px; padding:40px; max-width:480px; margin:60px auto; box-shadow:var(--shadow-md); }
.form-box h2 { font-size:1.5rem; font-weight:800; margin-bottom:8px; }
.form-box p  { color:var(--gray-500); margin-bottom:28px; font-size:.9rem; }
input, textarea { width:100%; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius:9px; font-size:14px; font-family:inherit; color:var(--gray-900); background:white; transition:border-color .2s; margin-bottom:14px; display:block; }
input:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
label { font-size:13px; font-weight:600; color:var(--gray-700); margin-bottom:6px; display:block; }

/* ── Footer ──────────────────────────────────────────────────── */
footer { background:var(--gray-900); color:var(--gray-400); padding:48px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand h3 { color:white; font-size:1rem; font-weight:800; margin-bottom:8px; }
.footer-brand p  { font-size:.85rem; line-height:1.7; max-width:240px; }
.footer-col h4   { color:white; font-size:.85rem; font-weight:700; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.footer-col ul   { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-col ul li a { font-size:.85rem; color:var(--gray-400); transition:color .2s; }
.footer-col ul li a:hover { color:white; text-decoration:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; align-items:center; justify-content:space-between; font-size:.8rem; flex-wrap:wrap; gap:8px; }

/* ── Legal ───────────────────────────────────────────────────── */
.legal-doc { max-width:780px; margin:0 auto; padding:48px 24px; }
.legal-doc h1 { font-size:2rem; font-weight:800; margin-bottom:6px; }
.legal-doc h2 { font-size:1.1rem; font-weight:700; margin-top:32px; margin-bottom:8px; color:var(--gray-700); }
.legal-doc p  { color:var(--gray-500); margin-bottom:12px; line-height:1.7; }
.lang-switch  { text-align:right; margin-bottom:24px; }
.lang-btn { cursor:pointer; padding:6px 14px; border:1.5px solid var(--gray-200); background:white; margin-left:6px; border-radius:8px; font-size:13px; font-weight:600; transition:all .2s; color:var(--gray-700); }
.lang-btn:hover { border-color:var(--brand); color:var(--brand); }
.lang-btn.active { background:var(--brand); color:white; border-color:var(--brand); }
.content-block { display:none; }
.content-block.active { display:block; }

/* ── Admin ───────────────────────────────────────────────────── */
.dash-card { background:white; padding:28px; border-radius:var(--radius); border:1.5px solid var(--gray-200); text-align:center; transition:all .2s; cursor:pointer; text-decoration:none; color:inherit; display:block; }
.dash-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand); text-decoration:none; }
.dash-icon  { font-size:2.8rem; margin-bottom:14px; display:block; }
.dash-title { font-weight:800; font-size:1.05rem; display:block; margin-bottom:4px; color:var(--gray-900); }
.dash-desc  { color:var(--gray-500); font-size:.85rem; }
.badge-success { background:#d1fae5; color:#065f46; }
.badge-warn    { background:#fef3c7; color:#92400e; }
.badge-error   { background:#fee2e2; color:#991b1b; }
.badge-brand   { background:var(--brand-light); color:var(--brand-dark); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero { padding:64px 0 48px; }
  .hero h1 { font-size:2rem; }
  .pricing-grid { grid-template-columns:1fr; }
  .form-box { padding:28px 20px; }
  .hero-actions { flex-direction:column; align-items:center; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns:1fr; }
  .nav-links a  { display:none; }
}