/* Biznet Gio Design System — component styles. Every value comes from tokens.css custom properties.
   Form and UI controls follow coss ui (Base UI + Tailwind) anatomy: 1px border, inset highlight, 3px ring. */

.gio, .gio * { box-sizing: border-box; }
.gio { font-family: var(--font-sans); color: var(--foreground); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--background); font-family: var(--font-sans); color: var(--foreground); }
.gio-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.gio-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.gio-label-sm { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.gio :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.gio-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gio svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gio * { transition: none !important; animation: none !important; } }

/* Button (coss ui variants) */
.gio-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); height: 36px; padding: 0 13px; cursor: pointer; text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.gio-btn:disabled, .gio-btn[aria-disabled="true"] { opacity: .64; pointer-events: none; }
.gio-btn--xs { height: 26px; padding: 0 7px; font-size: 12px; border-radius: var(--radius-sm); gap: var(--space-1); }
.gio-btn--sm { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.gio-btn--lg { height: 40px; padding: 0 15px; }
.gio-btn--xl { height: 48px; padding: 0 19px; font-size: 16px; }
.gio-btn--icon { width: 36px; padding: 0; }
.gio-btn--default { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-button); }
.gio-btn--default:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.gio-btn--secondary { background: var(--secondary); color: var(--foreground); }
.gio-btn--secondary:hover { background: var(--brand-tint); color: var(--primary-hover); }
.gio-btn--outline { background: var(--background); border-color: var(--input); color: var(--foreground); box-shadow: var(--shadow-xs); }
.gio-btn--outline:hover { background: var(--surface); }
.gio-btn--ghost { background: transparent; color: var(--foreground-secondary); }
.gio-btn--ghost:hover { background: var(--accent); color: var(--foreground); }
.gio-btn--link { background: transparent; color: var(--primary); padding-inline: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; }
.gio-btn--link:hover { color: var(--primary-hover); }
.gio-btn--destructive { background: var(--destructive); border-color: var(--destructive); color: var(--primary-foreground); box-shadow: var(--shadow-button); }
.gio-btn--destructive-outline { background: var(--background); border-color: var(--input); color: var(--destructive); box-shadow: var(--shadow-xs); }
.gio-btn--destructive-outline:hover { background: var(--destructive-tint); }
.gio-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gio-spin .7s linear infinite; }
@keyframes gio-spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .gio-btn, .gio-input, .gio-select { min-height: var(--tap-target); } }

/* Badge, Kbd */
.gio-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 7px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.gio-badge--default { background: var(--primary); color: var(--primary-foreground); }
.gio-badge--secondary { background: var(--secondary); color: var(--foreground-secondary); }
.gio-badge--outline { background: var(--background); border-color: var(--input); color: var(--foreground-secondary); }
.gio-badge--success { background: var(--brand-tint); color: var(--primary-hover); }
.gio-badge--warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-border); }
.gio-badge--error { background: var(--destructive-tint); color: var(--destructive); }
.gio-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); background: var(--surface); font: 500 11px/1 var(--font-sans); color: var(--muted-foreground); }

/* Field, Label, Description, Error, Fieldset (coss ui) */
.gio-field { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 0; }
.gio-field__label { font: 500 14px/16px var(--font-sans); color: var(--foreground); display: inline-flex; gap: var(--space-2); align-items: center; }
.gio-field__label .gio-req { color: var(--destructive); }
.gio-field__desc { font: 400 12px/16px var(--font-sans); color: var(--muted-foreground); }
.gio-field__error { font: 500 12px/16px var(--font-sans); color: var(--destructive); display: inline-flex; gap: 6px; align-items: center; }
.gio-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.gio-fieldset > legend { font: 600 15px/24px var(--font-sans); color: var(--foreground); padding: 0; margin-bottom: var(--space-1); }

/* Input, Textarea, Select (coss ui control: border-input, inset highlight, 3px ring on focus) */
.gio-control { position: relative; display: inline-flex; align-items: center; width: 100%; background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow .15s, border-color .15s; }
.gio-control:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(8, 107, 48, .24); }
.gio-control[data-invalid="true"] { border-color: var(--destructive); }
.gio-control[data-invalid="true"]:focus-within { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.gio-control[data-disabled="true"] { opacity: .64; }
.gio-input, .gio-textarea, .gio-select { appearance: none; border: 0; background: transparent; width: 100%; min-width: 0; font: 400 14px/20px var(--font-sans); color: var(--foreground); outline: none; border-radius: inherit; }
.gio-input { height: 34px; padding: 0 11px; }
.gio-control--sm .gio-input { height: 30px; padding: 0 9px; }
.gio-control--lg .gio-input { height: 38px; font-size: 15px; }
.gio-control--xl .gio-input { height: 54px; font-size: 17px; padding: 0 15px; }
.gio-input::placeholder, .gio-textarea::placeholder { color: var(--muted-foreground); }
.gio-control .gio :focus-visible, .gio-control input:focus-visible, .gio-control textarea:focus-visible, .gio-control select:focus-visible { outline: none; }
.gio-textarea { min-height: 76px; padding: 7px 11px; resize: vertical; display: block; }
.gio-select { height: 34px; padding: 0 34px 0 11px; cursor: pointer; }
.gio-control__chevron { position: absolute; right: 10px; pointer-events: none; color: var(--foreground-secondary); }
.gio-control__addon { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); color: var(--muted-foreground); white-space: nowrap; }
.gio-control__addon:first-child { padding-right: 0; }
.gio-control__addon:last-child { padding-left: 0; }

/* Checkbox, Radio, Switch */
.gio-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 14px/20px var(--font-sans); color: var(--foreground); }
.gio-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gio-check__box { position: relative; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--input); border-radius: var(--radius-xs); background: var(--background); box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center; color: var(--primary-foreground); flex-shrink: 0; }
.gio-check--radio .gio-check__box { border-radius: var(--radius-full); }
.gio-check input:checked + .gio-check__box { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.gio-check input:focus-visible + .gio-check__box { outline: 3px solid var(--ring); outline-offset: 2px; }
.gio-check input:disabled + .gio-check__box, .gio-check input:disabled ~ span { opacity: .64; cursor: not-allowed; }
.gio-check__box svg { display: none; }
.gio-check input:checked + .gio-check__box svg { display: block; }
.gio-check--radio input:checked + .gio-check__box::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-foreground); }
.gio-check__text { display: flex; flex-direction: column; gap: 2px; }
.gio-check__hint { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.gio-radiogroup { display: flex; flex-direction: column; gap: var(--space-3); }
.gio-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 400 14px/20px var(--font-sans); }
.gio-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gio-switch__track { width: 38px; height: 22px; padding: 1px; border-radius: var(--radius-full); background: var(--input); transition: background-color .2s; display: inline-flex; }
.gio-switch__thumb { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--background); box-shadow: var(--shadow-xs); transition: transform .15s; }
.gio-switch input:checked + .gio-switch__track { background: var(--primary); }
.gio-switch input:checked + .gio-switch__track .gio-switch__thumb { transform: translateX(16px); }
.gio-switch input:focus-visible + .gio-switch__track { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Segmented control (EN/ID toggle, card/list view) */
.gio-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--secondary); border: 1px solid var(--border); }
.gio-seg button { height: 28px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: 600 12px/1 var(--font-sans); color: var(--foreground-secondary); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.gio-seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }

/* Tabs */
.gio-tabs__list { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); overflow-x: auto; }
.gio-tabs__tab { position: relative; border: 0; background: none; padding: 10px 0 12px; font: 500 14px/20px var(--font-sans); color: var(--muted-foreground); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.gio-tabs__tab[aria-selected="true"] { color: var(--foreground); font-weight: 600; }
.gio-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; }
.gio-tabs__panel { padding-top: var(--space-4); font-size: 14px; color: var(--foreground-tertiary); }

/* Breadcrumb */
.gio-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px var(--font-sans); }
.gio-crumbs a { color: var(--muted-foreground); text-decoration: none; }
.gio-crumbs a:hover { color: var(--primary); text-decoration: underline; }
.gio-crumbs [aria-current="page"] { color: var(--foreground); }
.gio-crumbs .gio-crumbs__sep { color: var(--muted-foreground); }

/* Pagination / Load more */
.gio-pager { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.gio-pager__meta { font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); }
.gio-pager__bar { width: 200px; height: 4px; border-radius: var(--radius-full); background: var(--secondary); overflow: hidden; }
.gio-pager__bar span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }

/* Accordion (FAQ) */
.gio-acc { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.gio-acc__item + .gio-acc__item { border-top: 1px solid var(--border); }
.gio-acc__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px 20px; min-height: 56px; border: 0; background: none; text-align: left; cursor: pointer; font: 600 15px/22px var(--font-sans); color: var(--foreground); border-radius: var(--radius-lg); }
.gio-acc__trigger:hover { background: var(--surface); }
.gio-acc__chev { transition: transform .15s; color: var(--muted-foreground); }
.gio-acc__trigger[aria-expanded="true"] .gio-acc__chev { transform: rotate(180deg); }
.gio-acc__panel { padding: 0 20px 18px; font: 400 15px/24px var(--font-sans); color: var(--foreground-tertiary); max-width: 760px; }

/* Alert / callout */
.gio-alert { display: flex; gap: var(--space-3); padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--info-tint); font: 400 14px/22px var(--font-sans); color: var(--foreground-secondary); }
.gio-alert__title { font-weight: 600; color: var(--foreground); display: block; margin-bottom: 2px; }
.gio-alert--tip { background: var(--brand-tint); border-color: var(--brand-tint-strong); }
.gio-alert--tip svg { color: var(--primary); }
.gio-alert--warning { background: var(--warning-tint); border-color: var(--warning-border); color: var(--warning); }
.gio-alert--warning .gio-alert__title { color: var(--warning); }
.gio-alert--error { background: var(--destructive-tint); border-color: rgba(180, 35, 24, .24); color: var(--destructive); }
.gio-alert--error .gio-alert__title { color: var(--destructive); }
.gio-alert svg { margin-top: 2px; }

/* Card + ArticleCard */
.gio-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s, box-shadow .15s; }
a.gio-card:hover { border-color: var(--brand-tint-strong); box-shadow: var(--shadow-popover); }
.gio-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.gio-card__title { font: 600 17px/24px var(--font-sans); color: var(--foreground); margin: 0; }
.gio-card__desc { font: 400 14px/20px var(--font-sans); color: var(--foreground-tertiary); margin: 0; }
.gio-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); margin-top: auto; }
.gio-card__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gio-card__links a { font: 400 14px/20px var(--font-sans); color: var(--foreground-secondary); text-decoration: none; }
.gio-card__links a:hover { color: var(--primary); text-decoration: underline; }
.gio-card__more { font: 600 13px/18px var(--font-sans); color: var(--primary); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.gio-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: var(--space-5); }
.gio-listrow { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--foreground); font: 500 15px/22px var(--font-sans); }
.gio-listrow:hover { background: var(--surface); }
.gio-listrow__meta { margin-left: auto; font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }

/* Code block */
.gio-code { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--code); overflow: hidden; }
.gio-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); }
.gio-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 400 13px/20px var(--font-mono); color: var(--foreground); }
.gio-code .gio-tok-c { color: var(--muted-foreground); }
.gio-code .gio-tok-k { color: var(--primary-hover); font-weight: 500; }
.gio-icode { font: 400 13px/20px var(--font-mono); background: var(--code); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; }

/* Hex pattern */
.gio-hex { position: absolute; pointer-events: none; color: var(--brand); }
.gio-hex polygon { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.gio-hex circle { fill: currentColor; }

/* Site header */
.gio-header { background: var(--background); border-bottom: 1px solid var(--border); }
.gio-header__in { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); height: var(--header-height); display: flex; align-items: center; gap: var(--space-6); }
.gio-header__logo { flex-shrink: 0; }
.gio-header__logo img { height: 34px; width: auto; display: block; }
.gio-header__nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; }
.gio-header__nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 10px; border-radius: var(--radius-md); font: 500 14px/20px var(--font-sans); color: var(--foreground-secondary); text-decoration: none; white-space: nowrap; }
.gio-header__nav a:hover { background: var(--accent); color: var(--foreground); }
.gio-header__nav a[aria-current="page"] { color: var(--primary); font-weight: 600; background: var(--brand-tint); }
.gio-header__tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.gio-header__search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--foreground-secondary); cursor: pointer; }
.gio-header__search:hover { background: var(--accent); }

/* Hero */
.gio-hero { position: relative; background: var(--hero); border-bottom: 1px solid var(--border); }
.gio-hero__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gio-hero__in { position: relative; max-width: var(--container-max); margin: 0 auto; padding: var(--space-18) var(--space-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.gio-hero__title { font: 700 40px/48px var(--font-sans); letter-spacing: -0.02em; margin: 0; color: var(--foreground); text-wrap: balance; }
.gio-hero__sub { font: 400 17px/28px var(--font-sans); color: var(--foreground-tertiary); margin: 0 0 var(--space-3); }
.gio-hero__title--h1 { font-size: 32px; line-height: 40px; }
.gio-hero--left .gio-hero__in { align-items: flex-start; text-align: left; }
.gio-hero__in > .gio-ac { width: 100%; max-width: 640px; text-align: left; }
.gio-ac { position: relative; }
.gio-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--muted-foreground); margin-top: var(--space-2); align-items: center; }
.gio-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: var(--background); color: var(--foreground-secondary); text-decoration: none; font: 500 13px/1 var(--font-sans); cursor: pointer; }
.gio-chip:hover, .gio-chip[aria-pressed="true"] { border-color: var(--brand-tint-strong); background: var(--brand-tint); color: var(--primary-hover); }

/* Autocomplete listbox */
.gio-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--background); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); padding: 6px; z-index: 5; }
.gio-pop__group { padding: 8px 10px 4px; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.gio-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--foreground); cursor: pointer; text-decoration: none; }
.gio-opt mark { background: none; color: var(--primary-hover); font-weight: 700; }
.gio-opt[aria-selected="true"], .gio-opt:hover { background: var(--brand-tint); }
.gio-opt__meta { margin-left: auto; font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.gio-opt--ai { color: var(--primary-hover); font-weight: 600; }
.gio-pop__empty { padding: 18px 12px; text-align: center; color: var(--muted-foreground); font: 400 14px/20px var(--font-sans); }

/* Search spotlight dialog */
.gio-scrim { position: relative; background: rgba(23, 23, 23, .48); padding: 56px var(--space-4); display: flex; justify-content: center; align-items: flex-start; min-height: 100%; }
.gio-dialog { width: 100%; max-width: var(--dialog-width); background: var(--background); border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); overflow: hidden; border: 1px solid var(--border-subtle); }
.gio-dialog__head { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); height: 60px; }
.gio-dialog__head input { flex: 1; border: 0; outline: none; font: 400 17px/24px var(--font-sans); color: var(--foreground); background: transparent; min-width: 0; }
.gio-dialog__head input::placeholder { color: var(--muted-foreground); }
.gio-dialog__body { padding: 6px; max-height: 360px; overflow: auto; }
.gio-dialog__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 10px var(--space-4); border-top: 1px solid var(--border); background: var(--surface); font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); }
.gio-dialog__foot span { display: inline-flex; gap: 6px; align-items: center; }

/* Sheet (side panel), chat messages, composer */
.gio-sheet { width: 100%; max-width: var(--panel-width); height: 100%; display: flex; flex-direction: column; background: var(--background); border-left: 1px solid var(--border); box-shadow: var(--shadow-popover); }
.gio-sheet__head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3) 0 var(--space-4); height: 56px; border-bottom: 1px solid var(--border); }
.gio-sheet__title { font: 600 15px/20px var(--font-sans); display: inline-flex; gap: 8px; align-items: center; margin-right: auto; }
.gio-sheet__title svg { color: var(--primary); }
.gio-sheet__body { flex: 1; overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gio-sheet__ctx { font: 500 12px/16px var(--font-sans); color: var(--muted-foreground); display: inline-flex; gap: 6px; align-items: center; }
.gio-sheet__foot { padding: var(--space-3); border-top: 1px solid var(--border); }
.gio-msg { max-width: 92%; padding: 10px 12px; border-radius: var(--radius-lg); font: 400 14px/22px var(--font-sans); }
.gio-msg--user { align-self: flex-end; background: var(--secondary); color: var(--foreground); }
.gio-msg--ai { align-self: flex-start; background: var(--brand-tint); color: var(--foreground); border: 1px solid var(--brand-tint-strong); }
.gio-msg__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gio-composer-wrap { display: flex; flex-direction: column; gap: 6px; }
.gio-composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: 6px; border: 1px solid var(--input); border-radius: var(--radius-lg); background: var(--background); }
.gio-composer:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(8, 107, 48, .24); }
.gio-composer textarea { flex: 1; border: 0; outline: none; resize: none; min-height: 60px; padding: 4px 6px; font: 400 14px/20px var(--font-sans); color: var(--foreground); background: transparent; }
.gio-composer__note { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--muted-foreground); text-align: center; }

/* Site footer */
.gio-footer { background: var(--surface); border-top: 1px solid var(--border); }
.gio-footer__in { max-width: var(--container-max); margin: 0 auto; padding: var(--space-14) var(--space-6) var(--space-6); }
.gio-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-10); }
.gio-footer__co { display: flex; flex-direction: column; gap: var(--space-3); font: 400 13px/20px var(--font-sans); color: var(--foreground-tertiary); }
.gio-footer__co img { height: 40px; width: auto; align-self: flex-start; }
.gio-footer__co strong { color: var(--foreground); font-weight: 600; }
.gio-footer__certs { display: flex; flex-wrap: wrap; gap: 6px; }
.gio-footer h4 { margin: 0 0 var(--space-3); font: 600 14px/20px var(--font-sans); color: var(--foreground); }
.gio-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gio-footer li a { font: 400 13px/18px var(--font-sans); color: var(--foreground-tertiary); text-decoration: none; }
.gio-footer li a:hover { color: var(--primary); text-decoration: underline; }
.gio-footer__legal { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font: 400 12px/16px var(--font-sans); color: var(--muted-foreground); }
.gio-footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.gio-footer__legal a { color: var(--muted-foreground); text-decoration: none; }
.gio-footer__legal a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 900px) { .gio-footer__grid { grid-template-columns: repeat(2, 1fr); } .gio-footer__co { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .gio-header__nav { display: none; } }