/* Tokens from SAMUTAG Studio theme.css; no IDE styles. */
:root {
  color-scheme: light;
  --theme-bg: #e7ebf0;
  --theme-bg-grid: #d7dde5;
  --theme-surface: #f7f8fa;
  --theme-surface-2: #edf0f4;
  --theme-surface-3: #e1e6ec;
  --theme-input: #ffffff;
  --theme-canvas: #c8ced6;
  --theme-sheet: #f7f8fa;
  --theme-line: #b8c0cb;
  --theme-line-strong: #8995a5;
  --theme-text: #202833;
  --theme-muted: #566273;
  --theme-accent: #246fce;
  --theme-accent-strong: #1e5eae;
  --theme-accent-soft: #d8e7fa;
  --theme-success: #237c4b;
  --theme-warning: #946200;
  --theme-danger: #b52f3d;
  --theme-overlay: rgba(32, 40, 51, .45);
  --theme-shadow: 0 20px 55px rgba(39, 49, 63, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { margin: 0; background: var(--theme-bg); color: var(--theme-text); font-size: 16px; line-height: 1.6; }
[hidden] { display: none !important; }
a { color: var(--theme-accent); text-underline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, .button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 4px; }
#main:focus { outline: none; }
.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.2; font-weight: 650; letter-spacing: -.8px; margin-bottom: 24px; }
h2 { font-size: 26px; line-height: 1.3; font-weight: 650; margin-bottom: 8px; }
h3 { font-size: 17px; line-height: 1.4; margin-bottom: 8px; font-weight: 650; }
p { margin-bottom: 16px; }
.skip-link { position: fixed; top: -120px; left: 16px; padding: 12px; background: var(--theme-surface); z-index: 100; }
.skip-link:focus { top: 12px; }
.topbar { background: var(--theme-surface); border-bottom: 1px solid var(--theme-line); position: sticky; top: 0; z-index: 10; }
.toolbar { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand { display: block; padding: 4px 8px; background: #f7f8fa; border-radius: 6px; flex: 0 0 136px; }
.brand img { display: block; width: 120px; height: auto; object-fit: contain; }
.toolbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; }
.toolbar nav a { color: var(--theme-muted); font-size: 14px; text-decoration: none; padding-block: 8px; }
.toolbar nav a:hover { color: var(--theme-text); text-decoration: underline; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--theme-line-strong); border-radius: 7px; background: var(--theme-surface-2); color: var(--theme-text); text-decoration: none; font-size: 14px; font-weight: 600; }
.button:hover { background: var(--theme-surface-3); border-color: var(--theme-accent); }
.primary { background: var(--theme-accent-strong); border-color: var(--theme-accent-strong); color: #fff; }
.primary:hover { background: var(--theme-accent-strong); border-color: var(--theme-text); }
.menu-toggle { display: none; }
.hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; padding-block: 48px; }
.eyebrow { color: var(--theme-accent); font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.intro { color: var(--theme-muted); margin-bottom: 24px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.identity-panel { border: 1px solid var(--theme-line); border-radius: 10px; padding: 32px 24px; background-color: var(--theme-surface); background-image: linear-gradient(var(--theme-bg-grid) 1px, transparent 1px),linear-gradient(90deg,var(--theme-bg-grid) 1px,transparent 1px); background-size: 24px 24px; text-align: center; }
.logo-surface { padding: 16px; background: #f7f8fa; border-radius: 8px; }
.logo-surface img { display: block; width: 100%; height: auto; object-fit: contain; }
.identity-panel p { margin: 24px 0 4px; font-size: 15px; font-weight: 600; }
.identity-caption { font-size: 13px; color: var(--theme-muted); }
.demo-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 32px; margin-bottom: 32px; border: 1px solid var(--theme-accent-strong); border-left-width: 4px; border-radius: 10px; background: var(--theme-surface); }
.demo-copy p:not(.eyebrow),.demo-hint { color: var(--theme-muted); }
.demo-copy h2 { margin-bottom: 16px; }
.demo-access { min-width: 0; }
.demo-user strong { display: block; margin-top: 4px; font-size: 20px; }
.demo-access .button { margin-bottom: 12px; max-width: 100%; white-space: normal; cursor: pointer; }
#demo-open { display: flex; width: 100%; }
.demo-access [hidden] { display: none !important; }
.demo-hint,.demo-status { font-size: 14px; }
.demo-status:empty { display: none; }
#demo-fallback label { display: block; font-size: 14px; margin-bottom: 8px; }
#demo-password { width: 100%; padding: 12px; border: 1px solid var(--theme-line-strong); border-radius: 6px; background: var(--theme-surface); color: var(--theme-text); font: inherit; margin-bottom: 12px; }
#demo-question { display: block; margin-bottom: 8px; }
#demo-answer { display: block; width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--theme-line-strong); border-radius: 6px; background: var(--theme-surface); color: var(--theme-text); font: inherit; }
@media(max-width:760px) { .demo-card { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; } }
.section { padding-block: 32px; border-top: 1px solid var(--theme-line); }
.section-heading { margin-bottom: 24px; }
.section-heading p { color: var(--theme-muted); margin-bottom: 0; }
.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.panel { padding: 24px; background: var(--theme-surface); border: 1px solid var(--theme-line); border-radius: 9px; }
.panel p { font-size: 15px; color: var(--theme-muted); margin-bottom: 0; }
.component-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.component { display: flex; flex-direction: column; padding: 20px; }
.component-role { color: var(--theme-muted); font-size: 13px; }
.component h3 { color: var(--theme-text); font-size: 23px; margin: 8px 0 12px; }
.component .component-detail { font-size: 13px; color: var(--theme-accent); border-top: 1px solid var(--theme-line); padding-top: 16px; margin-top: auto; }
.component>p:not(.component-detail) { padding-bottom: 24px; }
.architecture-note { margin: 16px 0 0; padding: 16px 20px; border-left: 3px solid var(--theme-accent); background: var(--theme-accent-soft); font-size: 15px; }
dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
dt { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
dd { margin: 0; font-size: 15px; color: var(--theme-muted); }
.deployment-panel .purpose { border-top: 1px solid var(--theme-line); padding-top: 20px; margin-top: 24px; color: var(--theme-text); }
.footer { display: flex; justify-content: space-between; gap: 16px 32px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--theme-line); padding-block: 24px; font-size: 13px; }
.footer p { margin: 0; font-weight: 600; }
.footer p span { display: block; color: var(--theme-muted); font-weight: 400; }
.footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.gallery figure { margin: 0; }
.gallery button { padding: 0; display: block; width: 100%; border: 1px solid var(--theme-line); background: var(--theme-surface); border-radius: 8px; overflow: hidden; }
.gallery button:hover { border-color: var(--theme-accent); }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { font-size: 14px; color: var(--theme-muted); margin-top: 8px; }
dialog { width: min(1280px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--theme-line-strong); border-radius: 10px; background: var(--theme-surface); color: var(--theme-text); }
dialog::backdrop { background: var(--theme-overlay); }
.viewer-toolbar,.viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.viewer-toolbar p { margin: 0; font-size: 14px; }
#viewer-image { display: block; width: 100%; height: auto; max-height: 68dvh; object-fit: contain; margin-block: 16px; }
#image-counter { white-space: nowrap; font-size: 14px; }
@media(max-width:1000px) { .toolbar { gap: 16px; flex-wrap: wrap; } .toolbar nav { order: 3; width: 100%; justify-content: center; } .hero { gap: 24px; } .component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } html { scroll-padding-top: 160px; } }
@media(max-width:760px) { .hero { grid-template-columns: 1fr; padding-block: 32px; } .identity-panel { max-width: 480px; width: 100%; justify-self: center; padding: 24px; } .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } dl { grid-template-columns: 1fr; gap: 16px; } .toolbar { gap: 8px; } .menu-toggle:not([hidden]) { display: inline-flex; margin-left: auto; } .toolbar nav { justify-content: flex-start; gap: 8px 16px; } .js .toolbar nav:not(.open) { display: none; } html { scroll-padding-top: 96px; } }
@media(max-width:520px) { .container { width: calc(100% - 32px); } h1 { font-size: 30px; letter-spacing: -.5px; } h2 { font-size: 24px; } .capability-grid,.component-grid,.gallery { grid-template-columns: 1fr; } .panel { padding: 20px; } .identity-panel { padding: 24px 16px; } .section { padding-block: 24px; } .viewer-controls { gap: 8px; flex-wrap: wrap; } .viewer-controls .button { padding-inline: 8px; } .footer { align-items: flex-start; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

/* Strong accent keeps small text readable on the light background. */
:root a:not(.button),:root .eyebrow,:root .component-detail{color:var(--theme-accent-strong)}

/* Shared presentation with the main website and contact page. */
.container{width:calc(100% - 2 * clamp(16px,2vw,48px));max-width:none}
.toolbar{min-height:80px;gap:24px;padding-block:12px}
:root .brand{display:flex;align-items:center;gap:12px;flex:0 1 auto;padding:0;background:none;border-radius:0;text-decoration:none;color:var(--theme-text);font-size:17px;font-weight:700;letter-spacing:.3px}
.brand img{width:76px;height:auto;flex:none}
.brand small{display:block;margin-top:3px;font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--theme-muted)}
:root .toolbar nav a{font-size:16px;padding-block:12px;color:var(--theme-text)}
:root .toolbar nav a[aria-current]{color:var(--theme-accent-strong);border-bottom:2px solid var(--theme-accent-strong)}
.hero{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:clamp(28px,4vw,100px);padding-block:clamp(48px,3vw,80px)}
.hero-copy{min-width:0}
h1{font-size:clamp(28px,2.5vw,46px);line-height:1.2;letter-spacing:-1px}
.intro{font-size:clamp(18px,1vw,22px);line-height:1.7;color:var(--theme-text);max-width:1000px}
h2{font-size:clamp(24px,2.05vw,38px)}
h3{font-size:20px}
.identity-panel{border-top:3px solid var(--theme-accent-strong);border-radius:12px;background-image:none;padding:clamp(24px,2.5vw,48px)}
.logo-surface{padding:0}.identity-caption{font-size:14px}
.section-nav{display:flex;flex-wrap:wrap;gap:12px 28px;padding:20px 0;margin-bottom:32px;border-top:1px solid var(--theme-line);border-bottom:1px solid var(--theme-line)}
.section-nav a{text-decoration:none;font-size:16px;padding:4px 0}
.section-nav a:hover{text-decoration:underline}
.section{padding-block:clamp(32px,3vw,56px)}
.capability-grid,.component-grid{gap:24px}
.panel{border-top:3px solid var(--theme-accent-strong);border-radius:12px;padding:clamp(24px,2vw,40px)}
.panel p{font-size:16px;line-height:1.7}
.component-role,.component .component-detail{font-size:14px}
.demo-card{gap:clamp(28px,4vw,80px);padding:clamp(24px,2vw,40px);border:1px solid var(--theme-line);border-top:3px solid var(--theme-accent-strong);border-radius:12px}
.demo-copy,.demo-access{min-width:0}.demo-copy a{overflow-wrap:anywhere}
.demo-hint,.demo-status{font-size:15px}
.button{padding:10px 16px}
.footer{display:block;background:var(--theme-surface);padding-block:32px;font-size:14px}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-top{padding-bottom:24px}.footer-top p{font-size:15px;font-weight:400;color:var(--theme-muted)}
.footer-bottom{border-top:1px solid var(--theme-line);padding-top:20px;color:var(--theme-muted)}
@media(max-width:1000px){.toolbar nav{order:initial;width:auto;margin-left:auto}.hero{gap:28px}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-block:32px 40px}.identity-panel{max-width:520px;width:100%;justify-self:center}.toolbar{flex-wrap:wrap}.menu-toggle:not([hidden]){display:inline-flex;margin-left:auto}.toolbar nav{order:3;width:100%;justify-content:flex-start;margin-left:0}.js .toolbar nav:not(.open){display:none}.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.brand img{width:64px}.toolbar{gap:12px}.brand{gap:9px}.hero h1{font-size:28px}.intro{font-size:16px}.capability-grid,.component-grid{grid-template-columns:1fr}.section-nav{gap:12px 20px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column}.demo-card{padding:20px}.panel{padding:24px}.identity-panel{padding:24px}}
:root .topbar .brand,:root .footer .brand{color:var(--theme-text)}