/* ============================================================
   MyMoltBot Design System v1.0
   INIT_010 B4-a — Replaces System A + System B
   ============================================================ */

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

/* --- 2. CSS Reset --- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}

/* --- 3. Design Tokens --- */
:root{
  /* Neutral palette */
  --ds-bg:#fafaf8;
  --ds-surface:#ffffff;
  --ds-surface-hover:#f5f5f3;
  --ds-border:#e5e5e0;
  --ds-border-subtle:#eeeeea;
  --ds-text:#1a1a2e;
  --ds-text-secondary:#5c5c70;
  --ds-text-tertiary:#8c8c9e;

  /* Navigation & footer */
  --ds-nav-bg:#1a1a2e;
  --ds-nav-text:#e8e8f0;
  --ds-nav-text-muted:#a0a0b8;
  --ds-footer-bg:#1a1a2e;
  --ds-footer-text:#b0b0c0;

  /* Default accent (overridden per domain) */
  --ds-accent:#2563eb;
  --ds-accent-light:rgba(37,99,235,.08);
  --ds-accent-dark:#1d4ed8;
  --ds-accent-pill-bg:rgba(37,99,235,.10);
  --ds-accent-pill-border:rgba(37,99,235,.22);

  /* Spacing */
  --ds-space-xs:4px;
  --ds-space-sm:8px;
  --ds-space-md:16px;
  --ds-space-lg:24px;
  --ds-space-xl:32px;
  --ds-space-2xl:48px;
  --ds-space-3xl:64px;

  /* Radii */
  --ds-radius-sm:6px;
  --ds-radius-md:10px;
  --ds-radius-lg:16px;
  --ds-radius-pill:999px;

  /* Shadows */
  --ds-shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --ds-shadow-md:0 4px 12px rgba(0,0,0,.08);
  --ds-shadow-lg:0 8px 24px rgba(0,0,0,.10);

  /* Layout */
  --ds-max-width:1200px;
  --ds-content-max:820px;
}

/* --- 4. Domain Color Overrides --- */
body.domain-kpr{
  --ds-accent:#b7791f;--ds-accent-light:rgba(183,121,31,.08);--ds-accent-dark:#92600f;
  --ds-accent-pill-bg:rgba(183,121,31,.10);--ds-accent-pill-border:rgba(183,121,31,.22);
}
body.domain-orvantis{
  --ds-accent:#0d9488;--ds-accent-light:rgba(13,148,136,.08);--ds-accent-dark:#0a7568;
  --ds-accent-pill-bg:rgba(13,148,136,.10);--ds-accent-pill-border:rgba(13,148,136,.22);
}
body.domain-growbuddy{
  --ds-accent:#16a34a;--ds-accent-light:rgba(22,163,74,.08);--ds-accent-dark:#128a3d;
  --ds-accent-pill-bg:rgba(22,163,74,.10);--ds-accent-pill-border:rgba(22,163,74,.22);
}
body.domain-clientreport{
  --ds-accent:#2563eb;--ds-accent-light:rgba(37,99,235,.08);--ds-accent-dark:#1d4ed8;
  --ds-accent-pill-bg:rgba(37,99,235,.10);--ds-accent-pill-border:rgba(37,99,235,.22);
}
body.domain-mymoltbot{
  --ds-accent:#6366f1;--ds-accent-light:rgba(99,102,241,.08);--ds-accent-dark:#4f46e5;
  --ds-accent-pill-bg:rgba(99,102,241,.10);--ds-accent-pill-border:rgba(99,102,241,.22);
}

/* --- 5. Base Typography --- */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ds-text);
  background:var(--ds-bg);
}
h1{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.2;margin:0 0 var(--ds-space-md)}
h2{font-size:1.5rem;font-weight:600;line-height:1.3;margin:0 0 var(--ds-space-md)}
h3{font-size:1.125rem;font-weight:600;line-height:1.4;margin:0 0 var(--ds-space-sm)}
p{margin:0 0 var(--ds-space-md);color:var(--ds-text)}
a{color:var(--ds-accent);text-decoration:none;transition:color .15s}
a:hover{text-decoration:underline}

/* --- 6. Layout --- */
.ds-wrap{
  max-width:var(--ds-max-width);
  margin:0 auto;
  padding:0 var(--ds-space-lg);
}
.ds-content{
  max-width:var(--ds-content-max);
}

/* --- 7. Accessibility --- */
.ds-skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000;
}
.ds-skip:focus{
  position:fixed;top:8px;left:8px;width:auto;height:auto;padding:8px 16px;
  background:var(--ds-nav-bg);color:#fff;font-size:14px;text-decoration:none;
  border-radius:var(--ds-radius-sm);z-index:10000;
}
:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ds-accent);outline-offset:2px;box-shadow:0 0 0 4px var(--ds-accent-light);
}

/* --- 8. Header / Navigation --- */
.ds-header{
  position:sticky;top:0;z-index:100;
  background:var(--ds-nav-bg);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ds-header-inner{
  max-width:var(--ds-max-width);
  margin:0 auto;
  padding:0 var(--ds-space-lg);
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:60px;
}
.ds-brand{
  font-weight:600;font-size:1.1rem;
  color:var(--ds-nav-text);
  text-decoration:none;
}
.ds-brand:hover{text-decoration:none;opacity:.9}
.ds-nav{display:flex;gap:var(--ds-space-lg);align-items:center}
.ds-nav a{
  color:var(--ds-nav-text-muted);font-size:.9rem;font-weight:500;
  text-decoration:none;transition:color .15s;
  padding:var(--ds-space-xs) 0;
}
.ds-nav a:hover,.ds-nav a[aria-current="page"]{color:var(--ds-nav-text)}
.ds-nav a[aria-current="page"]{border-bottom:2px solid var(--ds-accent);padding-bottom:2px}

/* --- 9. Hamburger Menu --- */
.ds-hamburger{
  display:none;background:none;border:none;cursor:pointer;padding:8px;
  color:var(--ds-nav-text);
}
.ds-hamburger svg{width:24px;height:24px}
.ds-mobile-menu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--ds-nav-bg);z-index:200;
  flex-direction:column;padding:var(--ds-space-lg);
  overflow-y:auto;
}
.ds-mobile-menu.open{display:flex}
.ds-mobile-close{
  align-self:flex-end;background:none;border:none;cursor:pointer;
  color:var(--ds-nav-text);padding:8px;margin-bottom:var(--ds-space-lg);
}
.ds-mobile-close svg{width:24px;height:24px}
.ds-mobile-menu a{
  display:block;padding:14px 0;
  color:var(--ds-nav-text);font-size:1.1rem;font-weight:500;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);
}
.ds-mobile-menu a:last-child{border-bottom:none}
.ds-mobile-menu a:hover,.ds-mobile-menu a[aria-current="page"]{color:var(--ds-accent)}

/* --- 10. Hero Section --- */
.ds-hero{
  padding:var(--ds-space-3xl) 0 var(--ds-space-2xl);
}
.ds-hero h1{
  font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.1;
  margin-bottom:var(--ds-space-md);
}
.ds-hero p{
  max-width:680px;color:var(--ds-text-secondary);
  font-size:1.1rem;line-height:1.7;
}
.ds-kicker{
  display:inline-block;
  font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ds-accent);
  margin-bottom:var(--ds-space-sm);
}

/* --- 11. Pill / Badge --- */
.ds-pillbar{display:flex;flex-wrap:wrap;gap:var(--ds-space-sm);margin:var(--ds-space-md) 0}
.ds-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--ds-radius-pill);
  background:var(--ds-accent-pill-bg);
  border:1px solid var(--ds-accent-pill-border);
  color:var(--ds-accent);
  font-size:.8125rem;font-weight:500;
}

/* --- 12. Cards --- */
.ds-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--ds-space-lg);
}
.ds-grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ds-grid-5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-md);
  padding:var(--ds-space-lg);
  transition:box-shadow .2s,transform .2s;
  text-decoration:none;
  color:var(--ds-text);
  display:block;
}
.ds-card:hover{
  box-shadow:var(--ds-shadow-md);
  transform:translateY(-2px);
  text-decoration:none;
}
.ds-card h3{color:var(--ds-text);margin-bottom:var(--ds-space-sm)}
.ds-card p{color:var(--ds-text-secondary);margin:0;font-size:.95rem}
.ds-card-meta{font-size:.875rem;color:var(--ds-text-tertiary);margin-top:var(--ds-space-sm)}

/* --- 13. Section --- */
.ds-section{padding:var(--ds-space-2xl) 0}
.ds-section h2{margin-bottom:var(--ds-space-lg)}

/* --- 14. Breadcrumb --- */
.ds-breadcrumb{
  padding:var(--ds-space-md) 0;
  font-size:.875rem;
  color:var(--ds-text-tertiary);
}
.ds-breadcrumb a{color:var(--ds-text-secondary)}
.ds-breadcrumb a:hover{color:var(--ds-accent)}
.ds-breadcrumb span.sep::before{content:" > ";color:var(--ds-text-tertiary)}

/* --- 15. Buttons --- */
.ds-btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:var(--ds-radius-sm);
  font-weight:600;font-size:.95rem;
  text-decoration:none;
  transition:background .15s,transform .1s;
  cursor:pointer;border:none;
}
.ds-btn:hover{text-decoration:none;transform:translateY(-1px)}
.ds-btn-primary{background:var(--ds-accent);color:#fff}
.ds-btn-primary:hover{background:var(--ds-accent-dark);color:#fff}
.ds-btn-secondary{
  background:transparent;
  border:1px solid var(--ds-border);
  color:var(--ds-text);
}
.ds-btn-secondary:hover{border-color:var(--ds-accent);color:var(--ds-accent)}
.ds-cta{display:flex;gap:var(--ds-space-md);flex-wrap:wrap;margin:var(--ds-space-lg) 0}

/* --- 16. Tables --- */
.ds-table-wrap{overflow-x:auto;margin:var(--ds-space-lg) 0}
.ds-table{
  width:100%;border-collapse:collapse;font-size:.95rem;
}
.ds-table th,.ds-table td{
  padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--ds-border);
}
.ds-table th{
  background:var(--ds-accent-light);
  font-weight:600;font-size:.875rem;
  color:var(--ds-text);
}
.ds-table tr:hover td{background:var(--ds-surface-hover)}

/* --- 17. Content / Article --- */
.ds-article{
  max-width:var(--ds-content-max);
  margin:0 auto;
}
.ds-article h2{margin-top:var(--ds-space-2xl)}
.ds-article h3{margin-top:var(--ds-space-xl)}
.ds-article p{line-height:1.75}
.ds-article ul,.ds-article ol{
  padding-left:var(--ds-space-lg);margin:var(--ds-space-md) 0;
}
.ds-article li{margin:var(--ds-space-sm) 0;line-height:1.65}
.ds-article img{border-radius:var(--ds-radius-md);margin:var(--ds-space-lg) 0}

/* --- 18. Tip/Info Box --- */
.ds-tip{
  padding:var(--ds-space-md) var(--ds-space-lg);
  background:var(--ds-accent-light);
  border-left:3px solid var(--ds-accent);
  border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  margin:var(--ds-space-lg) 0;
  font-size:.95rem;
}

/* --- 19. FAQ Accordion --- */
.ds-faq-item{
  border-bottom:1px solid var(--ds-border);
}
.ds-faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--ds-space-md) 0;
  cursor:pointer;font-weight:600;font-size:1rem;
  background:none;border:none;width:100%;text-align:left;
  color:var(--ds-text);
}
.ds-faq-q::after{
  content:"+";font-size:1.25rem;color:var(--ds-text-tertiary);
  transition:transform .2s;flex-shrink:0;margin-left:var(--ds-space-md);
}
.ds-faq-item.open .ds-faq-q::after{content:"\2212"}
.ds-faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.ds-faq-item.open .ds-faq-a{max-height:600px}
.ds-faq-a-inner{
  padding:0 0 var(--ds-space-md);
  color:var(--ds-text-secondary);line-height:1.7;
}

/* --- 20. Table of Contents --- */
.ds-toc{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-md);
  padding:var(--ds-space-lg);
  margin:var(--ds-space-lg) 0;
}
.ds-toc h4{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ds-text-tertiary);margin-bottom:var(--ds-space-md)}
.ds-toc ul{list-style:none;padding:0}
.ds-toc li{margin:var(--ds-space-xs) 0}
.ds-toc a{
  color:var(--ds-text-secondary);font-size:.9rem;
  display:block;padding:4px 0;
}
.ds-toc a:hover{color:var(--ds-accent)}

/* --- 21. Footer --- */
.ds-footer{
  background:var(--ds-footer-bg);
  color:var(--ds-footer-text);
  margin-top:var(--ds-space-3xl);
  padding:var(--ds-space-2xl) 0 var(--ds-space-xl);
}
.ds-footer-inner{
  max-width:var(--ds-max-width);
  margin:0 auto;
  padding:0 var(--ds-space-lg);
}
.ds-footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--ds-space-xl);
  margin-bottom:var(--ds-space-xl);
}
.ds-footer-col h4{
  color:var(--ds-nav-text);font-size:.875rem;font-weight:600;
  margin-bottom:var(--ds-space-md);
}
.ds-footer-col a{
  display:block;color:var(--ds-footer-text);font-size:.875rem;
  padding:4px 0;text-decoration:none;
}
.ds-footer-col a:hover{color:var(--ds-nav-text)}
.ds-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:var(--ds-space-lg);
  font-size:.8125rem;
  display:flex;justify-content:space-between;align-items:center;
}

/* --- 22. Disclosure --- */
.ds-disclosure{
  margin-top:var(--ds-space-lg);
  padding:var(--ds-space-md) var(--ds-space-lg);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface);
  color:var(--ds-text-secondary);
  font-size:.875rem;
}

/* --- 23. Trust Bar --- */
.ds-trust{
  background:var(--ds-surface);
  border-bottom:1px solid var(--ds-border);
  padding:var(--ds-space-md) 0;
}
.ds-trust-inner{
  max-width:var(--ds-max-width);
  margin:0 auto;
  padding:0 var(--ds-space-lg);
  display:flex;justify-content:center;gap:var(--ds-space-xl);
  flex-wrap:wrap;
  font-size:.875rem;color:var(--ds-text-secondary);
}

/* --- 24. 404 Page --- */
.ds-404{
  text-align:center;
  padding:var(--ds-space-3xl) 0;
}
.ds-404 h1{font-size:clamp(3rem,8vw,6rem);color:var(--ds-text-tertiary);margin-bottom:var(--ds-space-md)}
.ds-404 p{color:var(--ds-text-secondary);margin-bottom:var(--ds-space-xl)}

/* --- 25. Price Table --- */
.ds-price-table{
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-md);
  overflow:hidden;
  margin:var(--ds-space-lg) 0;
}
.ds-price-table table{width:100%;border-collapse:collapse}
.ds-price-table th{
  background:var(--ds-accent-light);
  padding:12px 16px;font-weight:600;font-size:.875rem;text-align:left;
}
.ds-price-table td{
  padding:12px 16px;border-top:1px solid var(--ds-border);
}
.ds-price-table tr:hover td{background:var(--ds-surface-hover)}

/* --- 26. Portfolio Hub (mymoltbot.work) --- */
.ds-portfolio{margin:var(--ds-space-2xl) 0}
.ds-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--ds-space-lg);
}
.ds-portfolio-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-xl);
  text-decoration:none;color:var(--ds-text);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.ds-portfolio-card:hover{
  box-shadow:var(--ds-shadow-lg);
  transform:translateY(-3px);
  border-color:var(--ds-accent);
  text-decoration:none;
}
.ds-portfolio-card h3{margin-bottom:var(--ds-space-sm)}
.ds-portfolio-card p{color:var(--ds-text-secondary);margin:0;font-size:.95rem}

/* --- 27. Responsive --- */
@media(max-width:767px){
  .ds-nav{display:none}
  .ds-hamburger{display:block}
  .ds-header-inner{padding:0 var(--ds-space-md)}
  .ds-wrap{padding:0 var(--ds-space-md)}
  .ds-hero{padding:var(--ds-space-2xl) 0 var(--ds-space-xl)}
  .ds-hero h1{font-size:clamp(1.5rem,5vw,2rem)}
  .ds-grid{grid-template-columns:1fr}
  .ds-grid-5{grid-template-columns:repeat(2,1fr)}
  .ds-footer-grid{grid-template-columns:1fr}
  .ds-footer-bottom{flex-direction:column;gap:var(--ds-space-sm)}
  .ds-trust-inner{gap:var(--ds-space-md);font-size:.8rem}
  .ds-cta{flex-direction:column}
  .ds-cta .ds-btn{text-align:center}
}
@media(max-width:479px){
  .ds-grid-5{grid-template-columns:1fr}
  .ds-trust-inner{flex-direction:column;align-items:center}
}