.showcase { --ink:#232820; --paper:#f5f3eb; --olive:#52613a; color:var(--ink); max-width:1180px; margin:auto; font-family:'Trebuchet MS',sans-serif; line-height:1.65; }
.showcase *, .showcase *::before, .showcase *::after { box-sizing:border-box; }
.showcase a { text-decoration:none; color:inherit; }
.showcase button { font:inherit; cursor:pointer; }
.lab-nav { display:flex; justify-content:flex-end; gap:28px; padding:12px 0 28px; border-bottom:1px solid #d7d9cc; font-size:14px; }
.lab-nav a:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; padding:75px 0; align-items:center; }
.showcase .eyebrow { font-size:11px; letter-spacing:2px; font-weight:700; margin:0 0 20px; color:var(--olive); }
.showcase h1 { font-family:Georgia,serif; font-size:clamp(38px,4.8vw,66px); line-height:1.12; letter-spacing:-2px; margin:0 0 28px; font-weight:400; }
.showcase h1 em { color:var(--olive); }
.showcase h2 { font-family:Georgia,serif; font-size:clamp(28px,3vw,40px); line-height:1.2; margin:0 0 22px; font-weight:400; }
.showcase h3 { font-size:21px; line-height:1.35; margin:18px 0 12px; font-weight:600; }
.showcase p { margin:0 0 22px; }
.intro { font-size:18px; max-width:650px; color:#5b6155; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin:28px 0; }
.showcase .action { display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border:1px solid #52613a; border-radius:4px; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }
.action:hover { transform:translateY(-2px); }
.showcase .primary { background:var(--olive); color:white; }
.showcase .secondary { background:transparent; color:var(--olive); }
.showcase .light { background:#e5eccf; color:#253121; border-color:#e5eccf; }
.showcase .small-note { font-size:12px; color:#68705f; margin-top:18px; }
.evo-preview { display:block; background:#253121; color:#eff3e5 !important; min-height:440px; padding:28px; border-radius:6px; position:relative; overflow:hidden; background-image:radial-gradient(ellipse at 50% 38%,#53614280,transparent 65%); }
.preview-top { display:flex; justify-content:space-between; font-size:10px; letter-spacing:1.5px; }
.evo-face { margin:60px auto 25px; width:190px; height:115px; border:1px solid #a7b98a70; border-radius:50% 50% 40% 40%; display:flex; justify-content:center; align-items:center; gap:45px; box-shadow:0 0 70px #b0cf6320; }
.evo-face span { width:11px; height:29px; border-radius:100%; background:#d9edab; box-shadow:0 0 22px #d9edab; }
.evo-preview h2 { font-size:68px; margin:0; letter-spacing:-4px; }
.evo-preview p { font-size:14px; color:#c6d0b7; }
.section { padding:56px 0; border-top:1px solid #d7d9cc; scroll-margin-top:24px; }
.section>p { max-width:740px; color:#5b6155; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:36px; }
.service-grid article { border-top:2px solid #aab58f; padding-top:20px; }
.service-grid article>span { font-family:Georgia,serif; color:var(--olive); font-size:24px; }
.service-grid p { color:#5b6155; font-size:15px; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.demo-card { padding:34px; background:#eeeee5; border:1px solid #d9dccd; border-radius:5px; }
.demo-card h3 { font-family:Georgia,serif; font-size:32px; font-weight:400; }
.badge { font-size:10px; letter-spacing:1px; padding:6px 9px; border:1px solid currentColor; border-radius:3px; display:inline-block; }
.dark { background:#253121; color:#edf1e4; }
.dark .small-note { color:#c2ccb4; }
.closing { padding:60px 0; max-width:770px; }
.evo-intro { padding:65px 0; }
.evo-workspace { display:grid; grid-template-columns:330px 1fr; background:#f7f7f0; border:1px solid #d7d9cc; border-radius:6px; overflow:hidden; margin-bottom:65px; scroll-margin-top:20px; }
.scenario-panel { padding:30px; background:#e9eddf; }
.scenario-panel h2 { font-size:30px; }
.scenario { display:flex; gap:12px; align-items:center; width:100%; text-align:left; border:1px solid transparent; border-bottom-color:#cdd5bd; padding:16px 8px; background:transparent; color:#33402a; font-size:14px !important; }
.scenario span:last-child { margin-left:auto; }
.scenario.selected { background:#52613a; color:white; border-radius:4px; }
.conversation-header { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:22px 28px; border-bottom:1px solid #d7d9cc; font-size:13px; align-items:center; }
.conversation-body { padding:30px; min-height:410px; }
.user-bubble { padding:15px 20px; background:#e9eddf; border-radius:4px; margin-bottom:28px; }
.source { border-left:3px solid #88996c; padding:12px 18px; background:#eff1e7; margin:22px 0; }
.source span { font-size:10px; letter-spacing:1px; color:var(--olive); }
.source p { font-size:13px; margin:6px 0 0; }
.approval { border:1px solid #ccd5b7; padding:20px; border-radius:4px; }
.approval p { font-size:14px; margin:10px 0 18px; }
.action:disabled { opacity:.65; cursor:default; transform:none; }
.restart { margin:0 30px 24px; background:transparent; border:0; color:var(--olive); text-decoration:underline; font-size:13px !important; }
.showcase :focus-visible { outline:3px solid #b8985f; outline-offset:4px; }
@media(max-width:800px) { .hero { grid-template-columns:1fr; gap:30px; padding:40px 0; } .evo-preview { min-height:370px; } .service-grid { grid-template-columns:1fr; gap:18px; } .evo-workspace { grid-template-columns:1fr; } .demo-grid { grid-template-columns:1fr; } .lab-nav { justify-content:flex-start; gap:20px; flex-wrap:wrap; } .evo-intro { padding:40px 0; } }
@media(prefers-reduced-motion:reduce) { .showcase .action { transition:none; } }
.evo-preview-model { display:block; width:100%; height:235px; border:0; pointer-events:none; margin:10px 0 0; }