/* landing.css — Cebula landing page. Refined dark (Linear/Vercel feel). */

:root {
  --bg-base: #f5fbff;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f1f8fd;
  --bg-subtle: #eaf3fa;
  --border: #d0e2f1;
  --border-subtle: #e0edf7;
  --accent: #14BBA6;
  --accent-hover: #2fd7c2;
  --accent-muted: #14bba629;
  --text-primary: #0a2a45;
  --text-secondary: #446683;
  --text-tertiary: #6e8ca8;
  --warning: #F59E0B;
  --destructive: #EF4444;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 375px;
  background:
    radial-gradient(1200px 600px at 50% -240px, #d8eefd 0%, transparent 60%),
    var(--bg-base);
  color: var(--text-primary);
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 16px;
}
.display {
  font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 24px;
}
.heading { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
.hero-sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 560px; margin: 0 auto 40px; }
.section-sub { color: var(--text-secondary); margin: 0; max-width: 560px; }

/* Buttons */
.btn-primary {
  display: inline-block; background: var(--accent); color: #000; font-weight: 500;
  padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;
  text-decoration: none; transition: all 200ms ease; font-family: inherit; font-size: .95rem;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  display: inline-block; background: transparent; border: 1px solid var(--border);
  color: var(--text-primary); padding: 10px 20px; border-radius: 8px; cursor: pointer;
  text-decoration: none; transition: all 200ms ease; font-family: inherit; font-size: .95rem;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50; height: 60px;
  background: rgba(245, 251, 255, 0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { max-width: 1180px; margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.logo-img { display: inline-block; width: auto; height: 32px; }
.logo-fallback { display: none; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link { color: var(--text-secondary); text-decoration: none; font-size: .95rem; transition: color 200ms ease; }
.nav-link:hover { color: var(--text-primary); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 1px; }

/* Sections */
.section { max-width: 1180px; margin: 0 auto; padding: 120px 24px; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head .section-sub { margin: 0 auto; }

/* Hero */
.hero { max-width: 720px; margin: 0 auto; padding: 120px 24px 80px; text-align: center; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-rule { height: 1px; margin: 80px auto 0; max-width: 480px; background: var(--border); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }

/* Cards */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; transition: all 200ms ease; }
.tool { display: flex; flex-direction: column; gap: 20px; position: relative; }
.card.tool:hover { border-color: var(--accent-muted); background: var(--bg-surface-hover); }
.tools-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.tool-icon { font-size: 32px; line-height: 1; }
.tool-logo { width: 100%; max-width: 260px; height: auto; }
.tool-logo-soon { filter: saturate(.4) opacity(.5); }
.tool-icon-live, .tool-icon-ph { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.tool-icon-live { background: var(--accent-muted); }
.tool-icon-live img { width: 32px; height: 32px; object-fit: contain; }
.tool-icon-ph { background: var(--bg-subtle); border: 1px dashed var(--border); color: var(--text-tertiary); }
.tool-icon-ph svg { width: 26px; height: 26px; }
.tool-name { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.tool-desc { color: var(--text-secondary); margin: 0; font-size: .95rem; }
.tool .btn-primary, .tool .btn-ghost { align-self: flex-start; }

/* Badges */
.badge { align-self: flex-start; display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.badge-live { background: var(--accent); color: #05324f; }
.badge-soon { background: var(--bg-subtle); color: var(--text-tertiary); }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: .75rem; color: var(--text-secondary); border: 1px solid var(--border); background: var(--bg-subtle); border-radius: 999px; padding: 3px 10px; }

/* Waitlist */
.waitlist { display: flex; gap: 8px; flex-wrap: wrap; }
.waitlist input[type=email] { flex: 1; min-width: 160px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 10px 14px; font-family: inherit; }
.waitlist input::placeholder { color: var(--text-tertiary); }
.waitlist input:focus { border-color: var(--accent); outline: none; }

/* About */
.section-about { border-top: 1px solid var(--border-subtle); }
.about-grid { display: grid; grid-template-columns: 60% 40%; gap: 48px; align-items: start; }
.about-links { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.link-card { display: inline-block; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-primary); padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: .9rem; transition: all 200ms ease; }
.link-card:hover { border-color: var(--accent); color: var(--accent); }
.about-right .card .link-card { margin-top: 8px; }

/* Footer */
.footer { border-top: 1px solid var(--border-subtle); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 32px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand { color: var(--text-secondary); font-size: .9rem; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: .9rem; transition: color 200ms ease; }
.footer-links a:hover { color: var(--text-primary); }

/* Desktop */
@media (min-width: 768px) { .tools-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile */
@media (max-width: 767px) {
  .section { padding: 80px 24px; }
  .hero { padding: 80px 24px 64px; }
  .card { padding: 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .logo-img { height: 28px; }
  .nav-toggle { display: flex; }
  .nav-links { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); padding: 8px 24px 16px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links .nav-link { padding: 12px 0; }
  .nav-links .btn-primary { text-align: center; margin-top: 8px; }
}