const { Button, Card, Eyebrow, Tag, Input, Select, Icon } = window.SivaliDesignSystem_43a40c; const D = window.SIVALI_DATA;
const Wrap = ({children, style}) => <div style={{maxWidth:'var(--container)',margin:'0 auto',padding:'0 var(--gutter)',...style}}>{children}</div>;
const Sec = ({bg, children, pad='80px 0'}) => <section style={{background:bg||'transparent',padding:pad}}><Wrap>{children}</Wrap></section>;
const H2 = ({children, inverse, style}) => <h2 style={{font:'500 var(--h2-size)/var(--h2-line) var(--font-heading)',color:inverse?'#fff':'var(--text-heading)',margin:'8px 0 0',textWrap:'pretty',...style}}>{children}</h2>;
const Grid = ({n=3, children, gap=24}) => <div style={{display:'grid',gridTemplateColumns:`repeat(${n},minmax(0,1fr))`,gap}}>{children}</div>;
const CtaBand = () => <Sec bg="var(--primary-600)" pad="72px 0"><div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:32,flexWrap:'wrap'}}><div><Eyebrow tone="accent">About us</Eyebrow><H2 inverse>We are part of Digital Transformation since 1999</H2></div><div style={{display:'flex',gap:12}}><Button variant="accent" icon="arrow-right">Read more about us</Button><Button variant="inverse">Contact Us</Button></div></div></Sec>;
Object.assign(window, { Wrap, Sec, H2, Grid, CtaBand });