/* Minimal, clean, and responsive styles for the landing page */
:root{
  --bg:#fafafa; --card:#ffffff; --ink:#111; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0f172a; --accent:#14b8a6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter', ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);}
a{color:inherit;text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nowrap{white-space:nowrap}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(8px);border-bottom:0;box-shadow:0 1px 0 rgba(15,23,42,.08);z-index:20}
.nav{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:8px 0}
.brand{display:flex;gap:8px;align-items:center}
.logo{width:clamp(84px,11vw,120px);min-height:48px;display:flex;align-items:center;justify-content:flex-start;padding:0;background:transparent;border:none;flex-shrink:0}
.brand-text{line-height:1.1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.brand-name{font-weight:600}
.brand-tag{font-size:12px;color:var(--muted)}
.logo img{width:100%;height:auto;object-fit:contain;display:block}
.nav-links{display:none;gap:16px}
.nav-cta{display:flex;gap:8px}
@media(min-width:768px){.nav-links{display:flex}}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:600;border:1px solid var(--line)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-outline{background:#fff;color:var(--ink)}
.button-row{display:flex;gap:12px;flex-wrap:wrap}

.chip{display:inline-flex;align-items:center;gap:8px;font-size:15px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff}

.hero{padding:64px 0 36px}
.hero-grid{display:grid;gap:24px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr}}
.hero h1{font-size:40px;line-height:1.1;margin:16px 0 0}
.hero p{font-size:18px;color:var(--muted);margin:16px 0}
.hero-cta{display:flex;gap:2px;flex-wrap:wrap;margin-top:5px}
.hero-card .hero-cta{justify-content:center}
.micro{font-size:14px;color:var(--muted);font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between}
.card-title{font-weight:600}
.code-block{background:#0b0f19;color:#e5e7eb;border-radius:1px;padding:1px;overflow:auto;max-height:400px;overflow:auto}

/* Custom Scrollbar for Webkit Browsers 
.code-block::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-block::-webkit-scrollbar-track {
  background: #0b0f19;
  border-radius: 10px;
}

.code-block::-webkit-scrollbar-thumb {
  background-color: #0b0f19;
  border-radius: 10px;
  border: 2px solid #0b0f19;
}

.code-block::-webkit-scrollbar-thumb:hover {
  background-color: #0b0f19;
}*/
.pill-grid{display:grid;gap:8px;margin-top:12px}
@media(min-width:680px){.pill-grid{grid-template-columns:repeat(3,1fr)}}
.pill{background:#f3f4f6;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px}
.pill-title{display:block;font-weight:600;text-align:left}
.pill-copy{display:block;margin-top:4px;text-align:left;color:var(--muted)}

.strip{padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}

.section{padding:30px 0}
.section.alt{background:#fff;border-top:1px solid var(--line)}
.cards{display:grid;gap:16px}
.cards.three{grid-template-columns:repeat(1,1fr)}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}.cards.three{grid-template-columns:repeat(3,1fr)}}
.feature{display:flex;flex-direction:column;gap:8px}
.feature-title{display:flex;align-items:center;gap:8px}
.feature-title h3{margin:0;line-height:1}
.feature-title .icon svg{display:block}
.feature p{margin:4px 0 0}
.icon-dot{width:36px;height:36px;border-radius:12px;background:var(--brand);opacity:.9}

.grid-2{display:grid;gap:20px}
@media(min-width:900px){.grid-2{grid-template-columns:450px minmax(0, 1fr)}}
.list{padding-left:18px} .list li{margin:8px 0}
.list.tight div{margin:6px 0}

.img-frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#f3f4f6}
/* .img-frame img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain} */
/* .img-frame svg{display:block;width:100%;height:auto;max-width:100%} */

.timeline{display:grid;gap:10px}
.tl-item{display:flex;gap:10px;align-items:flex-start}
.tl-dot{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px}
.tl-box{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f8fafc}
.tl-meta{font-size:12px;color:var(--muted);margin-bottom:4px}

.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.form input[type=email]{flex:1;min-width:220px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}

.site-footer{border-top:1px solid var(--line);background:#fff;padding:40px 0}
.footer-grid{display:grid;gap:20px}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.col-head{font-weight:600;margin-bottom:8px}
.col-links{list-style:none;padding:0;margin:0}
.col-links li{margin:6px 0}
.muted{color:#9ca3af}

.faq-accordion .faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 8px 0;
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
}
.faq-question:hover {
  color: var(--brand);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.faq-answer p {
  margin: 0 0 8px;
  color: var(--muted);
}
.faq-icon {
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.3s ease-out;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}