/* operandor design system — ported from design-system/ for Blazor.
   Every component value resolves to a semantic token so light/dark and
   theming stay a single-file change. Component prefix: .op- */

/* ---------------------------------------------------------------- fonts */
/* IBM Plex (SIL OFL 1.1), self-hosted from /assets/fonts — no external CDN. */
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* --------------------------------------------------------------- colors */
:root{
--green-50:#F1FBE6;--green-100:#DFF4C6;--green-200:#C0E794;--green-300:#93D051;
--green-400:#5EA905;--green-500:#3E891A;--green-600:#2D7612;--green-700:#216111;
--green-800:#164B10;--green-900:#0F380E;--green-950:#09250A;

--n-0:#FFFFFF;--n-50:#FAFBF9;--n-100:#F4F5F3;--n-200:#E8EAE6;--n-300:#D6D9D3;
--n-400:#A5AAA2;--n-500:#7F857C;--n-600:#636A61;--n-700:#4A5049;--n-800:#333833;
--n-900:#1C2126;--n-950:#14181C;

--slate-50:#F1F5F8;--slate-100:#DFE8EE;--slate-200:#BFD0DC;--slate-300:#94AEC0;
--slate-400:#648197;--slate-500:#3F5B72;--slate-600:#253645;--slate-700:#1E2C39;
--slate-800:#17222C;--slate-900:#111A22;--slate-950:#0B1118;
}

/* --------------------------------------------------------------- status */
:root{
--danger-50:#FCEFED;--danger-100:#F7D9D4;--danger-500:#B5342A;--danger-600:#9C2A21;
--danger-700:#7C2019;--danger-400:#E0675A;
--success-50:var(--green-50);--success-600:var(--green-600);--success-400:var(--green-400);
--info-50:var(--slate-50);--info-600:var(--slate-600);--info-400:var(--slate-400);
}

/* ----------------------------------------------------------- typography */
:root{
--font-heading:"Plex Sans","Söhne","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-body:"Plex Sans","Söhne","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-serif:"Plex Serif",Georgia,"Times New Roman",serif;
--font-mono:"Plex Mono","Berkeley Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--fw-regular:400;--fw-medium:500;--fw-semibold:600;

--fs-display:4.5rem;--fs-h1:3rem;--fs-h2:2.125rem;--fs-h3:1.375rem;--fs-h4:1.125rem;
--fs-body-lg:1.125rem;--fs-body:1rem;--fs-body-sm:0.875rem;--fs-caption:0.8125rem;--fs-micro:0.6875rem;

--lh-display:1.02;--lh-heading:1.14;--lh-body:1.6;--lh-tight:1.35;

--ls-display:-0.022em;--ls-heading:-0.014em;--ls-body:0em;--ls-label:0.01em;--ls-eyebrow:0.14em;--ls-mono:-0.005em;

--tt-eyebrow:uppercase;
}

/* -------------------------------------------------------------- spacing */
:root{
--sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:24px;
--sp-7:32px;--sp-8:48px;--sp-9:64px;--sp-10:96px;--sp-11:128px;--sp-12:192px;

--measure-prose:64ch;--measure-narrow:46ch;--container-max:1200px;--container-text:760px;
--gutter:clamp(20px,5vw,64px);

--radius-0:0px;--radius-1:2px;--radius-2:4px;--radius-3:6px;--radius-4:10px;--radius-5:16px;--radius-full:999px;
--border-hairline:1px;--border-strong:1.5px;--border-focus:2px;
}

/* ------------------------------------------------------------ elevation */
:root{
--shadow-0:none;
--shadow-1:0 1px 2px rgba(20,24,28,0.05);
--shadow-2:0 1px 2px rgba(20,24,28,0.04),0 2px 8px rgba(20,24,28,0.06);
--shadow-3:0 2px 4px rgba(20,24,28,0.04),0 8px 24px rgba(20,24,28,0.08);
--shadow-4:0 4px 8px rgba(20,24,28,0.06),0 18px 48px rgba(20,24,28,0.12);
--shadow-inset-hairline:inset 0 0 0 1px rgba(20,24,28,0.06);
--shadow-1-dark:0 1px 2px rgba(0,0,0,0.4);
--shadow-2-dark:0 2px 8px rgba(0,0,0,0.45);
--shadow-3-dark:0 8px 24px rgba(0,0,0,0.5);
--shadow-4-dark:0 18px 48px rgba(0,0,0,0.55);
}

/* --------------------------------------------------------------- motion */
:root{
--dur-instant:80ms;--dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;--dur-deliberate:520ms;--dur-wordmark:2600ms;
--ease-standard:cubic-bezier(0.2,0,0,1);
--ease-exit:cubic-bezier(0.4,0,1,1);
--ease-inout:cubic-bezier(0.4,0,0.2,1);
--ease-linear:linear;
}
@media (prefers-reduced-motion:reduce){
:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-deliberate:0ms;--dur-wordmark:0ms}
}

/* ------------------------------------------------------------ semantic */
:root,[data-theme="light"]{
--surface-page:var(--n-100);--surface-card:var(--n-0);--surface-sunken:var(--n-200);
--surface-raised:var(--n-0);--surface-inverse:var(--n-950);--surface-structural:var(--slate-600);
--surface-accent-tint:var(--green-50);--surface-hover:var(--n-200);--surface-active:var(--n-300);--surface-disabled:var(--n-200);

--text-heading:var(--n-950);--text-body:var(--n-800);--text-muted:var(--n-600);--text-subtle:var(--n-500);
--text-disabled:var(--n-400);--text-on-accent:var(--n-0);--text-on-inverse:var(--n-100);
--text-on-structural:var(--green-300);--text-on-accent-tint:var(--green-800);
--text-link:var(--green-600);--text-link-hover:var(--green-700);

--border-subtle:var(--n-200);--border-default:var(--n-300);--border-strong-c:var(--n-400);
--border-inverse:rgba(255,255,255,0.14);--border-accent:var(--green-600);

--accent:var(--green-600);--accent-hover:var(--green-700);--accent-active:var(--green-800);
--accent-quiet:var(--green-100);--brand-mark:var(--green-500);--focus-ring:var(--green-600);

--shadow-card:var(--shadow-1);--shadow-raised:var(--shadow-2);--shadow-overlay:var(--shadow-4);
--scrim:rgba(20,24,28,0.44);
}
html{color-scheme:light}

/* ------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}

/* ---------------------------------------------------------------- button */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);border:1px solid transparent;border-radius:var(--radius-2);cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.op-btn:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-btn:active{transform:translateY(0.5px)}
.op-btn--sm{height:32px;padding:0 var(--sp-4);font-size:var(--fs-caption)}
.op-btn--md{height:40px;padding:0 var(--sp-5);font-size:var(--fs-body-sm)}
.op-btn--lg{height:48px;padding:0 var(--sp-6);font-size:var(--fs-body)}
.op-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.op-btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.op-btn--primary:active{background:var(--accent-active)}
.op-btn--secondary{background:var(--surface-structural);color:var(--n-0)}
.op-btn--secondary:hover{background:var(--slate-700);color:var(--n-0)}
.op-btn--secondary:active{background:var(--slate-800)}
.op-btn--outline{background:transparent;color:var(--text-heading);border-color:var(--border-default)}
.op-btn--outline:hover{background:var(--surface-hover);border-color:var(--border-strong-c);color:var(--text-heading)}
.op-btn--outline.op-btn--on-dark{color:#fff;border-color:rgba(255,255,255,0.3)}
.op-btn--outline.op-btn--on-dark:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.65);color:#fff}
.op-btn--outline.op-btn--on-dark:active{background:rgba(255,255,255,0.22)}
.op-btn--ghost{background:transparent;color:var(--text-link)}
.op-btn--ghost:hover{background:var(--surface-accent-tint);color:var(--text-link)}
.op-btn--danger{background:var(--danger-600);color:var(--n-0)}
.op-btn--danger:hover{background:var(--danger-700)}
.op-btn[disabled],.op-btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed;transform:none}
.op-btn--block{width:100%}

/* -------------------------------------------------------------- iconbtn */
.op-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-2);color:var(--text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.op-iconbtn:hover{background:var(--surface-hover);color:var(--text-heading)}
.op-iconbtn:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-iconbtn--sm{width:32px;height:32px}
.op-iconbtn--md{width:40px;height:40px}
.op-iconbtn--outline{border-color:var(--border-default)}
.op-iconbtn[disabled]{color:var(--text-disabled);cursor:not-allowed}

/* --------------------------------------------------------------- badge */
.op-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:3px var(--sp-3) 2px;border-radius:var(--radius-1);border:1px solid transparent}
.op-badge--accent{background:var(--surface-accent-tint);color:var(--text-on-accent-tint)}
.op-badge--neutral{background:var(--surface-sunken);color:var(--text-muted)}
.op-badge--outline{border-color:var(--border-default);color:var(--text-muted)}
.op-badge--danger{background:var(--danger-50);color:var(--danger-700)}
.op-badge--solid{background:var(--accent);color:var(--text-on-accent)}

/* ----------------------------------------------------------------- tag */
.op-tag{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-caption);color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2);padding:4px var(--sp-3);font-family:var(--font-mono);letter-spacing:var(--ls-mono)}
.op-tag--removable{padding-right:var(--sp-2)}
.op-tag__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;background:transparent;color:var(--text-subtle);cursor:pointer;border-radius:var(--radius-1)}
.op-tag__x:hover{background:var(--surface-hover);color:var(--text-heading)}

/* ---------------------------------------------------------------- card */
.op-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-3);box-shadow:var(--shadow-card)}
.op-card--flat{box-shadow:none}
.op-card--raised{box-shadow:var(--shadow-raised)}
.op-card--structural{background:var(--surface-structural);border-color:transparent;color:var(--n-0)}
.op-card--pad-md{padding:var(--sp-6)}
.op-card--pad-lg{padding:var(--sp-7)}
.op-card--pad-none{padding:0}
.op-card--interactive{cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.op-card--interactive:hover{border-color:var(--border-accent);box-shadow:var(--shadow-raised);transform:translateY(-1px)}

/* ---------------------------------------------------------------- stat */
.op-stat__label{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-subtle);font-weight:var(--fw-medium)}
.op-stat__value{font-family:var(--font-mono);font-size:32px;letter-spacing:-0.02em;color:var(--text-heading);line-height:1.1;margin-top:var(--sp-3)}
.op-stat__hint{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--sp-2)}

/* --------------------------------------------------------------- field */
.op-field{display:flex;flex-direction:column;gap:var(--sp-3)}
.op-field__label{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);color:var(--text-heading)}
.op-field__req{color:var(--accent);margin-left:2px}
.op-field__hint{font-size:var(--fs-caption);color:var(--text-muted)}
.op-field__error{font-size:var(--fs-caption);color:var(--danger-600)}

.op-input,.op-textarea,.op-select{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:var(--fs-body-sm);color:var(--text-heading);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2);padding:0 var(--sp-4);height:40px;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.op-textarea{height:auto;padding:var(--sp-4);line-height:var(--lh-body);resize:vertical}
.op-input::placeholder,.op-textarea::placeholder{color:var(--text-disabled)}
.op-input:hover,.op-textarea:hover,.op-select:hover{border-color:var(--border-strong-c)}
.op-input:focus,.op-textarea:focus,.op-select:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--accent-quiet)}
.op-input--invalid,.op-textarea--invalid,.op-select--invalid{border-color:var(--danger-500)}
.op-input--invalid:focus{box-shadow:0 0 0 3px var(--danger-50)}
.op-input[disabled],.op-textarea[disabled],.op-select[disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.op-input--mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono)}
.op-select{appearance:none;padding-right:var(--sp-7);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 12px) 17px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* --------------------------------------------------------- check/radio */
.op-check,.op-radio{display:inline-flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body-sm);color:var(--text-body);cursor:pointer}
.op-check__box,.op-radio__box{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--border-strong-c);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.op-check__box{border-radius:var(--radius-1)}
.op-radio__box{border-radius:var(--radius-full)}
.op-check:hover .op-check__box,.op-radio:hover .op-radio__box{border-color:var(--accent)}
.op-check--on .op-check__box{background:var(--accent);border-color:var(--accent)}
.op-radio--on .op-radio__box{border-color:var(--accent);border-width:5px}
.op-check__mark{width:11px;height:11px;color:var(--text-on-accent)}
.op-check input,.op-radio input{position:absolute;opacity:0;width:0;height:0}
.op-check input:focus-visible+.op-check__box,.op-radio input:focus-visible+.op-radio__box{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-check--disabled,.op-radio--disabled{color:var(--text-disabled);cursor:not-allowed}

/* -------------------------------------------------------------- callout */
.op-callout{display:flex;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--radius-3);border:1px solid var(--border-subtle);background:var(--surface-card);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.op-callout__icon{flex:0 0 auto;margin-top:1px}
.op-callout__title{font-weight:var(--fw-semibold);color:var(--text-heading);margin-bottom:2px}
.op-callout--accent{background:var(--surface-accent-tint);border-color:var(--green-200);color:var(--text-on-accent-tint)}
.op-callout--accent .op-callout__title{color:var(--text-on-accent-tint)}
.op-callout--danger{background:var(--danger-50);border-color:var(--danger-100);color:var(--danger-700)}
.op-callout--danger .op-callout__title{color:var(--danger-700)}
.op-callout--info{background:var(--info-50);border-color:var(--slate-200);color:var(--slate-700)}

/* ------------------------------------------------------- dialog / toast */
.op-scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);z-index:50;animation:op-fade var(--dur-base) var(--ease-standard)}
.op-dialog{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-4);box-shadow:var(--shadow-overlay);width:100%;max-width:480px;animation:op-rise var(--dur-slow) var(--ease-standard)}
.op-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-6) var(--sp-6) 0}
.op-dialog__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);color:var(--text-heading)}
.op-dialog__body{padding:var(--sp-4) var(--sp-6) var(--sp-6);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.op-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)}
@keyframes op-fade{from{opacity:0}to{opacity:1}}
@keyframes op-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.op-toast{display:flex;align-items:flex-start;gap:var(--sp-4);background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--radius-3);box-shadow:var(--shadow-overlay);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-body-sm);max-width:420px;animation:op-rise var(--dur-slow) var(--ease-standard)}
.op-toast__title{font-weight:var(--fw-semibold)}
.op-toast__msg{opacity:0.78;margin-top:2px}
.op-toast--accent .op-toast__icon{color:var(--green-300)}
.op-toast--danger .op-toast__icon{color:var(--danger-400)}
.op-toast__x{margin-left:auto;background:transparent;border:0;color:currentColor;opacity:0.6;cursor:pointer;padding:0}
.op-toast__x:hover{opacity:1}

/* --------------------------------------------------------- breadcrumbs */
.op-crumbs{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-caption);color:var(--text-muted);flex-wrap:wrap}
.op-crumbs a{color:var(--text-muted);text-decoration:none}
.op-crumbs a:hover{color:var(--text-link)}
.op-crumbs__sep{color:var(--text-disabled)}
.op-crumbs__current{color:var(--text-heading)}

/* --------------------------------------------------------------- icon */
.op-icon{display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}

/* ----------------------------------------------------- site chrome */
.op-band{position:relative;padding:96px var(--gutter)}
.op-band__inner{max-width:var(--container-max);margin:0 auto;position:relative}
.op-band--page{background:var(--surface-page)}
.op-band--card{background:var(--surface-card)}
.op-band--structural{background:var(--slate-600)}
.op-band--dark{background:var(--n-950)}

.op-eyebrow{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent)}
.op-eyebrow--dark{color:var(--green-300)}

.op-wordmark{line-height:1}
.op-wordmark__dot{color:var(--brand-mark)}
.op-wordmark__i{position:relative;display:inline-block;line-height:1}
.op-wordmark__i::before{content:"";position:absolute;left:0.137em;transform:translateX(-50%);top:0.14em;width:0.15em;height:0.15em;border-radius:50%;background:var(--brand-mark)}

.op-field-mark{position:absolute;inset:0;-webkit-mask-image:url("/assets/mark-f.svg");mask-image:url("/assets/mark-f.svg");-webkit-mask-repeat:repeat;mask-repeat:repeat}

.op-header{position:sticky;top:0;z-index:30;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.op-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;gap:40px}
.op-header__nav{display:flex;gap:28px;margin-left:8px}
.op-nav-link{font-size:14px;font-weight:500;letter-spacing:0.01em;text-decoration:none;padding-bottom:2px;color:var(--text-muted);border-bottom:2px solid transparent}
.op-nav-link:hover{color:var(--text-heading)}
.op-nav-link.active{color:var(--text-heading);border-bottom-color:var(--accent)}
.op-header__inner > a{display:flex;align-items:center;flex-shrink:0;min-width:0}
.op-header__right{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.op-header__right .op-btn{flex-shrink:0;white-space:nowrap;max-width:100%}
.op-header__mail{font-size:13px;font-family:var(--font-mono);color:var(--text-muted);text-decoration:none}
.op-header__toggle{display:none}

.op-footer{background:var(--n-950);padding:72px var(--gutter) 32px;position:relative;overflow:hidden}
.op-footer__inner{max-width:var(--container-max);margin:0 auto;position:relative}
.op-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.op-footer__coltitle{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--green-300);font-weight:500}
.op-footer__links{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.op-footer__links a{font-size:14px;color:rgba(255,255,255,0.72);text-decoration:none}
.op-footer__links a:hover{color:#fff}
.op-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);font-size:12px;color:rgba(255,255,255,0.45);font-family:var(--font-mono)}

/* --------------------------------------------------------- responsive */
@media (max-width:900px){
  .op-header__inner{gap:20px}
  .op-header__nav{display:none}
  .op-header__nav--open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-raised);padding:8px var(--gutter) 16px;margin:0;gap:0;z-index:29}
  .op-header__nav--open .op-nav-link{padding:14px 0;border-bottom:0}
  .op-header__toggle{display:inline-flex}
  .op-header__right{gap:8px}
  .op-footer__cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:640px){
  .op-header__inner{gap:12px}
  .op-header__right{gap:8px}
  .op-header__right .op-btn{height:30px;padding:0 12px;font-size:11px}
  .op-header__mail{display:none}
  .op-footer__cols{grid-template-columns:1fr}
  .op-band{padding:64px var(--gutter)}
}
@media (max-width:360px){
  .op-header__inner{gap:10px;padding-left:14px;padding-right:14px}
  .op-header__right{gap:6px}
  .op-header__right .op-btn{display:none}
  .op-header__toggle{width:32px;height:32px;flex-shrink:0;padding:0}
}

/* ------------------------------------------------------- page layouts */
.op-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:64px;align-items:center}
.op-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px;max-width:440px}
.op-hero-panel{position:relative;border-radius:var(--radius-4);overflow:hidden;background:var(--n-950);min-height:420px;display:flex;align-items:flex-end;padding:28px}
.op-hero-stats{display:flex;gap:48px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.op-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.op-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.op-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.op-stack-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center}

.op-service-row{display:grid;grid-template-columns:48px 1fr 260px;gap:28px;align-items:start}
.op-service-row__engage{border-left:1px solid var(--border-subtle);padding-left:24px}

.op-case-hero{display:grid;grid-template-columns:1fr 320px;gap:64px;margin-top:24px}
.op-case-body{display:grid;grid-template-columns:1fr 300px;gap:64px}

.op-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

@media (max-width:960px){
  .op-hero-grid,.op-work-grid,.op-stack-grid{grid-template-columns:1fr;gap:40px}
  .op-services-grid{grid-template-columns:repeat(2,1fr)}
  .op-case-hero,.op-case-body,.op-contact-grid{grid-template-columns:1fr;gap:40px}
  .op-service-row{grid-template-columns:1fr}
  .op-service-row__engage{border-left:0;padding-left:0;border-top:1px solid var(--border-subtle);padding-top:16px}
}
@media (max-width:640px){
  .op-hero-actions{grid-template-columns:1fr;max-width:100%}
  .op-services-grid{grid-template-columns:1fr}
  .op-steps-grid{grid-template-columns:1fr}
  .op-hero-stats{gap:24px}
}