:root {
  --hsg-green: #243d37;
  --hsg-green-deep: #172824;
  --hsg-lime: #cdde66;
  --hsg-cream: #f3ebd9;
  --hsg-white: #fff;
  --hsg-mist: #d9ded9;
  --hsg-secondary-green: #688079;
  --otl-orange: #f5821f;
  --bws-yellow: #ffcb05;
  --wcc-blue: #00adef;
  --hsg-warning: var(--otl-orange);
  --hsg-alert: var(--bws-yellow);
  --hsg-connected: var(--wcc-blue);
  --ink: #243d37;
  --muted: #688079;
  --border: rgba(36,61,55,.18);
  --shadow: 0 24px 60px rgba(23,40,36,.12);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --container: 1440px;
  --font: "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--hsg-green); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 450; letter-spacing: -.035em; line-height: 1.02; }
h1 { font-size: clamp(3rem, 6vw, 6rem); }
h2 { font-size: clamp(2.5rem, 4.4vw, 5rem); }
h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
p { line-height: 1.55; }
:focus-visible { outline: 3px solid var(--hsg-lime); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 14px 22px; border-radius: var(--radius-pill); background: var(--hsg-lime); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 50; top: 0; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 clamp(20px,4vw,64px); color: var(--hsg-lime); background: rgba(36,61,55,.92); border-bottom: 1px solid rgba(205,222,102,.2); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 18px; font-size: 13px; white-space: nowrap; }
.brand img { width: 105px; height: 42px; object-fit: contain; }
.brand span { padding-left: 18px; border-left: 1px solid rgba(205,222,102,.35); }
.main-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.main-nav a { position: relative; padding: 10px 0; }
.main-nav a::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.menu-button { display: none !important; }

.hero { position: relative; min-height: calc(100vh - 88px); overflow: hidden; padding: clamp(80px,10vw,160px) clamp(20px,4vw,64px) 36px; color: var(--hsg-lime); background: var(--hsg-green); }
.hero-grid { position: relative; z-index: 2; width: min(100%,var(--container)); margin: auto; display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: end; }
.hero h1 { margin: 0; font-size: clamp(4.2rem,10vw,10.5rem); letter-spacing: -.075em; line-height: .82; }
.hero-copy { max-width: 470px; padding-bottom: 12px; }
.hero-copy p { font-size: clamp(1.25rem,1.8vw,1.7rem); line-height: 1.28; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 650; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.hero .eyebrow { margin-bottom: 42px; }
.button-row, .demo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; font-weight: 550; line-height: 1; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button-primary { color: var(--hsg-lime); background: var(--hsg-green); }
.button-primary:hover { background: var(--hsg-green-deep); }
.button-secondary { color: var(--hsg-green); background: var(--hsg-lime); }
.button-outline { color: var(--hsg-green); background: transparent; border-color: var(--hsg-green); }
.button-ghost { color: var(--hsg-green); background: transparent; }
.button-on-dark { color: var(--hsg-cream); border-color: rgba(243,235,217,.65); }
.button-on-dark:hover { color: var(--hsg-green); background: var(--hsg-cream); border-color: var(--hsg-cream); }
.button-lime { color: var(--hsg-green); background: var(--hsg-lime); }
.button-small { min-height: 40px; padding: 10px 19px; font-size: 12px; }
.button-large { min-height: 62px; padding: 18px 34px; font-size: 16px; }
.button:disabled { opacity: .38; cursor: not-allowed; }
.icon-button { width: 52px; height: 52px; flex: 0 0 52px; display: inline-grid; place-items: center; padding: 0; color: var(--hsg-lime); background: var(--hsg-green); border: 1px solid transparent; border-radius: 50%; font-size: 20px; cursor: pointer; }
.icon-button-light { color: var(--hsg-green); background: var(--hsg-lime); }
.icon-button-small { width: 38px; height: 38px; flex-basis: 38px; font-size: 16px; }
.hero-orbit { position: absolute; width: clamp(340px,48vw,800px); aspect-ratio: 1; right: -12vw; top: -10vw; display: grid; place-items: center; border: 1px solid rgba(205,222,102,.16); border-radius: 50%; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border: 1px solid rgba(205,222,102,.12); border-radius: 50%; }
.hero-orbit::before { inset: 14%; } .hero-orbit::after { inset: 31%; }
.hero-orbit span { font-size: clamp(4rem,8vw,9rem); font-weight: 700; letter-spacing: -.08em; opacity: .07; }
.hero-meta { position: absolute; right: clamp(20px,4vw,64px); bottom: 36px; left: clamp(20px,4vw,64px); display: grid; grid-template-columns: repeat(3,1fr); padding-top: 20px; border-top: 1px solid rgba(205,222,102,.22); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.hero-meta span:nth-child(2) { text-align: center; } .hero-meta span:last-child { text-align: right; }

.section { padding: clamp(80px,9vw,144px) clamp(20px,4vw,64px); }
.section-light { background: var(--hsg-white); }
.section-cream { background: var(--hsg-cream); }
.section-dark { color: var(--hsg-lime); background: var(--hsg-green); }
.section-heading, .subsection, .component-block, .card-grid, .pattern-grid, .feedback-grid { width: min(100%,var(--container)); margin-right: auto; margin-left: auto; }
.section-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 64px; align-items: start; margin-bottom: clamp(80px,10vw,160px); }
.section-heading > div { display: flex; gap: 28px; align-items: center; }
.section-index { font-size: 12px; opacity: .55; }
.section-heading h2 { max-width: 880px; margin: 0; }
.subsection { padding: 64px 0; border-top: 1px solid var(--border); }
.subsection-title, .component-block { display: grid; grid-template-columns: .65fr 1.35fr; gap: 64px; }
.subsection-title { margin-bottom: 44px; }
.subsection-title h3, .subsection-title p, .component-intro h3, .component-intro p { margin-bottom: 0; }
.subsection-title p, .component-intro p { max-width: 480px; color: var(--muted); }
.swatch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.swatch { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 18px; color: var(--ink); background: var(--swatch); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: left; cursor: copy; }
.swatch-large { grid-column: span 2; min-height: 230px; }
.swatch span { color: var(--ink); font-weight: 600; } .swatch small { color: var(--ink); opacity: .72; }
.swatch[data-copy="#243D37"] span,.swatch[data-copy="#243D37"] small,.swatch[data-copy="#688079"] span,.swatch[data-copy="#688079"] small,.swatch[data-copy="#172824"] span,.swatch[data-copy="#172824"] small { color: var(--hsg-white); }
.swatch[data-copy="#CDDE66"] span,.swatch[data-copy="#CDDE66"] small { color: var(--hsg-green); }
.type-list { border-top: 1px solid var(--border); }
.type-row { display: grid; grid-template-columns: .65fr 1.35fr; gap: 64px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--border); }
.type-row > span { color: var(--muted); font-size: 12px; }
.type-row h1,.type-row h2,.type-row h3,.type-row p,.type-row strong { margin: 0; }
.type-row h1 { font-size: clamp(2.7rem,4vw,3.5rem); }.type-row h2 { font-size: clamp(2.2rem,3vw,2.5rem); }.type-row h3 { font-size: 1.75rem; }
.display-sample { font-size: clamp(4rem,7vw,5rem); letter-spacing: -.07em; line-height: .9; }
.body-large { font-size: 20px; }
.foundation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.measure-card { min-height: 320px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.measure-card h4 { margin-bottom: 34px; font-size: 18px; }
.space-row { display: flex; gap: 18px; align-items: center; height: 34px; color: var(--muted); font-size: 12px; }
.space-row span { width: 24px; }.space-row i { display: block; height: 8px; background: var(--hsg-green); }
.radius-row { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.radius-row i { width: 72px; height: 40px; display: block; background: var(--hsg-lime); border: 1px solid var(--border); }
.radius-sm { border-radius: var(--radius-sm); }.radius-md { border-radius: var(--radius-md); }.radius-lg { border-radius: var(--radius-lg); }.radius-pill { border-radius: var(--radius-pill); }
.icon-examples { display: grid; grid-template-columns: repeat(4,52px); gap: 10px; margin-bottom: 28px; }.icon-examples span { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 20px; }.icon-card p { color: var(--muted); }

.icon-section .section-heading { margin-bottom: 84px; }
.icon-system-intro,.icon-toolbar,.icon-catalogue,.icon-usage-grid { width: min(100%,var(--container)); margin-right: auto; margin-left: auto; }
.icon-system-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding: 0 0 54px; border-bottom: 1px solid rgba(205,222,102,.2); }
.icon-system-intro h3 { margin-bottom: 18px; font-size: clamp(2rem,3.5vw,3.5rem); }
.icon-system-intro p { max-width: 620px; margin: 0; color: var(--hsg-cream); font-size: 18px; }
.icon-system-intro code { color: var(--hsg-lime); }
.icon-rules { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.icon-toolbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 38px 0 24px; }
.icon-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-dark-outline { color: var(--hsg-lime); background: transparent; border-color: rgba(205,222,102,.38); cursor: pointer; }
.tag-dark-outline:hover,.tag-dark-outline.active { color: var(--hsg-green); background: var(--hsg-lime); border-color: var(--hsg-lime); }
.icon-filters .tag-light { cursor: pointer; }.icon-filters .tag-light:not(.active) { color: var(--hsg-lime); background: transparent; border-color: rgba(205,222,102,.38); }
.icon-catalogue { display: grid; grid-template-columns: repeat(8,1fr); gap: 8px; }
.icon-item { min-width: 0; min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 14px 8px; color: var(--hsg-lime); background: rgba(23,40,36,.42); border: 1px solid rgba(205,222,102,.14); border-radius: var(--radius-md); transition: background .2s,transform .2s; }
.icon-item:hover { background: rgba(23,40,36,.75); transform: translateY(-2px); }
.icon-item svg { width: 42px; height: 42px; color: currentColor; }
.icon-item span { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.icon-item small { margin-top: -10px; color: var(--hsg-cream); font-size: 9px; opacity: .55; }
.icon-item[hidden] { display: none; }
.icon-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
.icon-usage-grid article { min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; color: var(--hsg-lime); background: var(--hsg-green-deep); border-radius: var(--radius-lg); }
.icon-usage-grid article.usage-lime { color: var(--hsg-green); background: var(--hsg-lime); }
.icon-usage-grid article > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.icon-usage-grid p { max-width: 420px; margin: 0; font-size: 13px; opacity: .72; }
.icon-label-pill { min-height: 48px; display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; color: var(--hsg-lime); background: var(--hsg-green); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
.icon-label-pill .hsg-icon { width: 20px; height: 20px; color: inherit; }
.icon-usage-grid .icon-button .hsg-icon { width: 22px; height: 22px; color: var(--hsg-green); }

.component-block { padding: 64px 0; border-top: 1px solid var(--border); }
.component-intro p { margin-top: 18px; }
.component-demo { min-width: 0; }.component-demo > .demo-row + .demo-row { margin-top: 24px; }
.tag, .status { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
button.tag { cursor: pointer; }.tag { color: var(--hsg-green); background: var(--hsg-mist); }.tag-dark { color: var(--hsg-lime); background: var(--hsg-green); }.tag-outline { background: transparent; border-color: var(--hsg-green); }.tag-filter { color: var(--hsg-green); background: var(--hsg-lime); }.tag-lime { color: var(--hsg-green); background: var(--hsg-lime); }.tag-light { color: var(--hsg-green); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); }
.status { background: rgba(255,255,255,.55); }.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.status-success { color: #28724f; }.status-connected { color: #006b94; background: rgba(0,173,239,.14); }.status-connected i { background: var(--wcc-blue); }.status-warning { color: #7a3a00; background: rgba(245,130,31,.16); }.status-warning i { background: var(--otl-orange); }.status-alert { color: #665000; background: rgba(255,203,5,.25); }.status-alert i { background: var(--bws-yellow); }.status-neutral { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.field { display: grid; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 650; }.field-wide { grid-column: 1/-1; }.field input,.field select,.field textarea { width: 100%; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid rgba(36,61,55,.35); border-radius: var(--radius-sm); padding: 15px 16px; font-weight: 400; outline: 0; transition: border .2s, box-shadow .2s; }.field input,.field select { height: 54px; }.field textarea { resize: vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--hsg-green); box-shadow: 0 0 0 3px rgba(205,222,102,.7); }.field small { color: var(--muted); font-weight: 400; }
.check, .switch { display: flex; gap: 12px; align-items: center; font-size: 14px; cursor: pointer; }.check input { width: 20px; height: 20px; accent-color: var(--hsg-green); }.switch input { position: absolute; opacity: 0; pointer-events: none; }.switch-track { position: relative; width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--hsg-mist); transition: background .2s; }.switch-track::after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .2s; }.switch input:checked + .switch-track { background: var(--hsg-green); }.switch input:checked + .switch-track::after { transform: translateX(20px); }
.nav-demo { display: grid; gap: 28px; }.sample-nav { display: flex; align-items: center; gap: 28px; padding: 13px 16px 13px 24px; color: var(--hsg-lime); background: var(--hsg-green); border-radius: var(--radius-md); }.sample-nav strong { margin-right: auto; }.sample-nav > div { display: flex; gap: 5px; }.sample-nav a { padding: 9px 13px; border-radius: var(--radius-pill); font-size: 12px; }.sample-nav a.active { color: var(--hsg-green); background: var(--hsg-lime); }.avatar { width: 38px; height: 38px; color: var(--hsg-green); background: var(--hsg-cream); border: 0; border-radius: 50%; font-size: 11px; font-weight: 700; }.tabs { display: flex; gap: 8px; padding-bottom: 10px; overflow-x: auto; border-bottom: 1px solid var(--border); }.tabs button { padding: 10px 16px; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-pill); white-space: nowrap; cursor: pointer; }.tabs button.active { color: var(--hsg-lime); background: var(--hsg-green); }.tabs span { margin-left: 6px; opacity: .7; }.breadcrumbs { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }.breadcrumbs strong { color: var(--ink); }

.menu-showcase { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.menu-demo-card { min-height:340px; position:relative; display:flex; flex-direction:column; gap:22px; padding:24px; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid var(--border); border-radius:var(--radius-lg); }
.menu-demo-card h4 { margin:0; font-size:20px; }
.menu-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.menu-chip { padding:9px 12px; color:var(--ink); background:var(--hsg-mist); border:0; border-radius:var(--radius-pill); font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.menu-chip.active { color:var(--hsg-green); background:#f8f9d8; }
.menu-panel,.bokeh-popover { display:grid; gap:3px; padding:10px; background:rgba(255,255,255,.9); border:1px solid rgba(36,61,55,.12); border-radius:15px; box-shadow:0 16px 32px rgba(23,40,36,.1); }
.menu-label { padding:5px 7px 7px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.menu-option { min-height:42px; display:flex; gap:11px; align-items:center; width:100%; padding:9px 10px; color:var(--ink); background:transparent; border:0; border-radius:9px; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.menu-option:hover,.menu-option.active { background:#f8f9d8; }.menu-option .hsg-icon { width:19px; height:19px; flex:0 0 19px; }.menu-option small { margin-left:auto; color:var(--muted); }.menu-option.danger { color:#c75551; }.menu-option.danger:hover { background:rgba(199,85,81,.1); }.menu-divider { height:1px; margin:6px 0; background:rgba(36,61,55,.13); }
.context-menu { margin-top:auto; }.menu-bokeh-stage { justify-content:center; color:var(--hsg-cream); background:#172824; }.bokeh-orb { position:absolute; width:190px; aspect-ratio:1; border-radius:50%; filter:blur(22px); opacity:.55; }.orb-lime { top:38px; left:30px; background:var(--hsg-lime); }.orb-blue { right:18px; bottom:18px; background:var(--wcc-blue); }.bokeh-popover { position:relative; z-index:1; color:var(--ink); background:rgba(255,255,255,.82); backdrop-filter:blur(18px); }

.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 96px; }
.service-card { min-height: 500px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; overflow: hidden; background: var(--hsg-cream); border-radius: var(--radius-lg); }.service-card > div:first-child { display: flex; justify-content: space-between; }.service-card h3 { margin: auto 0 30px; font-size: clamp(2rem,3vw,3rem); }.service-card > a { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; }.service-card-dark { color: var(--hsg-lime); background: var(--hsg-green); }.service-card-dark > a { border-color: rgba(205,222,102,.25); }.card-number { font-size: 12px; opacity: .6; }.service-card-image { position: relative; padding: 0; }.service-card-image > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }.service-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(23,40,36,.05),rgba(23,40,36,.72)); }.image-overlay { position: relative; z-index: 2; height: 100%; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: space-between !important; padding: 28px; color: white; }.image-overlay h3 { margin-top: auto; }.image-overlay .icon-button { position: absolute; right: 28px; bottom: 28px; }
.pattern-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 72px; }.data-card { min-height: 360px; padding: 28px; background: var(--hsg-white); border: 1px solid var(--border); border-radius: var(--radius-md); }.card-kicker { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }.metric { display: block; margin-top: 52px; font-size: 86px; font-weight: 450; line-height: .8; letter-spacing: -.07em; }.data-card > p { margin: 20px 0 0; color: var(--muted); font-size: 13px; }.data-card > p b { color: var(--ink); }.spark { height: 78px; display: flex; gap: 7px; align-items: end; margin-top: 32px; }.spark i { flex: 1; background: var(--hsg-lime); border-radius: 5px 5px 0 0; }.progress-ring { width: 170px; aspect-ratio: 1; display: grid; place-items: center; margin: 38px auto 0; border-radius: 50%; background: conic-gradient(var(--hsg-green) 0 92%,var(--hsg-mist) 92%); }.progress-ring::before { content: ""; grid-area: 1/1; width: 130px; aspect-ratio: 1; border-radius: 50%; background: white; }.progress-ring span { z-index: 1; grid-area: 1/1; display: grid; text-align: center; }.progress-ring b { font-size: 30px; letter-spacing: -.04em; }.progress-ring small { color: var(--muted); }.schedule-item { display: grid; grid-template-columns: 44px 10px 1fr; gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--border); }.schedule-item time { color: var(--muted); font-size: 12px; }.schedule-item i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--hsg-lime); box-shadow: 0 0 0 4px rgba(205,222,102,.25); }.schedule-item div { display: grid; gap: 4px; }.schedule-item strong { font-size: 14px; }.schedule-item span { color: var(--muted); font-size: 12px; }
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.alert { min-height: 100px; display: grid; grid-template-columns: 42px 1fr 24px; gap: 14px; align-items: center; padding: 20px; border-radius: var(--radius-md); }.alert-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; }.alert strong { font-size: 14px; }.alert p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }.alert button { background: transparent; border: 0; font-size: 20px; cursor: pointer; }.alert-success { background: #e7f3e9; }.alert-success .alert-icon { color: #28724f; background: #cbe7d2; }.alert-warning { background: rgba(245,130,31,.13); }.alert-warning .alert-icon { color: #7a3a00; background: rgba(245,130,31,.3); }.alert-alert { background: rgba(255,203,5,.2); }.alert-alert .alert-icon { color: #665000; background: rgba(255,203,5,.48); }.alert-connected { background: rgba(0,173,239,.11); }.alert-connected .alert-icon { color: #006b94; background: rgba(0,173,239,.24); }.empty-state { grid-column: 1/-1; min-height: 320px; display: grid; justify-items: center; align-content: center; text-align: center; border: 1px dashed rgba(36,61,55,.35); border-radius: var(--radius-md); }.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; color: var(--hsg-lime); background: var(--hsg-green); border-radius: 50%; font-size: 22px; }.empty-state h3 { margin-bottom: 7px; }.empty-state p { color: var(--muted); }

.example { color: var(--hsg-lime); background: var(--hsg-green); }.example-topbar { display: flex; justify-content: space-between; padding: 22px clamp(20px,4vw,64px); border-bottom: 1px solid rgba(205,222,102,.2); font-size: 12px; }.example-hero { min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; }.example-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px,8vw,130px) clamp(20px,5vw,84px); }.example-copy h2 { margin: 42px 0 28px; font-size: clamp(4rem,7vw,8rem); letter-spacing: -.07em; line-height: .84; }.example-copy p { max-width: 560px; margin-bottom: 36px; font-size: 19px; }.example-visual { position: relative; min-height: 560px; overflow: hidden; }.example-visual > img { width: 100%; height: 100%; object-fit: cover; }.floating-card { position: absolute; right: 28px; bottom: 28px; left: 28px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: end; padding: 26px; color: var(--hsg-green); background: rgba(243,235,217,.92); border-radius: var(--radius-md); backdrop-filter: blur(16px); }.floating-card > span { font-size: 12px; }.floating-card strong { font-size: 28px; letter-spacing: -.04em; line-height: 1.05; }.floating-card a { grid-column: 2; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; }.example-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(205,222,102,.2); }.example-stats > div { min-height: 190px; display: grid; align-content: space-between; padding: 28px clamp(20px,3vw,48px); border-right: 1px solid rgba(205,222,102,.2); }.example-stats strong { font-size: clamp(2.8rem,4vw,5rem); font-weight: 450; letter-spacing: -.06em; line-height: 1; }.example-stats span { max-width: 210px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.site-footer { min-height: 220px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: center; padding: 50px clamp(20px,4vw,64px); color: var(--hsg-cream); background: var(--hsg-green-deep); }.site-footer img { width: 150px; }.site-footer > div { display: grid; gap: 7px; font-size: 12px; opacity: .7; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; padding: 12px 20px; color: var(--hsg-lime); background: var(--hsg-green-deep); border-radius: var(--radius-pill); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .menu-showcase { grid-template-columns:1fr; }
  .site-header { height: 74px; }.main-nav { position: absolute; inset: 74px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 20px; color: var(--hsg-lime); background: var(--hsg-green); border-top: 1px solid rgba(205,222,102,.2); }.main-nav.open { display: flex; }.main-nav a { padding: 15px 0; }.menu-button { display: inline-grid !important; width: 42px; height: 42px; flex-basis: 42px; }.menu-button span { width: 18px; height: 1px; background: currentColor; }.menu-button span + span { margin-top: -16px; }
  .hero { min-height: 860px; }.hero-grid { grid-template-columns: 1fr; align-items: start; }.hero-copy { max-width: 550px; }.section-heading,.subsection-title,.component-block { grid-template-columns: 1fr; gap: 34px; }.section-heading { margin-bottom: 90px; }.swatch-grid { grid-template-columns: repeat(2,1fr); }.foundation-grid,.card-grid,.pattern-grid { grid-template-columns: 1fr 1fr; }.card-grid .service-card:last-child,.pattern-grid .data-card:last-child { grid-column: 1/-1; }.component-intro { max-width: 600px; }.icon-catalogue { grid-template-columns: repeat(5,1fr); }.sample-nav > div { display: none; }.example-hero { grid-template-columns: 1fr; }.example-visual { min-height: 650px; }.example-stats { grid-template-columns: repeat(2,1fr); }.example-stats > div { border-bottom: 1px solid rgba(205,222,102,.2); }
}

@media (max-width: 640px) {
  .brand span { display: none; }.brand img { width: 90px; }.hero { min-height: auto; padding-top: 80px; padding-bottom: 28px; }.hero h1 { font-size: clamp(4rem,21vw,6rem); }.hero-meta { position: static; grid-template-columns: 1fr; gap: 7px; margin-top: 64px; }.hero-meta span:nth-child(2),.hero-meta span:last-child { text-align: left; }.section { padding-top: 80px; padding-bottom: 80px; }.section-heading { margin-bottom: 70px; }.section-heading > div { gap: 18px; }.swatch-grid,.foundation-grid,.card-grid,.pattern-grid,.feedback-grid { grid-template-columns: 1fr; }.swatch-large { grid-column: auto; }.swatch,.swatch-large { min-height: 150px; }.type-row { grid-template-columns: 1fr; gap: 12px; }.component-block { padding: 48px 0; }.icon-system-intro,.icon-usage-grid { grid-template-columns: 1fr; }.icon-rules { justify-content: flex-start; }.icon-toolbar { align-items: flex-start; flex-direction: column; }.icon-catalogue { grid-template-columns: repeat(2,1fr); }.icon-item { min-height: 128px; }.form-grid { grid-template-columns: 1fr; }.field-wide { grid-column: auto; }.sample-nav { gap: 14px; }.service-card { min-height: 440px; }.card-grid .service-card:last-child,.pattern-grid .data-card:last-child,.empty-state { grid-column: auto; }.example-copy h2 { font-size: clamp(4rem,18vw,6rem); }.example-visual { min-height: 520px; }.floating-card { grid-template-columns: 1fr; }.floating-card a { grid-column: 1; }.example-stats { grid-template-columns: 1fr; }.site-footer { grid-template-columns: 1fr; }.site-footer .button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }