/* ════════════════════════════════════════════════════════
   CHATIGEN SHARED STYLES
   Used by: index.html, features.html, pricing.html, landing.html
   Contains: design tokens, resets, buttons, header/nav, FAQ accordion
   ════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue-50:#edf4f8;--blue-100:#d6e7f2;--blue-200:#aacde6;--blue-400:#6c8cb8;--blue-600:#486995;--blue-800:#2e4460;--blue-900:#1b2a3c;
  --gray-50:#f8fafa;--gray-100:#f1f3f4;--gray-200:#dde1e5;--gray-400:#8a9299;--gray-600:#52595f;--gray-800:#343e4c;--gray-900:#1e2530;
  --amber-50:#fff8ed;--amber-100:#ffe4b3;--amber-200:#ffc966;--amber-400:#f59e0b;--amber-600:#b45309;--amber-800:#78350f;
  --font-d:'Bricolage Grotesque',sans-serif;--font-b:'Inter',sans-serif;
  --c:1160px;--rmd:14px;--rlg:20px;--rxl:28px;--rpill:100px;
  --sh-sm:0 2px 12px rgba(52,62,76,.07);--sh-md:0 4px 24px rgba(52,62,76,.10);--sh-lg:0 12px 48px rgba(52,62,76,.13);
}

html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--gray-600);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--c);margin:0 auto;padding:0 24px}
.sec{padding:88px 0}
.sec-alt{background:var(--gray-50)}
.sec-blue{background:var(--blue-50)}
h1,h2,h3{font-family:var(--font-d);color:var(--gray-900);line-height:1.15}
h1{font-size:clamp(36px,4.8vw,60px);font-weight:800}
h2{font-size:clamp(26px,3.2vw,42px);font-weight:800}
h3{font-size:19px;font-weight:700}
p{color:var(--gray-600)}

.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-800);background:var(--blue-100);padding:5px 14px;border-radius:var(--rpill)}
.tag-amber{color:var(--amber-800);background:var(--amber-100)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:15px;font-weight:600;padding:13px 26px;border-radius:var(--rpill);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,color .15s;border:2px solid transparent;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-prim{background:var(--blue-600);color:#fff;box-shadow:0 4px 16px rgba(72,105,149,.35)}
.btn-prim:hover{background:var(--blue-800);box-shadow:0 6px 24px rgba(72,105,149,.4)}
.btn-out{border-color:var(--blue-600);color:var(--blue-600);background:transparent}
.btn-out:hover{background:var(--blue-600);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-wht{background:#fff;color:var(--blue-600);border-color:#fff}
.btn-wht:hover{background:var(--blue-50)}
.btn-amber{background:var(--amber-400);color:#fff;border-color:var(--amber-400);box-shadow:0 4px 16px rgba(245,158,11,.3)}
.btn-amber:hover{background:var(--amber-600)}

/* ── HEADER ── */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--gray-200);transition:padding .25s ease}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:26px 0;transition:padding .25s ease}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{height:50px;width:auto;transition:height .25s ease}
.logo-fallback{font-family:var(--font-d);font-size:28px;font-weight:800;color:var(--gray-900);transition:font-size .25s ease}
.logo-fallback span{color:var(--blue-600)}
nav{display:flex;align-items:center;gap:28px}
nav a{font-size:14px;font-weight:500;color:var(--gray-600);text-decoration:none;transition:color .15s}
nav a:hover,nav a.active{color:var(--blue-600)}
.hcta{display:flex;align-items:center;gap:10px}
.hcta .btn{font-size:14px;padding:10px 20px}
.hcta .btn-prim{background:var(--blue-900);box-shadow:0 4px 16px rgba(27,42,60,.25)}
.hcta .btn-prim:hover{background:var(--amber-400);box-shadow:0 4px 16px rgba(245,158,11,.3)}

/* scrolled state - header shrinks */
header.scrolled .hdr{padding:14px 0}
header.scrolled .logo-img{height:32px}
header.scrolled .logo-fallback{font-size:21px}

/* topbar variant (landing page - no menu, just trust line + login) */
.topbar{background:rgba(255,255,255,.97);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100}
.topbar-inner{max-width:var(--c);margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:space-between;transition:padding .25s ease}
.topbar.scrolled .topbar-inner{padding:14px 24px}
.topbar.scrolled .logo-img{height:32px}
.topbar.scrolled .logo-fallback{font-size:21px}
.topbar-trust{font-size:13px;color:var(--gray-400)}
.topbar-trust strong{color:var(--gray-800)}
.topbar-cta{font-size:13px;font-weight:600;color:var(--blue-600);text-decoration:none;transition:color .15s}
.topbar-cta:hover{color:var(--blue-800)}

/* ── MOBILE NAV ── */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;width:36px;height:36px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--gray-800);border-radius:2px;transition:all .25s}
.nav-overlay{display:none;position:fixed;inset:0;background:#fff;z-index:200;flex-direction:column;padding:20px 24px;overflow-y:auto}
.nav-overlay.open{display:flex}
.nav-ov-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
.nav-ov-close{background:none;border:none;cursor:pointer;padding:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.nav-ov-close svg{width:22px;height:22px;stroke:var(--gray-800);fill:none;stroke-width:2;stroke-linecap:round}
.nav-ov-links{display:flex;flex-direction:column}
.nav-ov-links a{font-size:20px;font-weight:700;color:var(--gray-900);text-decoration:none;font-family:var(--font-d);padding:14px 0;border-bottom:1px solid var(--gray-100);transition:color .15s}
.nav-ov-links a:last-child{border-bottom:none}
.nav-ov-links a:hover,.nav-ov-links a.active{color:var(--blue-600)}
.nav-ov-cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.nav-ov-cta .btn{justify-content:center;font-size:15px;padding:13px 20px}

/* ── FAQ ── */
.faq-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;border:1px solid var(--gray-200);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--sh-sm);background:#fff}
.faq-item{border-bottom:1px solid var(--gray-200)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-size:14px;font-weight:600;color:var(--gray-800);cursor:pointer;border:none;background:#fff;text-align:left;transition:background .18s;gap:16px;font-family:var(--font-b)}
.faq-q:hover{background:var(--gray-50)}
.faq-icon{width:22px;height:22px;border-radius:50%;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s,transform .3s}
.faq-icon svg{width:10px;height:10px;stroke:var(--blue-600);transition:transform .3s,stroke .18s}
.faq-item.open .faq-q{background:var(--gray-50)}
.faq-item.open .faq-icon{background:var(--blue-600);transform:rotate(45deg)}
.faq-item.open .faq-icon svg{stroke:#fff}
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-body{max-height:400px}
.faq-a{padding:12px 24px 22px;font-size:14px;color:var(--gray-600);line-height:1.75;background:var(--gray-50)}

@media(max-width:768px){
  nav{display:none}
  .hcta{display:none}
  .nav-burger{display:flex}
  .topbar-trust{display:none}
  .topbar-cta{display:none}
  .hdr{padding:18px 0}
}