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

/* ====== Design tokens ====== */
:root{
  --bg: #ffffff;
  --text: #111827;           /* gray-900 */
  --muted: #6b7280;          /* gray-500/600 mix */
  --border: #e5e7eb;         /* gray-200 */
  --soft: #f9fafb;           /* gray-50 */
  --soft-2: #f3f4f6;         /* gray-100 */
  --ink-700: #374151;        /* gray-700 */
  --ink-800: #1f2937;        /* gray-800 */

  --indigo-50: #eef2ff;
  --indigo-100:#e0e7ff;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;

  --radius: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow: 0 10px 25px rgba(2, 6, 23, .08);
  --shadow-lg: 0 20px 40px rgba(2, 6, 23, .12);

  --container: 1200px;
}

/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink-800);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--indigo-600); }

.container{ width: min(var(--container), 100% - 2rem); margin-inline: auto; }

.section{ padding-block: 4rem; }
@media (min-width: 768px){
  .section{ padding-block: 6rem; }
}
.section--muted{ background: var(--soft); }

.section__header{ text-align: center; margin-bottom: 3.5rem; }
.section__header h2{ font-size: clamp(1.875rem, 2vw + 1rem, 2rem); line-height: 1.2; margin: 0 0 .75rem; }
.section__header p{ color: var(--muted); font-size: 1.125rem; margin: 0 auto; max-width: 56ch; }

/* ====== Utilities ====== */
.gradient-text{
  background: linear-gradient(90deg, var(--indigo-600), #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-center{ text-align: center; }

.rounded{ border-radius: var(--radius); }
.rounded-lg{ border-radius: var(--radius-lg); }

.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow{ box-shadow: var(--shadow); }
.shadow-lg{ box-shadow: var(--shadow-lg); }

.is-hidden{ display: none !important; }
.rotate-180{ transform: rotate(180deg); }

.muted{ color: var(--muted); }

/* Simple grids */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ====== Nav ====== */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--soft-2);
  padding-block: 1rem;
}
.nav__inner{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__brand img{ height: 32px; }
.nav__links{ display: none; gap: 2rem; align-items: center; }
.nav__actions{ display: flex; gap: 1rem; align-items: center; }
.nav__link{ color: #374151; font-weight: 500; }
.nav__link:hover{ color: var(--indigo-600); }
.nav__link--active{ color: var(--indigo-600); }

.nav__menu-btn{ display: inline-flex; background: transparent; border: 0; color: #374151; }
@media (min-width: 768px){
  .nav__links{ display: flex; }
  .nav__menu-btn{ display: none; }
}

/* ====== Buttons ====== */
.btn{
  --p: 0.875rem 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--p);
  border-radius: 10px;
  font-weight: 600;
  transition: transform .06s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  border: 1px solid transparent;
  text-align: center;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--indigo-600); color:#fff; }
.btn-primary:hover{ background: var(--indigo-700); }
.btn-outline{ background:#fff; color:#374151; border-color: var(--border); }
.btn-outline:hover{ background: var(--soft-2); }

/* Segmented toggle */
.segmented{
  display: inline-flex; background:#fff; border:1px solid var(--border); padding:.25rem;
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.segmented .btn-toggle{
  padding:.5rem 1rem; border-radius: 8px; border:0; background:transparent; font-weight:600; color:#374151;
  transition: background .2s ease, color .2s ease;
}
.segmented .btn-toggle.is-active{ background: var(--indigo-600); color:#fff; }

/* ====== Hero ====== */
.hero{
  background: linear-gradient(135deg, var(--soft) 0%, #fff 70%);
}
.hero__wrap{
  display: grid; gap: 3rem;
}
@media (min-width: 768px){
  .hero__wrap{ grid-template-columns: 1fr 1fr; align-items: center; }
}
.hero--center .hero__wrap{ grid-template-columns: 1fr; text-align: center; }
.hero h1{
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.hero p.lead{
  color: var(--muted);
  font-size: 1.125rem;
  margin: 0 0 2rem;
}
.hero__image img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ====== Logo row ====== */
.logos p{ color: #6b7280; margin: 0 0 2rem; }
.logo-grid{ display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){ .logo-grid{ grid-template-columns: repeat(5, 1fr); } }
.logo-box{
  height: 64px; border-radius: 10px; background: var(--soft-2);
  opacity: .7;
}

/* ====== Cards / Features ====== */
.card{
  background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }

.icon-badge{
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--indigo-100); color: var(--indigo-600);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}

/* ====== Steps ====== */
.step-card{ background:#fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.step{ display: flex; align-items:center; gap: 1rem; margin-bottom: 1rem; }
.step__num{
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--indigo-600); color:#fff; font-weight: 700;
  display: inline-flex; align-items:center; justify-content:center;
}

/* ====== Split features ====== */
.split{ display: grid; gap: 3rem; }
@media (min-width: 768px){ .split{ grid-template-columns: 1fr 1fr; align-items: center; } }
.feature-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.25rem; }
.feature-item{ display:flex; gap:.75rem; align-items:flex-start; color:#374151; }
.feature-item .icon{ background: var(--indigo-100); color: var(--indigo-600); padding:.5rem; border-radius:10px; }

/* ====== Testimonial ====== */
.testimonial{
  background: var(--indigo-600); color: #fff;
}
.testimonial .quote{ color: #c7d2fe; }
.testimonial .avatar{ width:64px; height:64px; background:#c7d2fe; border-radius:999px; }

/* ====== CTA ====== */
.cta{
  background: linear-gradient(90deg, var(--indigo-50), #eff6ff);
  border-radius: 20px;
  text-align: center;
  padding: 2rem;
}
@media (min-width: 768px){ .cta{ padding: 3rem; } }
.cta p{ color: var(--muted); }

/* ====== Footer ====== */
.footer{
  background: #0f172a;
  color: #94a3b8;
}
.footer h4{ color: #fff; margin: 0 0 1rem; }
.footer .brand img{ height: 32px; margin-bottom: 1.25rem; }
.footer a{ color: #94a3b8; }
.footer a:hover{ color: #fff; }
.footer .grid{ grid-template-columns: 1fr; }
@media (min-width: 768px){ .footer .grid{ grid-template-columns: repeat(4, 1fr); } }
.footer .subscribe{ display:flex; gap:0; }
.input{
  appearance:none; outline: none; border: 0;
  background: #111827; color:#fff;
  padding: .75rem 1rem; border-radius: 10px 0 0 10px;
  width: 100%;
  border: 1px solid #1f2937;
}
.input:focus{ box-shadow: 0 0 0 2px var(--indigo-600) inset; }
.btn-icon{
  border-radius: 0 10px 10px 0;
  padding: .75rem 1rem;
}

/* ====== Helpers ====== */
.mb-1{ margin-bottom: .25rem; }
.mb-2{ margin-bottom: .5rem; }
.mb-3{ margin-bottom: .75rem; }
.mb-4{ margin-bottom: 1rem; }
.mb-6{ margin-bottom: 1.5rem; }
.mb-8{ margin-bottom: 2rem; }
.mb-12{ margin-bottom: 3rem; }
.max-w-2xl{ max-width: 44rem; margin-inline: auto; }
.max-w-3xl{ max-width: 56rem; margin-inline: auto; }

/* ===== Integrations page extras ===== */
.integration-card { transition: transform .2s ease, box-shadow .2s ease; }
.integration-card:hover { transform: translateY(-4px); }
.logo-sq{ width: 64px; height: 64px; border-radius: 12px; background: var(--soft-2); flex-shrink: 0; margin-right: 1rem; }
.link-inline { color: var(--indigo-600); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.panel { background: var(--soft); padding: 1rem; border-radius: var(--radius); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
@media (min-width:768px){ .chips{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.chip { background: #fff; border: 1px solid var(--soft-2); padding: .35rem .75rem; border-radius: 999px; font-size: .875rem; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 999; padding: 1rem; }
.modal.is-open { display: flex; }
.modal__dialog { background: #fff; border-radius: var(--radius-lg); width: min(720px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal__body { padding: 1.5rem; }
.modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.modal__brand { width: 64px; height: 64px; background: var(--soft-2); border-radius: 12px; margin-bottom: .75rem; }
.icon-btn { background: none; border: 0; color: #6b7280; cursor: pointer; }
.icon-btn:hover { color: #111827; }
.columns { display: grid; gap: 1.25rem; }
@media (min-width:768px){ .columns{ grid-template-columns: 1fr 1fr; } }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.list li { display: flex; gap: .5rem; align-items: flex-start; }
.list .ok { color: #10b981; }
.list .info { color: #3b82f6; }

/* ===== Pricing page extras ===== */
.plan{ position: relative; }
.plan--featured{ border:2px solid var(--indigo-600); box-shadow: var(--shadow); }
.badge{
  position:absolute; top:-12px; right:20px;
  background: var(--indigo-600); color:#fff; padding: 4px 12px;
  border-radius: 9999px; font-size:.75rem; font-weight:700;
}
.price{
  display:flex; align-items: baseline; gap:.5rem; margin-bottom: 1rem;
}
.price__value{ font-size: clamp(2rem, 3vw + 1rem, 2.5rem); font-weight: 800; }
.price__unit{ color: var(--muted); }
.price__note{ font-size:.9rem; color: var(--muted); margin-top:.25rem; }

.icon-check{ color:#10b981; margin-right:.75rem; margin-top:.15rem; }

/* FAQ */
.faq{ border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.faq + .faq{ margin-top: 1rem; }
.faq__btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem; background:#fff; border:0; text-align:left; font-weight:600; cursor:pointer;
}
.faq__content{ padding: 0 1.25rem 1.25rem; color: var(--muted); }
.faq__btn[aria-expanded="true"] .chev{ transform: rotate(180deg); transition: transform .2s ease; }

/* --- Nav container width tweak (align brand further left) --- */
/* Make the nav container wider (Tailwind-like) so the logo sits closer to the viewport edge */
.nav .container{ 
  width: calc(100% - 2rem);   /* keeps 1rem side padding */
  max-width: 1280px;          /* lg screens: similar to Tailwind's container */
}

@media (min-width: 1536px){
  .nav .container{
    max-width: 1536px;        /* 2xl screens: match Tailwind's wider container */
  }
}

/* (Optional) make sure the brand box hugs the left with no extra offset */
.nav__brand{ display:flex; align-items:center; }
.nav__brand img{ display:block; height:32px; }

/* ===== Contact form (light fields) ===== */
.form { display:grid; gap:1rem; }
.form .row-2 { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:768px){ .form .row-2 { grid-template-columns:1fr 1fr; } }

.label { display:block; font-weight:600; margin-bottom:.35rem; }

.field, .select, .textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--ink-800);
}
.field:focus, .select:focus, .textarea:focus{
  outline:none;
  box-shadow:0 0 0 2px var(--indigo-600) inset;
}
.textarea{ min-height:140px; resize:vertical; }

/* honeypot hides from users, visible to bots */
.honeypot{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* form feedback */
.form-message{ margin-top:1rem; }
.alert{ padding:.75rem 1rem; border-radius:10px; border:1px solid transparent; }
.alert--ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.alert--err{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* ===== About page extras ===== */
.grid-4 { grid-template-columns: 1fr; }
@media (min-width:768px){ .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Team */
.team-member{ text-align:center; }
.team-photo{
  width:160px; height:160px; border-radius:9999px; object-fit:cover;
  display:block; margin:0 auto 1rem; box-shadow: var(--shadow);
}
.team-member .role{ color: var(--muted); margin:.25rem 0 .75rem; }

/* Roadmap timeline */
.roadmap{ display:grid; gap:1rem; }
.roadmap-item{ display:grid; grid-template-columns: 120px 1fr; gap:1rem; align-items:start; }
.roadmap-date{ font-weight:700; color: var(--indigo-600); }
.roadmap-content{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow-sm); }

/* ===== Legal page extras ===== */
.tabs { display: grid; gap: 1rem; }
.tab-buttons{
  display:flex; gap:.5rem; flex-wrap:wrap;
  background:#fff; border:1px solid var(--border);
  padding:.25rem; border-radius:12px; box-shadow: var(--shadow-sm);
}
.tab-button{
  padding:.5rem 1rem; border:0; background:transparent;
  border-radius:8px; font-weight:600; color:#374151; cursor:pointer;
}
.tab-button.is-active{ background: var(--indigo-600); color:#fff; }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.legal-copy h2{ margin: 0 0 .5rem; }
.legal-copy h3{ margin: 1.25rem 0 .5rem; }
.legal-copy p, .legal-copy ul { color: var(--muted); }
.legal-copy ul{ padding-left: 1.25rem; }

/* Cookie table */
.cookie-table{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
}
.cookie-table thead th{
  background: var(--soft);
  font-weight:700;
}
.cookie-table th, .cookie-table td{
  text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--border);
}
.cookie-table tbody tr:last-child td{ border-bottom:0; }