:root { --purple:#8000c0; --purple-light:#c0a0ff; --blue:#2c579b; --gray:#ededed; --border:#e1e1e1; --muted:#555; }
* { box-sizing:border-box; }
body { background:#fff; color:#000; font:13px/1.45 Arial,sans-serif; margin:0; }
a { color:#0000ff; }
.site-header { align-items:center; background:#fff; display:flex; justify-content:space-between; margin:auto; max-width:2050px; min-height:96px; padding:14px 5%; }
.site-header img { height:54px; object-fit:contain; width:54px; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; }
.site-nav a { color:var(--purple); font-size:16px; font-weight:bold; padding:12px 20px; text-decoration:none; }
.site-nav a:visited { color:var(--purple); }
.site-nav a:hover { color:var(--blue); text-decoration:underline; }
.intro { background:#dedede; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); min-height:650px; overflow:hidden; padding:70px 4% 42px; position:relative; }
.intro-copy { max-width:920px; padding-top:70px; position:relative; z-index:1; }
.intro h2 { color:#fff; font-size:54px; font-weight:normal; line-height:1.18; margin:0 0 28px; max-width:760px; text-shadow:-1px -1px 0 var(--purple),1px -1px 0 var(--purple),-1px 1px 0 var(--purple),1px 1px 0 var(--purple); }
.intro p { font-size:16px; margin:0 0 22px; max-width:820px; }
.intro-art { align-self:center; max-height:650px; object-fit:contain; opacity:.93; width:100%; }
.version { color:var(--purple); font-weight:bold; }
.section-heading { background:var(--purple); color:#fff; padding:22px; text-align:center; }
.section-heading h2 { font-size:30px; margin:0 0 8px; }
.section-heading p { font-size:16px; margin:0 auto; max-width:820px; }
.section-band { align-items:center; display:flex; justify-content:center; min-height:208px; padding:58px 22px; text-align:center; }
.section-band h2 { color:#fff; font-size:32px; line-height:1.2; margin:0; }
.section-band-purple { background:rgba(128,0,192,.68); }
.section-band-lavender { background:rgba(192,160,255,.68); }
.section-band-gray { background:rgba(165,165,165,.68); }
.section-group > .section-band h2 { font-size:43px; }
.cards { display:grid; gap:28px 22px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:auto; max-width:1140px; padding:36px 22px 52px; }
.card { display:flex; flex-direction:column; min-width:0; }
.card-body { border:1px solid var(--border); flex:1; padding:22px; text-align:center; }
.card h3 { font-size:20px; font-weight:normal; margin:0 0 16px; }
.card p { color:var(--muted); margin:0; }
.button { background:var(--purple); border:1px solid var(--purple); border-radius:4px; color:#fff; display:block; line-height:21px; margin-top:18px; padding:4px 12px; text-align:center; text-decoration:none; }
.button:visited { color:#fff; }
.button:hover { background:var(--purple-light); color:var(--blue); }
.mockup-content { border:1px solid var(--border); margin:48px auto; max-width:760px; min-height:280px; padding:32px; text-align:center; }
.mockup-content h2 { font-size:24px; font-weight:normal; margin:0 0 20px; }
.mockup-description { color:var(--muted); font-size:15px; margin:0 auto 28px; max-width:620px; }
.mockup-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.mockup-actions .button { margin:0; min-width:190px; }
.site-footer { background:var(--gray); color:var(--blue); padding:18px 22px; text-align:center; }
@media(max-width:800px) { .intro { grid-template-columns:1fr; min-height:0; padding-top:36px; } .intro-copy { padding-top:20px; } .intro-art { max-height:420px; } .cards { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .site-header { align-items:flex-start; padding:12px 16px; } .site-header img { height:46px; width:46px; } .site-nav a { font-size:13px; padding:10px 8px; } .intro h2 { font-size:34px; } .intro p { font-size:14px; } .cards { grid-template-columns:1fr; padding:24px 16px 36px; } .mockup-content { margin:24px 16px; padding:24px 18px; } .mockup-actions .button { width:100%; } }