:root { --nh-ink:#07091a; --nh-surface:#11152d; --nh-surface-2:#181d3b; --nh-primary:#000093; --nh-cyan:#25d6f2; --nh-violet:#8967ff; --nh-lime:#b7f34a; --nh-text:#f7f8ff; --nh-muted:#b8bed8; --nh-border:#2b3155; --nh-warning:#ffbf5b; --nh-error:#ff6d8a; --nh-radius:12px; --nh-card-radius:16px; --nh-space:clamp(3.5rem,8vw,6.5rem); --nh-fast:120ms; --nh-normal:220ms; --nh-calm:420ms; --nh-ease:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; } body { background:var(--nh-ink); color:var(--nh-text); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } .brand-cover,.brand-section { position:relative; isolation:isolate; } .brand-cover { padding:clamp(5rem,11vw,9.5rem) 0 5rem; background:linear-gradient(130deg,#000093 0%,var(--nh-ink) 62%); } .brand-section { padding:var(--nh-space) 0; border-top:1px solid var(--nh-border); } .brand-layer-content,.brand-section .container { position:relative; z-index:1; } .brand-decoration { position:absolute; z-index:0; pointer-events:none; } .brand-cover-background { inset:0; background:radial-gradient(circle at 76% 20%,rgba(137,103,255,.42),transparent 25%),radial-gradient(circle at 85% 70%,rgba(37,214,242,.15),transparent 24%); } .brand-cover-orbit { width:min(34vw,460px); aspect-ratio:1; top:8%; right:4%; border:1px solid rgba(37,214,242,.45); border-radius:50%; box-shadow:0 0 0 36px rgba(137,103,255,.08),0 0 0 72px rgba(37,214,242,.04); } .brand-cover-mark { width:min(22vw,270px); right:6%; top:40%; opacity:.12; filter:drop-shadow(0 18px 28px rgba(0,0,0,.25)); }
h1,h2,h3,h4 { color:var(--nh-text); font-weight:800; letter-spacing:-.035em; line-height:1.1; } h1 { max-width:850px; font-size:clamp(3.2rem,8vw,6.4rem); } h2 { font-size:clamp(2.25rem,4.5vw,3.5rem); } h3 { margin-top:2.25rem; font-size:clamp(1.25rem,2vw,1.5rem); } h4 { font-size:1.1rem; } p { color:var(--nh-muted); } code { color:var(--nh-lime); } .brand-eyebrow { margin:0 0 1rem; color:var(--nh-cyan); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .brand-primary-logo { display:block; width:min(250px,72vw); height:auto; margin-bottom:2.5rem; } .brand-lead,.brand-intro { max-width:700px; font-size:clamp(1.12rem,2vw,1.4rem); } .brand-metric,.brand-value { height:100%; padding:1.25rem; border:1px solid var(--nh-border); border-radius:var(--nh-card-radius); background:rgba(17,21,45,.78); } .brand-metric span,.brand-value span { display:block; color:var(--nh-muted); font-size:.9rem; } .brand-metric strong,.brand-value strong { display:block; color:var(--nh-text); font-size:1.1rem; } .brand-value strong { margin-bottom:.4rem; }
.brand-progress { position:sticky; top:0; z-index:5; display:flex; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--nh-border); background:rgba(7,9,26,.92); backdrop-filter:blur(12px); } .brand-progress span { width:2.2rem; height:2.2rem; display:grid; place-items:center; border:1px solid var(--nh-border); border-radius:50%; color:var(--nh-muted); font-size:.78rem; font-weight:800; transition:background var(--nh-normal) var(--nh-ease),color var(--nh-normal) var(--nh-ease),transform var(--nh-fast) var(--nh-ease); } .brand-progress .is-active { background:var(--nh-cyan); border-color:var(--nh-cyan); color:var(--nh-ink); transform:scale(1.08); }
.brand-swatch { min-height:128px; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; border-radius:var(--nh-radius); font-weight:700; } .swatch-ink { border:1px solid var(--nh-border); background:var(--nh-ink); }.swatch-primary { background:var(--nh-primary); }.swatch-cyan { background:var(--nh-cyan); color:var(--nh-ink); }.swatch-lime { background:var(--nh-lime); color:var(--nh-ink); }.brand-type-sample { color:var(--nh-text); font-size:clamp(1.7rem,3vw,2.6rem); font-weight:800; letter-spacing:-.045em; line-height:1.15; }
.brand-card,.brand-asset-card,.brand-mini-card,.brand-modal .modal-content { border:1px solid var(--nh-border); border-radius:var(--nh-card-radius); background:var(--nh-surface); color:var(--nh-text); box-shadow:0 16px 36px rgba(0,0,0,.2); } .brand-card { transition:transform var(--nh-normal) var(--nh-ease),box-shadow var(--nh-normal) var(--nh-ease); }.brand-card:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.3); }.brand-mini-card { background:var(--nh-ink); }.btn { border-radius:var(--nh-radius); font-weight:700; transition:transform var(--nh-fast) var(--nh-ease),box-shadow var(--nh-normal) var(--nh-ease),background var(--nh-normal) var(--nh-ease),border-color var(--nh-normal) var(--nh-ease); }.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 9px 18px rgba(0,0,0,.25); }.btn:active:not(:disabled) { transform:translateY(1px); }.btn-primary { border-color:var(--nh-cyan); background:var(--nh-cyan); color:var(--nh-ink); }.btn-primary:hover,.btn-primary:focus { border-color:#70e7fb; background:#70e7fb; color:var(--nh-ink); }.btn-secondary { border-color:var(--nh-violet); background:var(--nh-violet); }.btn-outline-primary { border-color:var(--nh-cyan); color:var(--nh-cyan); }.btn-outline-primary:hover { background:var(--nh-cyan); color:var(--nh-ink); }.brand-btn-default { border-color:var(--nh-border); background:var(--nh-surface-2); color:var(--nh-text); }.brand-btn-default:hover { border-color:var(--nh-muted); background:var(--nh-surface-2); color:var(--nh-text); }.btn:disabled { opacity:.42; }.brand-scroll-cue span { display:inline-block; margin-left:.4rem; }
.badge { transition:transform var(--nh-fast) var(--nh-ease),opacity var(--nh-normal) var(--nh-ease); }.badge:hover { transform:translateY(-1px); }.brand-badge-info { background:rgba(37,214,242,.16); color:var(--nh-cyan); }.brand-badge-success { background:rgba(183,243,74,.16); color:var(--nh-lime); }.brand-badge-warning { background:rgba(255,191,91,.16); color:var(--nh-warning); }.breadcrumb { --bs-breadcrumb-divider-color:var(--nh-border); --bs-breadcrumb-item-active-color:var(--nh-muted); }.breadcrumb-item { color:var(--nh-cyan); }.brand-alert { border-radius:var(--nh-radius); animation:brand-alert-in var(--nh-normal) var(--nh-ease) both; }.alert-info { background:rgba(37,214,242,.12); border-color:var(--nh-cyan); color:var(--nh-text); }.alert-success { background:rgba(183,243,74,.12); border-color:var(--nh-lime); color:var(--nh-text); }.alert-warning { background:rgba(255,191,91,.12); border-color:var(--nh-warning); color:var(--nh-text); }.alert-danger { background:rgba(255,109,138,.12); border-color:var(--nh-error); color:var(--nh-text); } @keyframes brand-alert-in { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
.form-label { color:var(--nh-text); font-weight:700; }.form-control { border-color:var(--nh-border); border-radius:var(--nh-radius); background:var(--nh-ink); color:var(--nh-text); transition:border-color var(--nh-normal) var(--nh-ease),box-shadow var(--nh-normal) var(--nh-ease),transform var(--nh-normal) var(--nh-ease); }.form-control:focus { border-color:var(--nh-cyan); background:var(--nh-ink); color:var(--nh-text); box-shadow:0 0 0 .25rem rgba(37,214,242,.18); }.form-control.is-valid { border-color:var(--nh-lime); }.form-control.is-invalid { border-color:var(--nh-error); }.form-text { color:var(--nh-muted); }.valid-feedback { color:var(--nh-lime); }.invalid-feedback { color:var(--nh-error); }.brand-modal .modal-dialog { max-width:none; }.brand-modal .modal-content { animation:brand-modal-in var(--nh-normal) var(--nh-ease) both; }.brand-modal .modal-header,.brand-modal .modal-footer { border-color:var(--nh-border); }.brand-modal .modal-body { color:var(--nh-muted); }.btn-close { filter:invert(1); } @keyframes brand-modal-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }.brand-loader { color:var(--nh-cyan); }.brand-skeleton { display:block; height:.65rem; margin:.35rem 0; border-radius:999px; background:linear-gradient(90deg,var(--nh-surface-2) 25%,#303963 50%,var(--nh-surface-2) 75%); background-size:200% 100%; animation:brand-shimmer 1.4s linear infinite; } @keyframes brand-shimmer { to { background-position:-200% 0; } }
.brand-table-shell { border:1px solid var(--nh-border); border-radius:var(--nh-card-radius); }.table { --bs-table-bg:transparent; --bs-table-color:var(--nh-text); --bs-table-border-color:var(--nh-border); --bs-table-hover-color:var(--nh-text); --bs-table-hover-bg:rgba(37,214,242,.06); }.table caption { color:var(--nh-muted); }.table tbody tr { transition:background var(--nh-normal) var(--nh-ease),transform var(--nh-normal) var(--nh-ease); }.table tbody tr:hover { transform:translateX(2px); }.brand-sort { padding:0; color:var(--nh-text); font-weight:800; text-decoration:none; }.brand-sort span { display:inline-block; color:var(--nh-cyan); transition:transform var(--nh-fast) var(--nh-ease),opacity var(--nh-fast) var(--nh-ease); }.brand-sort:hover span,.brand-sort.is-sorted span { transform:translateY(2px); }.pagination { --bs-pagination-bg:var(--nh-surface); --bs-pagination-border-color:var(--nh-border); --bs-pagination-color:var(--nh-text); --bs-pagination-hover-bg:var(--nh-surface-2); --bs-pagination-hover-color:var(--nh-cyan); --bs-pagination-focus-bg:var(--nh-surface-2); --bs-pagination-focus-color:var(--nh-cyan); --bs-pagination-active-bg:var(--nh-cyan); --bs-pagination-active-border-color:var(--nh-cyan); --bs-pagination-active-color:var(--nh-ink); --bs-pagination-disabled-bg:var(--nh-surface); }.page-link { transition:transform var(--nh-fast) var(--nh-ease),background var(--nh-normal) var(--nh-ease); }.page-link:hover { transform:translateY(-2px); }.brand-asset-card img { max-width:260px; margin-bottom:1.5rem; }.brand-asset-card figcaption strong,.brand-asset-card figcaption span { display:block; }.brand-asset-card figcaption span { margin-top:.35rem; color:var(--nh-muted); }
.brand-reveal { opacity:0; transform:translateY(18px); transition:opacity var(--nh-calm) var(--nh-ease),transform var(--nh-calm) var(--nh-ease); }.brand-reveal.is-visible { opacity:1; transform:translateY(0); } a, .badge, .page-link { transition-timing-function:var(--nh-ease); } :focus-visible { outline:3px solid var(--nh-cyan); outline-offset:3px; }
@media (max-width:767.98px) { .brand-cover { padding-top:4.5rem; }.brand-cover-mark { display:none; }.brand-cover-orbit { width:48vw; right:4%; top:5%; box-shadow:0 0 0 24px rgba(137,103,255,.08); }.brand-progress { justify-content:flex-start; }.brand-swatch { min-height:105px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } .brand-reveal { opacity:1; transform:none; } .brand-decoration { transform:none!important; } }

@media (max-width:767.98px) { .brand-cover h1 { font-size:clamp(2.7rem,13vw,3.2rem); overflow-wrap:anywhere; } .brand-cover .row { --bs-gutter-x:0; } }
@media (max-width:767.98px) { .brand-cover h1 { inline-size:100%; max-inline-size:9ch; white-space:normal; word-break:normal; } }