/* =====================================================
   SOLIDENERGY — UI core (se-ui) - shared component layer · Hi-fi styles
   Industrial engineering · premium B2B.
   Dark navy chrome · light content · thin borders · soft radii.
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--color-text-primary); background: var(--color-bg); line-height: var(--lh-body); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
/* Base link — underlined, removes underline on hover. Buttons / components override. */
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; }
a:hover { text-decoration: none; }
a:not([class]):hover, .link:hover { color: var(--color-cyan-hover); }
.link { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.16em; }
.link:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); color: var(--color-text-primary); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-medium); }
p { font-size: var(--fs-body); line-height: var(--lh-body); }

.lead-l { font-size: var(--fs-lead-l); line-height: 1.5; color: var(--color-text-muted); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text-muted); }
.body-s { font-size: var(--fs-body-s); line-height: 1.55; }

.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-cyan); margin-bottom: var(--space-4); font-weight: var(--fw-medium); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--color-cyan); display: inline-block; }
.caption { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--color-text-dim); font-weight: var(--fw-medium); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted { color: var(--color-text-muted); }
.text-dim { color: var(--color-text-dim); }

/* On dark */
.section-dark, .hero { color: var(--color-text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5,
.hero h1, .hero h2, .hero h3 { color: var(--color-white); }
.section-dark p, .hero p { color: var(--color-text-on-dark-muted); }
.section-dark .caption { color: var(--color-text-on-dark-muted); }
.eyebrow.on-dark, .section-dark .eyebrow, .hero .eyebrow { color: var(--color-cyan-soft); }
.eyebrow.on-dark::before, .section-dark .eyebrow::before, .hero .eyebrow::before { background: var(--color-cyan-soft); }

/* ===== Container & Section ===== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-desktop); }
@media (max-width: 1023px) { .container { padding: 0 var(--container-pad-tablet); } }
@media (max-width: 767px) { .container { padding: 0 var(--container-pad-mobile); } }

section { padding: var(--section-pad) 0; }
@media (max-width: 1023px) { section { padding: var(--section-pad-tablet) 0; } }
@media (max-width: 767px) { section { padding: var(--section-pad-mobile) 0; } }

.section-band { background: var(--color-bg-secondary); }
.section-dark { background: var(--color-bg-dark); position: relative; }

.section-head { margin-bottom: var(--space-12); max-width: 760px; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); max-width: none; }
@media (max-width: 767px) { .section-head--row { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }

/* ===== Grid ===== */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-3, .grid-3-gap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } .grid-4, .grid-3, .grid-3-gap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-5, .grid-4, .grid-3, .grid-3-gap, .grid-2 { grid-template-columns: 1fr; } }

/* ===== Header (dark navy) ===== */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-navy); border-bottom: 1px solid var(--color-on-dark-border); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-10); min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-white); font-weight: var(--fw-bold); font-size: 16px; letter-spacing: 0.02em; }
.logo-mark { width: 26px; height: 26px; flex-shrink: 0; background: var(--color-cyan); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); position: relative; }
.logo-mark::before { content: ""; position: absolute; inset: 6px; background: var(--color-navy); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.logo-word { line-height: 1; }

nav.main-nav { margin: 0 auto; }
nav.main-nav ul { list-style: none; display: flex; gap: var(--space-8); }
nav.main-nav a { position: relative; text-decoration: none; color: rgba(255,255,255,0.78); font-size: var(--fs-nav); font-weight: var(--fw-medium); padding: 6px 0; transition: color var(--duration-fast); }
nav.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
nav.main-nav a:hover { color: var(--color-white); }
nav.main-nav a:hover::after, nav.main-nav a.active::after { transform: scaleX(1); }
nav.main-nav a.active { color: var(--color-white); }

.header-right { display: flex; align-items: center; gap: var(--space-5); }
.lang-toggle { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
.lang-toggle .active-lang { color: var(--color-white); font-weight: var(--fw-medium); }
.lang-toggle a { color: rgba(255,255,255,0.5); text-decoration: none; }
.lang-toggle a:hover { color: var(--color-cyan-soft); }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--color-on-dark-border-strong); background: transparent; border-radius: var(--radius-sm); position: relative; }
.burger::before { content: "≡"; color: var(--color-white); font-size: 20px; line-height: 38px; }
@media (max-width: 1023px) { nav.main-nav { display: none; } .burger { display: inline-block; } .site-header__inner { gap: var(--space-4); } .header-right .btn { display: none; } }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 22px; font-family: inherit; font-size: var(--fs-btn); font-weight: var(--fw-semibold); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all var(--duration-base) var(--ease-out); white-space: nowrap; border-radius: var(--radius-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn .ico-arrow { transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .ico-arrow { transform: translateX(3px); }

.btn-primary { background: var(--color-cyan); color: var(--color-white); border-color: var(--color-cyan); }
.btn-primary:hover { background: var(--color-cyan-hover); border-color: var(--color-cyan-hover); }
.btn-dark { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.btn-dark:hover { background: var(--color-cyan-hover); border-color: var(--color-cyan-hover); }
.btn-secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-cyan); color: var(--color-cyan); background: var(--color-tint); }
.btn-ghost { background: transparent; color: var(--color-cyan); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--color-cyan-hover); }
.btn-on-dark { background: var(--color-cyan); color: var(--color-white); border-color: var(--color-cyan); }
.btn-on-dark:hover { background: var(--color-cyan-hover); }
.btn-outline-dark { background: transparent; color: var(--color-white); border-color: var(--color-on-dark-border-strong); }
.btn-outline-dark:hover { border-color: var(--color-cyan-soft); color: var(--color-cyan-soft); background: rgba(255,255,255,0.04); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===== Arrow link ===== */
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-cyan); text-decoration: none; font-size: var(--fs-body-s); font-weight: var(--fw-semibold); transition: color var(--duration-base); }
.link-arrow .ico-arrow, .link-arrow::after { transition: transform var(--duration-base) var(--ease-out); }
.link-arrow:not(:has(.ico-arrow))::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9M9 5l3 3-3 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9M9 5l3 3-3 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.link-arrow:hover { color: var(--color-cyan-hover); }
.link-arrow:hover .ico-arrow, .link-arrow:hover::after { transform: translateX(3px); }
.link-arrow.on-dark { color: var(--color-cyan-soft); }
.link-arrow.on-dark:hover { color: var(--color-white); }

.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ===== Hero (dark image) ===== */
.hero { position: relative; background: var(--color-navy); overflow: hidden; padding: 0; }
.hero__bg { position: absolute; inset: 0; background:
    linear-gradient(90deg, var(--color-navy) 8%, rgba(10,26,42,0.82) 42%, rgba(10,26,42,0.45) 100%),
    var(--gradient-section-dark); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(46,122,168,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(46,122,168,0.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.hero .photo-note { position: absolute; top: 14px; right: 18px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); max-width: 320px; text-align: right; }
.hero__inner { position: relative; z-index: 2; padding: var(--space-20) 0; max-width: 720px; }
.hero h1 { margin: 0 0 var(--space-6); }
.hero .hero__lead { color: rgba(255,255,255,0.78); max-width: 600px; margin-bottom: var(--space-10); font-size: var(--fs-lead-l); }
@media (max-width: 767px) { .hero__inner { padding: var(--space-16) 0; } }

/* Hero stats — translucent cards on dark */
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-10); }
.hero-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); min-width: 150px; border: 1px solid var(--color-on-dark-border-strong); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); backdrop-filter: blur(4px); }
.hero-stat .num { font-family: var(--font-sans); font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; color: var(--color-cyan-soft); font-variant-numeric: tabular-nums; }
.hero-stat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); line-height: 1.4; }
@media (max-width: 767px) { .hero-stat { min-width: 0; flex: 1 1 42%; } }

/* ===== Placeholder ===== */
.placeholder { background: var(--color-bg-secondary); border: 1px dashed var(--color-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-muted); text-align: center; padding: var(--space-6); letter-spacing: 0.04em; border-radius: var(--radius-md); gap: 4px; }
.ph-43 { aspect-ratio: 4/3; } .ph-169 { aspect-ratio: 16/9; } .ph-21 { aspect-ratio: 2/1; } .ph-11 { aspect-ratio: 1/1; }
.ph-tall { aspect-ratio: 3/4; height: 100%; min-height: 320px; }
.section-dark .placeholder { background: var(--color-on-dark-fill); border-color: var(--color-on-dark-border-strong); color: var(--color-text-on-dark-muted); }

/* ===== Cards ===== */
.card { border: 1px solid var(--color-border); background: var(--color-bg-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base), box-shadow var(--duration-base); position: relative; border-radius: var(--radius-md); }
.card-link, a.card { cursor: pointer; }
.card-link:hover, a.card:hover { transform: translateY(-2px); border-color: var(--color-cyan); box-shadow: var(--shadow-md); }
.card-icon { width: 45px; height: 45px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-cyan); flex-shrink: 0; }
.card-icon svg { width: 45px; height: 45px; stroke: var(--color-cyan); }
.card-icon::before { content: ""; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 3px; }
.card-icon:has(svg)::before { display: none; }
.card h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.card p { font-size: var(--fs-body-s); color: var(--color-text-muted); line-height: 1.55; }
.card-meta { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-cyan); font-weight: var(--fw-medium); }
.card .card-bottom { margin-top: auto; padding-top: var(--space-3); }
/* Icon Card — варианты компоновки: иконка слева от заголовка (inline) / слева от контента (split) */
.card-inline .card-head { display: flex; align-items: center; gap: var(--space-3); }
.card-inline .card-head h3 { margin: 0; }
.card-split { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.card-split .card-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; min-width: 0; }

/* Photo card */
.photo-card { padding: 0; overflow: hidden; }
.photo-card .placeholder { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.photo-card > :not(img) { margin-left: var(--space-6); margin-right: var(--space-6); }
.photo-card > h3 { margin-top: var(--space-5); }
.photo-card > :last-child { margin-bottom: var(--space-6); }
.photo-card img { transition: transform var(--duration-slow) var(--ease-out); }
.photo-card:hover img { transform: scale(1.03); }

/* ===== Group label ===== */
.group-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-cyan); font-weight: var(--fw-medium); }

/* ===== About grid (home 01) ===== */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.85fr; gap: var(--space-12); align-items: start; }
@media (max-width: 1023px) { .about-grid { grid-template-columns: 1fr 1fr; } .about-grid > .ph-tall { display: none; } }
@media (max-width: 767px) { .about-grid { grid-template-columns: 1fr; } }
.points-grid { display: grid; gap: var(--space-5); }
.info-point { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; }
.info-point p { font-size: var(--fs-body-s); color: var(--color-text-muted); margin: 0; }
.info-point .card-icon { width: 40px; height: 40px; }

/* ===== Tech scheme (dark engineering diagram) ===== */
.tech-scheme { background: var(--color-navy-deep); border: 1px solid var(--color-on-dark-border-strong); border-radius: var(--radius-lg); padding: var(--space-8); min-height: 360px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: center; font-family: var(--font-mono); font-size: 12px; position: relative; }
.tech-scheme::before { content: "PROCESS · UTT / ГАЛОТЕР"; position: absolute; top: 12px; left: 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--color-cyan-soft); }
.tech-scheme .node { border: 1.5px solid var(--color-cyan); padding: 18px 10px; background: rgba(46,122,168,0.08); position: relative; text-align: center; border-radius: var(--radius-sm); color: var(--color-white); line-height: 1.4; }
.tech-scheme .node.cool { border-color: var(--color-cyan-soft); background: rgba(90,155,196,0.12); }
.tech-scheme .node.hot { border-color: var(--color-warm-stream); background: rgba(201,122,58,0.12); color: #E7B58C; }
.tech-scheme .node .arrow { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--color-cyan-soft); z-index: 2; }
.tech-scheme .loop-label, .tech-scheme .scheme-label { grid-column: 1 / -1; text-align: center; color: var(--color-cyan-soft); font-size: 10px; margin-top: var(--space-2); letter-spacing: 0.06em; }
@media (max-width: 767px) { .tech-scheme { grid-template-columns: 1fr; } .tech-scheme .node .arrow { right: 50%; top: auto; bottom: -16px; transform: translateX(50%) rotate(90deg); } }

/* ===== Facts grid ===== */
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fact-card { padding: var(--space-6); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.fact-card .num { font-family: var(--font-sans); font-size: var(--fs-stat); line-height: 1.05; color: var(--color-cyan); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.fact-card .lbl { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-2); font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; }
.section-dark .fact-card { background: var(--color-on-dark-fill); border-color: var(--color-on-dark-border); }
.section-dark .fact-card .num { color: var(--color-cyan-soft); }
.section-dark .fact-card .lbl { color: rgba(255,255,255,0.6); }

/* ===== Cases grid (home 08) ===== */
.cases-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 1.1fr; gap: var(--space-4); align-items: stretch; }
@media (max-width: 1023px) { .cases-grid { grid-template-columns: 1fr 1fr; } .cases-grid .quote-card { grid-column: 1 / -1; } }
@media (max-width: 767px) { .cases-grid { grid-template-columns: 1fr; } }
.cases-stats { display: flex; flex-direction: column; gap: var(--space-4); }
.cases-stats .fact-card { flex: 1; justify-content: center; }
.quote-card { justify-content: center; }
.quote-card .q-mark { font-family: var(--font-mono); font-size: 40px; line-height: 1; color: var(--color-cyan); }
.quote-card .q-by { font-size: 12.5px; color: var(--color-text-dim); font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ===== Stages / timeline ===== */
.stages { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-4); counter-reset: stage; }
.stage { padding-top: var(--space-4); border-top: 1.5px solid var(--color-cyan); position: relative; }
.stage::before { counter-increment: stage; content: "0" counter(stage); display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-cyan); font-weight: var(--fw-medium); }
.stage h4 { font-size: 14.5px; margin-bottom: var(--space-1); font-weight: var(--fw-semibold); }
.stage p { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 1023px) { .stages { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .stages { grid-template-columns: 1fr; gap: var(--space-3); } .stage { border-top: none; border-left: 1.5px solid var(--color-cyan); padding-top: 0; padding-left: var(--space-4); } }

/* ===== Forms ===== */
.form-grid { display: grid; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--fw-medium); }
.field input, .field textarea, .field select { border: 1px solid var(--color-border-strong); padding: 13px 15px; font-family: inherit; font-size: var(--fs-body-s); background: var(--color-bg-card); color: var(--color-text-primary); border-radius: var(--radius-sm); transition: all var(--duration-fast); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-dim); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-cyan); box-shadow: var(--shadow-focus); }
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; } }
.field-checkbox { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.field-checkbox input { width: 18px; height: 18px; accent-color: var(--color-cyan); flex-shrink: 0; }
.field-checkbox label { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; font-weight: var(--fw-regular); }
.field-file { border: 1px dashed var(--color-border-strong); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--duration-fast); }
.field-file:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.field-file::before { content: "📎"; }
.form-block { border: 1px solid var(--color-border); padding: var(--space-8); background: var(--color-bg-card); border-radius: var(--radius-lg); }

/* Forms on dark */
.section-dark .field label { color: var(--color-text-on-dark-muted); }
.section-dark .field input, .section-dark .field textarea, .section-dark .field select { background: var(--color-on-dark-fill); border-color: var(--color-on-dark-border-strong); color: var(--color-white); }
.section-dark .field input::placeholder, .section-dark .field textarea::placeholder { color: rgba(255,255,255,0.4); }
.section-dark .field input:focus, .section-dark .field textarea:focus, .section-dark .field select:focus { border-color: var(--color-cyan-soft); box-shadow: 0 0 0 3px rgba(90,155,196,0.2); }
.section-dark .field-file { color: var(--color-text-on-dark-muted); border-color: var(--color-on-dark-border-strong); }
.section-dark .field-file:hover { border-color: var(--color-cyan-soft); color: var(--color-cyan-soft); }
.section-dark .field-checkbox label { color: var(--color-text-on-dark-muted); }
.form-dark { border: 1px solid var(--color-on-dark-border); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-on-dark-fill); }

/* Purpose tabs */
.purpose-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.purpose-tab { padding: 10px 16px; border: 1px solid var(--color-border-strong); background: var(--color-bg-card); border-radius: var(--radius-sm); font-size: 13px; font-weight: var(--fw-medium); color: var(--color-text-muted); cursor: pointer; transition: all var(--duration-fast); }
.purpose-tab:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.purpose-tab.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

/* Custom select (replaces native dropdown) */
.select { position: relative; }
.select__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: 13px 15px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-card); color: var(--color-text-primary); font-family: inherit; font-size: var(--fs-body-s); text-align: left; cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.select__btn:focus-visible { outline: none; border-color: var(--color-cyan); box-shadow: var(--shadow-focus); }
.select.is-open .select__btn { border-color: var(--color-cyan); box-shadow: var(--shadow-focus); }
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__value.is-placeholder { color: var(--color-text-dim); }
.select__chevron { flex-shrink: 0; color: var(--color-text-dim); transition: transform var(--duration-base) var(--ease-out); }
.select.is-open .select__chevron { transform: rotate(180deg); }
.select__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast); }
.select.is-open .select__list { opacity: 1; visibility: visible; transform: translateY(0); }
.select__option { padding: 10px 12px; font-size: var(--fs-body-s); color: var(--color-text-primary); border-radius: var(--radius-xs); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.select__option:hover { background: var(--color-tint); color: var(--color-cyan-hover); }
.select__option.is-selected { background: var(--color-cyan); color: var(--color-white); }
.select__option.is-selected:hover { background: var(--color-cyan-hover); color: var(--color-white); }
.section-dark .select__btn { background: var(--color-on-dark-fill); border-color: var(--color-on-dark-border-strong); color: var(--color-white); }
.section-dark .select.is-open .select__btn, .section-dark .select__btn:focus-visible { border-color: var(--color-cyan-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cyan-soft) 20%, transparent); }
.section-dark .select__list { background: var(--color-surface-dark); border-color: var(--color-on-dark-border-strong); }
.section-dark .select__option { color: rgba(255, 255, 255, 0.85); }
.section-dark .select__option:hover { background: color-mix(in srgb, var(--color-cyan) 22%, transparent); color: var(--color-white); }
.section-dark .select__option.is-selected { background: var(--color-cyan); color: var(--color-white); }

/* ===== Chips / tags ===== */
.chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--color-border-strong); font-size: 12.5px; font-family: var(--font-sans); color: var(--color-text-muted); background: var(--color-bg-card); border-radius: var(--radius-xs); text-decoration: none; cursor: pointer; font-weight: var(--fw-medium); transition: all var(--duration-fast); }
.chip:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.chip.active, .chip-active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.chip.active:hover, .chip-active:hover { color: var(--color-tint); border-color: var(--color-cyan); }
.chips-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ===== CTA banner ===== */
.cta-banner { position: relative; overflow: hidden; background: var(--color-navy); color: var(--color-white); padding: var(--space-16) var(--space-12); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cta-banner.center { align-items: center; text-align: center; }
.cta-banner h2 { color: var(--color-white); max-width: 640px; }
.cta-banner p { max-width: 560px; color: rgba(255,255,255,0.7); }
.cta-banner .cta-row { margin-top: var(--space-3); }
.cta-banner__art { position: absolute; right: 0; bottom: 0; top: 0; width: 38%; background-image: linear-gradient(rgba(90,155,196,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(90,155,196,0.10) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; }
.cta-light { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-12); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cta-light.center { align-items: center; text-align: center; }
.cta-light h2, .cta-light p { color: var(--color-text-primary); }
.cta-light p { color: var(--color-text-muted); }
@media (max-width: 767px) { .cta-banner, .cta-light { padding: var(--space-12) var(--space-6); } .cta-banner__art { display: none; } }

/* ===== Checklist / cross-list ===== */
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
@media (max-width: 767px) { .do-dont { grid-template-columns: 1fr; gap: var(--space-8); } }
.check-list { list-style: none; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-body-s); align-items: start; }
.check-list li::before { content: "✓"; color: var(--color-cyan); font-weight: var(--fw-bold); }
.check-list.cross li::before { content: "✕"; color: var(--color-error); }

/* ===== Numbered list ===== */
.numbered-list { display: flex; flex-direction: column; gap: var(--space-5); }
.numbered-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.numbered-item:last-child { border-bottom: none; }
.numbered-item .num { font-family: var(--font-mono); font-size: 14px; color: var(--color-cyan); font-weight: var(--fw-medium); }
.numbered-item h4 { font-size: 17px; margin-bottom: var(--space-2); }
.numbered-item p { font-size: var(--fs-body-s); color: var(--color-text-muted); }

/* ===== Pull quote / inline CTA ===== */
.pull-quote { border-left: 3px solid var(--color-cyan); padding: var(--space-2) 0 var(--space-2) var(--space-6); font-size: 21px; line-height: 1.5; margin: var(--space-8) 0; }
.inline-cta { border: 1px solid var(--color-cyan); padding: var(--space-6); background: var(--color-tint); display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-8) 0; border-radius: var(--radius-md); }

/* ===== Breadcrumbs ===== */
.breadcrumbs { padding: var(--space-5) 0 0; font-size: 12.5px; color: var(--color-text-muted); font-family: var(--font-mono); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-cyan); }
.breadcrumbs .sep { margin: 0 var(--space-2); color: var(--color-text-dim); }
.breadcrumbs .current { color: var(--color-text-primary); }
.breadcrumbs.on-dark { padding: 0; margin-bottom: var(--space-6); color: rgba(255,255,255,0.55); }
.breadcrumbs.on-dark a { color: rgba(255,255,255,0.55); }
.breadcrumbs.on-dark a:hover { color: var(--color-cyan-soft); }
.breadcrumbs.on-dark .sep { color: rgba(255,255,255,0.3); }
.breadcrumbs.on-dark .current { color: var(--color-white); }

/* ===== Pagination ===== */
.pagination { display: flex; gap: var(--space-2); }
.pagination a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; text-decoration: none; color: var(--color-text-primary); transition: all var(--duration-fast); }
.pagination a:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.pagination a.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

/* ===== Search field ===== */
.search-field { position: relative; max-width: 420px; }
.search-field input { width: 100%; height: 48px; padding: 0 44px 0 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-body-s); background: var(--color-bg-card); }
.search-field input:focus { outline: none; border-color: var(--color-cyan); box-shadow: var(--shadow-focus); }
.search-field .ico-search { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-dim); }

/* ===== TOC ===== */
.toc-sticky { position: sticky; top: 96px; }
.toc-sticky .caption { margin-bottom: var(--space-3); display: block; }
.toc-sticky ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.toc-sticky a { font-size: 13px; color: var(--color-text-muted); text-decoration: none; padding-left: var(--space-3); border-left: 2px solid var(--color-border); transition: all var(--duration-fast); }
.toc-sticky a:hover, .toc-sticky a.active { color: var(--color-cyan); border-left-color: var(--color-cyan); }

/* ===== Article body ===== */
.article-body h2 { font-size: 30px; margin: var(--space-10) 0 var(--space-4); }
.article-body h3 { font-size: 22px; margin: var(--space-8) 0 var(--space-3); }
.article-body p { font-size: 16px; line-height: 1.7; margin-bottom: var(--space-4); }
.article-body a { color: var(--color-link); }

/* ===== Footer (dark navy) ===== */
.site-footer { background: var(--color-navy); color: var(--color-text-on-dark-muted); padding: var(--space-20) 0 0; border-top: 1px solid var(--color-cyan); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: var(--space-12); padding-bottom: var(--space-16); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.footer-brand .logo { margin-bottom: var(--space-4); }
.footer-desc { font-size: 13.5px; color: rgba(255,255,255,0.55); max-width: 300px; line-height: 1.6; }
.footer-social { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.footer-social .soc { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--color-on-dark-border-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); text-decoration: none; transition: all var(--duration-fast); }
.footer-social .soc:hover { border-color: var(--color-cyan-soft); color: var(--color-cyan-soft); }
.site-footer h4 { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-5); color: rgba(255,255,255,0.5); font-weight: var(--fw-medium); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: var(--space-3); }
.site-footer a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: var(--fs-body-s); transition: color var(--duration-fast); }
.site-footer a:hover { color: var(--color-cyan-soft); }
.footer-reg { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.4); line-height: 1.6; margin-top: var(--space-2); }
.footer-bottom { border-top: 1px solid var(--color-on-dark-border); padding: var(--space-5) 0; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.45); flex-wrap: wrap; gap: var(--space-2); }
.footer-legal a { color: rgba(255,255,255,0.45); text-decoration: none; margin-left: var(--space-5); }
.footer-legal a:first-child { margin-left: 0; }
.footer-legal a:hover { color: var(--color-cyan-soft); }
@media (max-width: 767px) { .footer-bottom { flex-direction: column; } .footer-legal a { margin-left: 0; margin-right: var(--space-4); } }

/* ===== Utility ===== */
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); }
.flex-col { display: flex; flex-direction: column; gap: var(--space-4); }
.text-center { text-align: center; }
.max-720 { max-width: 720px; } .max-820 { max-width: 820px; }

/* ===== UI-kit showcase specifics ===== */
.swatch { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-family: var(--font-mono); font-size: var(--fs-micro); background: var(--color-bg-card); }
.swatch-color { height: 110px; }
.swatch-meta { padding: var(--space-3); }
.swatch-name { font-family: var(--font-sans); color: var(--color-text-primary); font-weight: var(--fw-medium); font-size: 12.5px; margin-bottom: 2px; }
.swatch-hex { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.type-row { display: grid; grid-template-columns: 180px 90px 1fr; align-items: baseline; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.type-row .lbl { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.type-row .meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-dim); }
.spacing-row { display: grid; grid-template-columns: 90px 80px 1fr; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.spacing-row .lbl { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-text-muted); }
.spacing-bar { height: 14px; background: var(--color-cyan); border-radius: 2px; }
.component-block { border: 1px solid var(--color-border); padding: var(--space-8); background: var(--color-bg-card); border-radius: var(--radius-md); }
.component-block + .component-block { margin-top: var(--space-6); }
.component-meta { margin-bottom: var(--space-5); }
.component-meta h3 { margin-bottom: var(--space-2); }
.component-demo { padding: var(--space-8); background: var(--color-bg-secondary); border-radius: var(--radius-md); margin-bottom: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.component-demo.on-dark { background: var(--color-navy); }
.radii-demo { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.radii-demo > div { background: var(--color-bg-card); border: 1px solid var(--color-border); height: 88px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }

/* ===== Floating page nav / ToC (components) ===== */
main section[id] { scroll-margin-top: 64px; }
.page-nav { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--color-border); }
.page-nav ul { list-style: none; display: flex; gap: var(--space-8); overflow-x: auto; padding: var(--space-3) 0; scrollbar-width: none; }
.page-nav ul::-webkit-scrollbar { display: none; }
.page-nav a { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: color var(--duration-fast), border-color var(--duration-fast); }
.page-nav a:hover { color: var(--color-cyan); }
.page-nav a.active { color: var(--color-cyan); border-bottom-color: var(--color-cyan); }

/* ===== Variant badge ===== */
.kit-banner { position: fixed; bottom: 16px; right: 16px; background: var(--color-cyan); color: var(--color-white); padding: 9px 15px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; z-index: var(--z-banner); display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.kit-banner a { color: var(--color-white); text-decoration: underline; }