/* ============================================================
   MyBiG.ai — Site styles
   Shared between web/templates/index.html (EN) and
   web/templates/index-es.html (ES).
   Extracted from inline <style> blocks for portability.
   ============================================================ */

:root{
  --bg:#080808;--s1:#0f0f0f;--s2:#141414;--s3:#1a1a1a;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.04);
  --text:#f0f0f0;--muted:#777;--muted2:#3a3a3a;
  --cyan:#33BDEE;--cyan2:rgba(51,189,238,0.12);--cyan3:rgba(51,189,238,0.06);
  --nav-scrolled:rgba(8,8,8,.95);
}
[data-theme="light"]{
  --bg:#f8f8f6;--s1:#f0efed;--s2:#e8e7e4;--s3:#e0dfdc;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.04);
  --text:#0a0a0a;--muted:#666;--muted2:#bbb;
  --cyan:#1a9ecc;--cyan2:rgba(26,158,204,0.1);--cyan3:rgba(26,158,204,0.05);
  --nav-scrolled:rgba(248,248,246,.95);
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]) {
    --bg:#f8f8f6;--s1:#f0efed;--s2:#e8e7e4;--s3:#e0dfdc;
    --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.04);
    --text:#0a0a0a;--muted:#666;--muted2:#bbb;
    --cyan:#1a9ecc;--cyan2:rgba(26,158,204,0.1);--cyan3:rgba(26,158,204,0.05);
    --nav-scrolled:rgba(248,248,246,.95);
  }
}

/* Theme toggle */
.theme-toggle{position:relative}
.theme-btn-main{width:32px;height:32px;border:none;background:transparent;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;color:var(--muted)}
.theme-btn-main:hover{background:rgba(255,255,255,.06);color:var(--text)}
.theme-btn-main svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:130px;box-shadow:0 8px 32px rgba(0,0,0,.2);display:none;flex-direction:column;gap:1px;z-index:500}
.theme-dropdown.open{display:flex}
.theme-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;border:none;background:transparent;width:100%;text-align:left}
.theme-opt:hover{background:var(--s2);color:var(--text)}
.theme-opt.active{color:var(--text);background:var(--s2)}
.theme-opt svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{background:var(--nav-scrolled);backdrop-filter:blur(24px);border-color:var(--border)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:26px}
nav ul{list-style:none;display:flex;gap:4px;align-items:center;flex:1;justify-content:center;min-width:0}
nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:6px 14px;border-radius:6px;transition:color .2s,background .2s;font-weight:400}
nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{background:var(--cyan)!important;color:#fff!important;font-weight:500!important;padding:7px 14px!important;border-radius:6px!important;font-size:12px!important;letter-spacing:.02em}
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
nav a.nav-lang{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.08em;padding:6px 10px;border-radius:6px}
nav a.nav-lang:hover{color:var(--text);background:rgba(255,255,255,.05)}
nav a.nav-platform{font-size:12px;font-weight:500;color:var(--muted);padding:6px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
nav a.nav-platform:hover{color:var(--text);background:rgba(255,255,255,.05)}
nav a.nav-platform .ext{font-size:.85em;opacity:.7}
nav a.active{color:var(--text)!important;background:rgba(128,128,128,.1)}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 48px 80px;position:relative;overflow:hidden;max-width:100%;margin:0 auto}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:40px;opacity:0;animation:up .6s ease .1s forwards}
.hero-eyebrow::before{content:'';width:24px;height:1px;background:var(--cyan);display:block}
.hero h1{font-size:clamp(3rem,5vw,6rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;max-width:600px;opacity:0;animation:up .7s ease .2s forwards}
.hero h1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--muted)}
.hero-sub{margin-top:32px;font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--muted);max-width:440px;opacity:0;animation:up .7s ease .35s forwards}
.hero-actions{margin-top:48px;display:flex;gap:14px;align-items:center;opacity:0;animation:up .7s ease .48s forwards}
.hero-text{position:relative;z-index:2;max-width:48%;padding-left:0}
@media(max-width:900px){.hero-text{max-width:100%}.hero-photo{display:none}}
.btn{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;padding:13px 26px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer;border:none;letter-spacing:.01em}
.btn-primary{background:var(--cyan);color:#fff}
.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-outline{color:var(--muted);border:1px solid var(--border);background:transparent}
.btn-outline:hover{color:var(--text);border-color:rgba(0,0,0,.2);transform:translateY(-1px)}

/* HERO PHOTO */
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:55%;overflow:hidden;pointer-events:none;z-index:1}
.hero-photo img{position:absolute;right:0;bottom:0;height:100%;width:auto;object-fit:cover;object-position:right center;opacity:0;animation:fadein 1.2s ease .5s forwards;display:block}
.hero-photo::before{content:'';position:absolute;left:0;top:0;bottom:0;width:55%;background:linear-gradient(to right,var(--bg) 20%,transparent);z-index:2}
.hero-photo::after{content:'';position:absolute;top:0;left:0;right:0;height:25%;background:linear-gradient(to bottom,var(--bg),transparent);z-index:2}
[data-theme="dark"] .hero-photo img{mix-blend-mode:luminosity;opacity:0;animation:fadein 1.2s ease .5s forwards}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .hero-photo img{mix-blend-mode:luminosity}}

/* TICKER */
.ticker{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden;background:var(--s1)}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 36s linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);padding:0 40px;flex-shrink:0;border-right:1px solid var(--border2)}

/* LAYOUT */
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.section{padding:120px 0;border-top:1px solid var(--border)}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--cyan);display:block}
h2{font-size:clamp(2rem,3.2vw,3.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.08}
h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--muted)}
p.body{font-size:16px;line-height:1.8;color:var(--muted);margin-top:20px}

/* WHAT IS — two col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.what-items{margin-top:8px;display:flex;flex-direction:column;gap:1px}
.what-item{padding:24px 28px;background:var(--s1);border-left:2px solid transparent;transition:all .25s;cursor:default}
.what-item:hover{background:var(--s2);border-left-color:var(--cyan)}
.wi-title{font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.wi-body{font-size:13px;color:var(--muted);line-height:1.7}

/* ECOSYSTEM */
.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:64px}
.eco-card{background:var(--s1);padding:40px 32px;position:relative;overflow:hidden;transition:background .25s}
.eco-card:hover{background:var(--s2)}
.eco-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.eco-card:hover::after{transform:scaleX(1)}
.eco-tag{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px;display:block}
.eco-name{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-bottom:14px;line-height:1}
.eco-desc{font-size:13px;color:var(--muted);line-height:1.75}
.eco-items{margin-top:20px;display:flex;flex-direction:column;gap:5px}
.eco-item{font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:7px}
.eco-item::before{content:'→';color:var(--cyan);font-size:10px;flex-shrink:0;margin-top:2px}
.eco-channels{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.eco-ch{font-size:10px;font-weight:500;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:4px;letter-spacing:.04em}

/* PROBLEMS */
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:64px}
.prob-card{background:var(--s1);padding:36px 32px;transition:background .25s}
.prob-card:hover{background:var(--s2)}
.prob-num{font-family:'Instrument Serif',serif;font-style:italic;font-size:11px;color:var(--muted2);margin-bottom:16px;display:block}
.prob-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.prob-body{font-size:13px;color:var(--muted);line-height:1.7}

/* USE CASES + INDUSTRIES */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);margin-top:64px}
.split-col{background:var(--s1);padding:48px 40px}
.split-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:24px;display:block}
.split-title{font-size:1.4rem;font-weight:600;letter-spacing:-.025em;margin-bottom:24px}
.split-items{display:flex;flex-direction:column;gap:1px}
.split-item{font-size:13px;color:var(--muted);padding:12px 16px;background:var(--s2);display:flex;align-items:center;gap:10px;transition:color .2s}
.split-item:hover{color:var(--text)}
.split-item::before{content:'';width:4px;height:4px;background:var(--cyan);border-radius:50%;flex-shrink:0}
.industry-item{padding:16px 20px;background:var(--s2);margin-bottom:1px;transition:background .2s}
.industry-item:hover{background:var(--s3)}
.ind-name{font-size:14px;font-weight:600;margin-bottom:4px}
.ind-desc{font-size:12px;color:var(--muted);line-height:1.5}
.ind-badge{display:inline-block;margin-top:8px;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--cyan);padding:3px 8px;border-radius:3px}

/* CLIENTS */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:56px}
.client-card{background:var(--s1);padding:28px;transition:background .2s;display:flex;flex-direction:column;justify-content:space-between}
.client-card:hover{background:var(--s2)}
.client-name{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.client-detail{font-size:11px;color:var(--muted2);letter-spacing:.03em}
.client-card.placeholder{position:relative;background:transparent;text-decoration:none!important;color:inherit!important;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:28px}
.client-card.placeholder::after{content:"";position:absolute;inset:6px;border:1.5px dashed var(--muted);border-radius:10px;pointer-events:none;transition:border-color .2s, background .2s}
.client-card.placeholder:hover{background:transparent}
.client-card.placeholder:hover::after{border-color:var(--cyan);background:rgba(0,200,210,.04)}
.client-card.placeholder .placeholder-icon{width:22px;height:22px;color:var(--cyan);position:relative;z-index:1;margin-bottom:2px}
.client-card.placeholder .client-name{color:var(--text)!important;position:relative;z-index:1}
.client-card.placeholder .client-detail{color:var(--cyan)!important;position:relative;z-index:1;font-size:12px}

/* CTA */
.cta-section{padding:160px 48px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--border)}
.cta-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(51,189,238,.06) 0%,transparent 65%);pointer-events:none}
.cta-inner{position:relative;max-width:700px;margin:0 auto}
.cta-section h2{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.04em;line-height:1.05}
.cta-section p{font-size:17px;color:var(--muted);margin:24px auto 0;max-width:400px;line-height:1.7}
.cta-btns{display:flex;gap:14px;justify-content:center;margin-top:44px}

/* ANDY CHAT */
.chat-widget{position:fixed;bottom:28px;right:28px;z-index:400}
.chat-bubble{width:56px;height:56px;background:var(--cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 32px rgba(51,189,238,.35);transition:transform .2s,box-shadow .2s}
.chat-bubble:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(51,189,238,.45)}
.chat-bubble svg{width:24px;height:24px;fill:#000}
.chat-panel{position:absolute;bottom:72px;right:0;width:360px;background:var(--s1);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);display:none;flex-direction:column}
.chat-panel.open{display:flex}
.chat-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--s2)}
.chat-head-avatar{width:32px;height:32px;background:var(--cyan);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.chat-head-name{font-size:13px;font-weight:600}
.chat-head-status{font-size:11px;color:var(--cyan);display:flex;align-items:center;gap:5px}
.chat-head-status::before{content:'';width:5px;height:5px;background:var(--cyan);border-radius:50%;animation:pulse 2s infinite}
.chat-messages{padding:16px;display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto;flex:1}
.msg-andy{background:var(--s2);border-radius:12px 12px 12px 2px;padding:10px 14px;font-size:13px;line-height:1.6;max-width:85%;align-self:flex-start}
.msg-user{background:var(--cyan2);border:1px solid rgba(51,189,238,.2);border-radius:12px 12px 2px 12px;padding:10px 14px;font-size:13px;line-height:1.6;max-width:85%;align-self:flex-end;color:var(--text)}
.chat-form{padding:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.chat-form input{background:var(--s2);border:1px solid var(--border);color:var(--text);padding:10px 14px;font-family:'Instrument Sans',sans-serif;font-size:13px;outline:none;border-radius:8px;transition:border-color .2s;width:100%}
.chat-form input::placeholder{color:var(--muted2)}
.chat-form input:focus{border-color:rgba(51,189,238,.4)}
.chat-form button{background:var(--cyan);color:#fff;border:none;padding:10px;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border-radius:8px;transition:opacity .2s}
.chat-form button:hover{opacity:.88}
.chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.chat-input-row input{flex:1;background:var(--s2);border:1px solid var(--border);color:var(--text);padding:9px 14px;font-family:'Instrument Sans',sans-serif;font-size:13px;outline:none;border-radius:8px;transition:border-color .2s}
.chat-input-row input:focus{border-color:rgba(51,189,238,.4)}
.chat-input-row input::placeholder{color:var(--muted2)}
.chat-input-row button{background:var(--cyan);color:#fff;border:none;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;border-radius:8px;transition:opacity .2s;flex-shrink:0}
.chat-input-row button:hover{opacity:.88}
.hidden{display:none}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:32px 48px;display:flex;justify-content:space-between;align-items:center;background:var(--s1)}
.footer-left{display:flex;align-items:center;gap:16px}
.footer-left img{height:20px;opacity:.5}
[data-theme="light"] .footer-left img{filter:invert(1)}
@media(prefers-color-scheme:light){:root:not([data-theme]) .footer-left img{filter:invert(1)}}
.footer-copy{font-size:12px;color:var(--muted2)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:12px;color:var(--muted2);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--muted)}

/* ANIMATIONS */
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spinr{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes dash{to{stroke-dashoffset:0}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ANDY DEMO */
.demo-section{padding:120px 0;border-top:1px solid var(--border);background:var(--s1);overflow:hidden}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.demo-left .eyebrow{margin-bottom:20px}
.demo-left h2{margin-bottom:20px}
.demo-left p{font-size:15px;line-height:1.8;color:var(--muted)}
.demo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.demo-tag{font-size:11px;font-weight:500;color:var(--muted);border:1px solid var(--border);padding:6px 14px;border-radius:6px;letter-spacing:.04em}
.demo-tag.active{color:var(--cyan);border-color:rgba(51,189,238,.3);background:rgba(51,189,238,.05)}

/* Animated chat */
.demo-chat{background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.dc-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--s2)}
.dc-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid rgba(51,189,238,.3);flex-shrink:0}
.dc-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.dc-name{font-size:13px;font-weight:600}
.dc-status{font-size:10px;color:var(--cyan);display:flex;align-items:center;gap:4px;margin-top:1px}
.dc-status::before{content:'';width:4px;height:4px;background:var(--cyan);border-radius:50%;animation:pulse 2s infinite}
.dc-messages{padding:16px;height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;position:relative;scroll-behavior:smooth}
.dc-msg{max-width:80%;font-size:13px;line-height:1.65;padding:10px 14px;border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.dc-msg.show{opacity:1;transform:translateY(0)}
.dc-msg.andy{background:var(--s2);border-radius:12px 12px 12px 2px;align-self:flex-start}
.dc-msg.user{background:var(--cyan2);border:1px solid rgba(51,189,238,.2);border-radius:12px 12px 2px 12px;align-self:flex-end;color:var(--text)}
.dc-widget{background:rgba(51,189,238,.05);border:1px solid rgba(51,189,238,.2);border-radius:10px;padding:14px;margin-top:4px;max-width:85%;align-self:flex-start;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.dc-widget.show{opacity:1;transform:translateY(0)}
.dc-widget-label{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.dc-widget-field{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;margin-bottom:6px;font-size:11px;color:var(--muted)}
.dc-widget-btns{display:flex;gap:6px;margin-top:8px}
.dc-widget-btn{flex:1;padding:6px;border-radius:5px;font-size:10px;font-weight:600;text-align:center}
.dc-widget-btn.ok{background:rgba(51,189,238,.15);color:var(--cyan);border:1px solid rgba(51,189,238,.3)}
.dc-widget-btn.no{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border)}
.dc-typing{display:flex;gap:4px;align-items:center;padding:10px 14px;background:var(--s2);border-radius:12px;align-self:flex-start;opacity:0;transition:opacity .3s}
.dc-typing.show{opacity:1}
.dc-typing span{width:5px;height:5px;background:var(--muted);border-radius:50%;animation:typing .9s ease-in-out infinite}
.dc-typing span:nth-child(2){animation-delay:.2s}
.dc-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* LEGALTECH */
.legal-section{padding:120px 0;border-top:1px solid var(--border)}
.legal-hero-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);margin-top:64px}
.legal-card{background:var(--s1);padding:44px 36px;position:relative;overflow:hidden;transition:background .25s}
.legal-card:hover{background:var(--s2)}
.legal-card-bar{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.legal-card:hover .legal-card-bar{transform:scaleX(1)}
.legal-card-num{font-family:'Instrument Serif',serif;font-style:italic;font-size:12px;color:var(--muted2);margin-bottom:20px;display:block}
.legal-card-title{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.legal-card-desc{font-size:13px;color:var(--muted);line-height:1.8}
.legal-card-items{margin-top:20px;display:flex;flex-direction:column;gap:6px}
.legal-card-item{font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.legal-card-item::before{content:'→';color:var(--cyan);font-size:10px;flex-shrink:0;margin-top:1px}
.legal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:1px}
.legal-stat{background:var(--s2);padding:28px 32px}
.legal-stat-n{font-size:2.6rem;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--cyan)}
.legal-stat-l{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

/* Light mode SVG logo fix in graphic */
[data-theme="light"] .hero-graphic image{filter:invert(1) hue-rotate(180deg) brightness(.15)}
@media(prefers-color-scheme:light){:root:not([data-theme]) .hero-graphic image{filter:invert(1) hue-rotate(180deg) brightness(.15)}}

/* MOBILE */
@media(max-width:900px){
  nav{padding:0 24px}
  nav ul{display:none}
  .hero{padding:88px 24px 80px}
  .hero-graphic{display:none}
  .hero h1{font-size:clamp(2.4rem,8vw,3.5rem)}
  .wrap{padding:0 24px}
  .two-col,.split-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr 1fr}
  .problems-grid{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:1fr 1fr}
  footer{flex-direction:column;gap:16px;text-align:center;padding:24px}
  .cta-section{padding:100px 24px}
  .chat-panel{width:300px}
}

/* ============================================================
   Utility / variant classes — extracted from inline styles
   ============================================================ */

/* Hero section wrapper */
.hero-section{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}

/* Section variants */
.section-alt{background:var(--s1)}

/* Body paragraph width variants */
.body-560{max-width:560px}
.body-480{max-width:480px}

/* Utility spacing */
.mt-12{margin-top:12px}
.mt-80{margin-top:80px}
.mt-1{margin-top:1px}

/* Center utilities */
.text-center{text-align:center}
.eyebrow.center{justify-content:center}

/* Graphic container */
.graphic-container{max-width:560px;margin:0 auto}

/* Demo chat input row (was inline on 3 elements) */
.dc-input-row{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--s2);align-items:center}
.dc-input{flex:1;background:var(--s3);border:1px solid var(--border);color:var(--text);padding:9px 14px;font-family:'Instrument Sans',sans-serif;font-size:13px;border-radius:8px;min-height:36px;display:flex;align-items:center;transition:border-color .2s}
.dc-send-btn{background:var(--cyan);color:#fff;padding:9px 16px;font-size:13px;font-weight:600;border-radius:8px;opacity:.3;transition:opacity .2s;flex-shrink:0}

/* Chat bubble with image (overrides chat-bubble defaults) */
.chat-bubble.with-img{overflow:hidden;padding:0}
.chat-bubble.with-img img{width:100%;height:100%;object-fit:cover;object-position:top}

/* Demo widget interactive buttons + success field */
.dc-widget-btn{cursor:pointer}
.dc-widget-field.success{color:rgba(62,207,142,.8)}

/* Inline links inside copy */
.link-accent{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(51,189,238,.3)}
.link-plain{color:var(--text);text-decoration:none}
.mb-16{margin-bottom:16px}

/* ============================================================
   Health vertical — trust strip (above-fold proof)
   Used in web/templates/index-health.html right under hero.
   ============================================================ */
.trust-strip{padding:24px 0;border-bottom:1px solid var(--border);background:var(--s1)}
.trust-strip .wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.trust-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);flex-shrink:0}
.trust-items{display:flex;gap:24px;flex-wrap:wrap;flex:1}
.trust-item{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-.01em}
@media(max-width:900px){.trust-strip .wrap{flex-direction:column;align-items:flex-start;gap:12px}.trust-items{gap:16px}}