/* ============ index.html ============ */
/* ============================
BASE — same tokens as other variants (self-contained)
============================ */
:root {
--ink:#0b1220; --ink-2:#1a2337; --mute:#5b6a82; --mute-2:#8894a8;
--line:#dfe5ee; --line-2:#eef2f8; --bg:#f5f7fb; --panel:#fff; --panel-2:#fafbfd;
--blue-50:#eaf2fb; --blue-100:#d5e5f6; --blue-300:#7aa8d6;
--blue-500:#3a7ebf; --blue-600:#2a68a8; --blue-700:#1f5289; --blue-900:#0f2e54;
--ok:#2bb673; --warn:#f0a020; --err:#d94848;
--font-sans:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
--font-display:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--r:10px; --r-lg:16px;
--shadow-sm:0 1px 0 rgba(15,46,84,.04),0 1px 2px rgba(15,46,84,.06);
--shadow-md:0 4px 12px rgba(15,46,84,.06),0 1px 2px rgba(15,46,84,.04);
--shadow-lg:0 20px 40px -20px rgba(15,46,84,.25);
--maxw:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
/* Utilbar (top strip) */
.utilbar{background:var(--ink);color:#c8d1e0;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}
.utilbar-inner{max-width:var(--maxw);margin:0 auto;padding:6px 24px;display:flex;align-items:center;gap:24px;justify-content:space-between}
.utilbar .pill{display:inline-flex;align-items:center;gap:8px;padding:2px 10px;border:1px solid #2b374e;border-radius:999px;color:#9fb3d1}
.utilbar .dot{width:6px;height:6px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 3px rgba(43,182,115,.18);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(43,182,115,.18)}50%{box-shadow:0 0 0 6px rgba(43,182,115,.05)}}
.utilbar a:hover{color:#fff}.utilbar .sep{color:#3a4762}
/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.logo-mark{width:30px;height:30px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text .name{font-family:var(--font-sans);font-weight:700;letter-spacing:-0.01em;display:inline-flex;align-items:center;font-size:15px}
.logo-text .name .nm-blue{background:linear-gradient(180deg,#4a9ce8,#1a5a9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text .name .nm-gray{background:linear-gradient(180deg,#a5b2bd,#5a6572);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo[style*="color:#fff"] .logo-text .name .nm-blue{background:linear-gradient(180deg,#7ab7f0,#4a9ce8);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo[style*="color:#fff"] .logo-text .name .nm-gray{background:linear-gradient(180deg,#d5dce4,#a5b2bd);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text .sub{font-size:11px;color:var(--mute);margin-top:4px;letter-spacing:.01em}
.nav{display:flex;gap:4px;justify-content:center}
.nav a{padding:8px 14px;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:500;transition:background 120ms,color 120ms}
.nav a:hover{background:var(--line-2)}.nav a.active{background:var(--ink);color:#fff}
.header-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;font-weight:500;font-size:14px;border:1px solid transparent;transition:transform 120ms,background 120ms,border-color 120ms}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-arrow{font-family:var(--font-mono)}
/* Footer (base) */
.site-footer{background:var(--ink);color:#c8d1e0;padding:80px 0 32px;margin-top:0}
.footer-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid #1d2a42}
.footer-grid h4{font-family:var(--font-mono);font-size:12px;color:#6b7a94;text-transform:uppercase;letter-spacing:.06em;font-weight:500;margin:0 0 16px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{padding:4px 0;font-size:14px}
.footer-grid a:hover{color:#fff}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:24px 24px 0;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:#6b7a94}
/* Tweaks panel */
.tweaks-panel{position:fixed;bottom:20px;right:20px;z-index:1000;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-lg);font-size:13px;min-width:220px;display:none}
.tweaks-panel[data-open="true"]{display:block}
.tweaks-panel h5{margin:0 0 10px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--mute);letter-spacing:.06em;font-weight:500}
.tweaks-panel select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-family:var(--font-mono);font-size:12px;background:var(--panel-2)}
@media (max-width:960px){.nav{display:none}.footer-grid{grid-template-columns:1fr 1fr}}
/* ============================
PAGE-E · CLIENT-FIRST
editorial, proof-led, industries + cases
============================ */
body.page-e{--display-serif:'Instrument Serif',Georgia,serif}
/* =========================================================
F · DARK OVERRIDES (applied on top of E, no structural changes)
========================================================= */
body.page-e{
/* Repaint palette tokens for dark mode */
--ink:#e7ecf4; /* body text (now light) */
--ink-2:#c7d0de;
--mute:#7b8aa3;
--mute-2:#8894a8;
--line:#1c2538; /* dark dividers */
--line-2:#141c2c; /* hover bg */
--bg:#0a0f1c; /* page bg */
--panel:#111827;
--panel-2:#0d1424;
--blue-50:#12233d;
--blue-100:#16304f;
--blue-300:#6ea7df;
--blue-500:#5c9de0;
--blue-600:#79b3ed; /* accent used for em / links */
--blue-700:#9ec7f2;
--blue-900:#cfe0f5;
--ok:#4cd493;
--warn:#ffc25c;
--err:#ff6b6b;
background:var(--bg);color:var(--ink);
}
/* Utilbar — keep dark but add hair border underneath */
body.page-e .utilbar{background:#050913;border-bottom:1px solid #111a2e}
body.page-e .utilbar .pill{border-color:#1d2740;color:#8fa2c0}
/* Header — now dark glass */
body.page-e .site-header{
background:rgba(10,15,28,.82);border-bottom:1px solid var(--line);
}
body.page-e .nav a{color:var(--ink-2)}
body.page-e .nav a:hover{background:#141c2c;color:#fff}
body.page-e .nav a.active{background:#fff;color:#0a0f1c}
/* Buttons */
body.page-e .btn-ghost{background:transparent;color:var(--ink);border-color:#243049}
body.page-e .btn-ghost:hover{border-color:#fff}
body.page-e .btn-primary{background:#fff;color:#0a0f1c;border-color:#fff}
body.page-e .btn-primary:hover{background:#e6ecf5}
/* Hero */
body.page-e .e-hero{
background:
radial-gradient(ellipse 60% 50% at 12% 22%, rgba(90,140,220,.08), transparent 60%),
radial-gradient(ellipse 50% 60% at 88% 78%, rgba(120,180,240,.06), transparent 60%),
#0a0f1c;
border-bottom:1px solid var(--line);
}
body.page-e .e-hero .meta{border-bottom:1px dashed #1d2740;color:#6d7f9b}
body.page-e .e-hero .meta .mid{color:#d8e0ec}
body.page-e .e-hero-main h1{color:#f1f5fb}
body.page-e .e-hero-main h1 em{color:var(--blue-600);font-style:italic}
body.page-e .e-hero-main h1 .num{color:#6d7f9b}
body.page-e .e-hero-lede p{color:#c1cbdc}
/* Proof cells */
body.page-e .e-hero-proof{border-top:1px solid var(--line)}
body.page-e .e-hero-proof .cell{border-right:1px solid var(--line)}
body.page-e .e-hero-proof .cell .n{color:#f1f5fb}
body.page-e .e-hero-proof .cell .n sup{color:var(--blue-600)}
body.page-e .e-hero-proof .cell .lbl{color:#8ea0bc}
/* Industries */
body.page-e .e-industries{background:#070c18;border-bottom:1px solid var(--line)}
body.page-e .e-industries .head h2{color:#f1f5fb}
body.page-e .e-industries .head h2 em{color:var(--blue-600)}
body.page-e .e-industries .head p{color:#8ea0bc}
body.page-e .e-industries .head .left .kicker{color:var(--blue-600)}
body.page-e .e-industries .head .left .kicker::before{background:var(--blue-600)}
body.page-e .ind-grid{background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg)}
body.page-e .ind-cell{background:#0e1626}
body.page-e .ind-cell:hover{background:#121c30}
body.page-e .ind-cell .ic{background:#16233b;color:var(--blue-600)}
body.page-e .ind-cell .n{color:#6d7f9b}
body.page-e .ind-cell .n b{color:#e7ecf4}
body.page-e .ind-cell h3{color:#f1f5fb}
body.page-e .ind-cell p{color:#8ea0bc}
body.page-e .ind-cell .tags span{background:#0a1120;border-color:#1d2740;color:#8ea0bc}
/* Cases */
body.page-e .e-cases{background:#0a0f1c;border-bottom:1px solid var(--line)}
body.page-e .e-cases .head{border-bottom:1px solid var(--line)}
body.page-e .e-cases .head h2{color:#f1f5fb}
body.page-e .e-cases .head h2 em{color:var(--blue-600)}
body.page-e .e-cases .head aside{color:#6d7f9b}
body.page-e .e-cases .head aside b{color:#e7ecf4}
body.page-e .e-cases .head aside .sn{color:var(--blue-600)}
body.page-e .e-cases .head .side-link{color:var(--blue-600)}
body.page-e .case{background:#0e1626;border:1px solid var(--line)}
body.page-e .case:hover{border-color:var(--blue-300);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
body.page-e .case .client .avatar{background:#16304f;color:var(--blue-700)}
body.page-e .case .client .meta b{color:#f1f5fb}
body.page-e .case .client .meta span{color:#6d7f9b}
body.page-e .case .badge.urgent{background:rgba(255,107,107,.14);color:#ff8b8b}
body.page-e .case .badge.plan{background:rgba(110,167,223,.14);color:var(--blue-600)}
body.page-e .case .badge.long{background:#141c2c;color:#8ea0bc}
body.page-e .case .title{color:#f1f5fb}
body.page-e .case .q-a .lbl{color:#6d7f9b}
body.page-e .case .q-a .val{color:#c1cbdc}
body.page-e .case .result{background:#0a1120;border-left-color:var(--ok)}
body.page-e .case .result .big{color:#f1f5fb}
body.page-e .case .result .big em{color:var(--blue-600)}
body.page-e .case .result .sub{color:#8ea0bc}
body.page-e .archive-note{background:#0a1120;border:1px dashed #1d2740;color:#8ea0bc}
body.page-e .archive-note a{color:var(--blue-600)}
/* How */
body.page-e .e-how{background:#070c18;border-bottom:1px solid var(--line)}
body.page-e .e-how .head h2{color:#f1f5fb}
body.page-e .e-how .head h2 em{color:var(--blue-600)}
body.page-e .e-how .head p{color:#8ea0bc}
body.page-e .e-how .head .kicker{color:var(--blue-600)}
body.page-e .e-how .head .kicker::before{background:var(--blue-600)}
body.page-e .steps{background:var(--line);border:1px solid var(--line)}
body.page-e .step{background:#0e1626}
body.page-e .step .n{color:var(--blue-600)}
body.page-e .step h3{color:#f1f5fb}
body.page-e .step p{color:#8ea0bc}
body.page-e .step .when{color:var(--ok)}
/* Testimonials */
body.page-e .e-testi{background:#0a0f1c;border-bottom:1px solid var(--line)}
body.page-e .e-testi .head{border-bottom:1px solid var(--line)}
body.page-e .e-testi .head h2{color:#f1f5fb}
body.page-e .e-testi .head h2 em{color:var(--blue-600)}
body.page-e .e-testi .head a{color:var(--blue-600)}
body.page-e .testi{background:#0e1626;border:1px solid var(--line)}
body.page-e .testi .quote-mark{color:var(--blue-600)}
body.page-e .testi blockquote{color:#c1cbdc}
body.page-e .testi blockquote em{color:#f1f5fb}
body.page-e .testi .who{border-top:1px solid var(--line)}
body.page-e .testi .who .ava{background:#16304f;color:var(--blue-700)}
body.page-e .testi .who .info b{color:#f1f5fb}
body.page-e .testi .who .info span{color:#6d7f9b}
body.page-e .testi .years{color:#6d7f9b}
/* Services */
body.page-e .e-svc{background:#070c18;border-bottom:1px solid var(--line)}
body.page-e .e-svc .head{border-bottom:1px solid var(--line)}
body.page-e .e-svc .head h2{color:#f1f5fb}
body.page-e .e-svc .head h2 em{color:var(--blue-600)}
body.page-e .e-svc .head a{color:var(--blue-600)}
body.page-e .svc-grid{background:var(--line);border:1px solid var(--line)}
body.page-e .svc-cell{background:#0e1626}
body.page-e .svc-cell:hover{background:#121c30}
body.page-e .svc-cell .k{color:var(--blue-600)}
body.page-e .svc-cell h3{color:#f1f5fb}
body.page-e .svc-cell p{color:#8ea0bc}
body.page-e .svc-cell .price{border-top:1px dashed #1d2740;color:#c1cbdc}
body.page-e .svc-cell .price b{color:#f1f5fb}
/* CTA - keep dark, refine */
body.page-e .e-cta{
background-image:
linear-gradient(135deg,rgba(110,167,223,.10),rgba(7,12,24,.9)),
linear-gradient(135deg,#121c30,#070c18);
}
/* Footer override (footer uses .site-footer var(--ink)) */
body.page-e .site-footer{background:#050913}
/* =========================================================
F · HERO NOC WIDGET (mini status-page)
========================================================= */
.noc-widget{
background:linear-gradient(180deg,#0e1626 0%,#0a1120 100%);
border:1px solid var(--line);border-radius:14px;
padding:18px 24px 16px;margin:24px 0 48px;
box-shadow:0 20px 48px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
font-family:var(--font-mono);
}
.noc-body{
display:grid;grid-template-columns:minmax(260px,1fr) minmax(240px,1fr) minmax(320px,1.4fr);
gap:28px;padding:16px 0 6px;
}
.noc-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.noc-col + .noc-col{border-left:1px dashed #1d2740;padding-left:28px}
.noc-col .noc-subtitle{padding:0 0 2px}
.noc-col-status .noc-metrics{grid-template-columns:repeat(3,1fr)}
.noc-head{
display:flex;align-items:center;gap:12px;
font-size:11px;color:#6d7f9b;letter-spacing:.08em;text-transform:uppercase;
padding-bottom:12px;border-bottom:1px dashed #1d2740;
}
.noc-head .lights{display:flex;gap:5px}
.noc-head .lights i{width:9px;height:9px;border-radius:999px;display:block}
.noc-head .lights i:nth-child(1){background:#ff6b6b}
.noc-head .lights i:nth-child(2){background:#ffc25c}
.noc-head .lights i:nth-child(3){background:#4cd493;box-shadow:0 0 0 3px rgba(76,212,147,.18)}
.noc-head b{color:#c1cbdc;font-weight:500;letter-spacing:.04em}
.noc-head .tail{margin-left:auto;color:#8ea0bc;font-variant-numeric:tabular-nums}
.noc-status{
display:flex;flex-direction:column;gap:12px;
}
.noc-pulse{
display:inline-flex;align-items:center;gap:10px;
padding:6px 12px 6px 10px;background:rgba(76,212,147,.08);
border:1px solid rgba(76,212,147,.22);border-radius:999px;
color:var(--ok);font-size:12px;font-weight:600;letter-spacing:.06em;
}
.noc-pulse .dot{width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(76,212,147,.2);animation:pulse 1.8s infinite}
.noc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.noc-metrics .m{display:flex;flex-direction:column;gap:3px}
.noc-metrics .k{font-size:10px;color:#6d7f9b;letter-spacing:.06em;text-transform:uppercase}
.noc-metrics .v{font-size:16px;color:#f1f5fb;font-weight:500;font-variant-numeric:tabular-nums}
.noc-subtitle{font-size:10px;color:#6d7f9b;letter-spacing:.08em;text-transform:uppercase;padding-top:12px;padding-bottom:8px}
.shift-list{display:grid;grid-template-columns:1fr;gap:8px}
.eng{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#070c18;border:1px solid #111a2e;border-radius:8px}
.eng .ava{width:28px;height:28px;border-radius:999px;background:color-mix(in oklch, var(--c) 30%, #0a0f1c);color:var(--c);display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0;font-family:var(--font-sans)}
.eng .meta{line-height:1.2;flex:1;min-width:0}
.eng .meta b{color:#e7ecf4;font-weight:500;font-size:12.5px;display:block;font-family:var(--font-sans)}
.eng .meta span{color:#6d7f9b;font-size:10.5px;letter-spacing:.02em;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-tag{font-size:9.5px;color:var(--ok);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-left:4px}
.noc-log{
background:#070c18;border:1px solid #111a2e;border-radius:8px;
padding:10px 12px;font-size:12.5px;line-height:1.7;color:#8ea0bc;
height:176px;overflow:hidden;position:relative;flex:1;
}
.noc-log .row{display:grid;grid-template-columns:56px auto 1fr;gap:10px;align-items:baseline;opacity:0;transform:translateY(6px);animation:logIn .45s ease forwards;padding:1px 0}
@keyframes logIn{to{opacity:1;transform:translateY(0)}}
.noc-log .t{color:#5a6b85;font-variant-numeric:tabular-nums;font-size:11.5px}
.noc-log .sev{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding:1px 7px;border-radius:4px;font-weight:600;justify-self:start;white-space:nowrap}
.noc-log .sev.g{background:rgba(76,212,147,.12);color:var(--ok)}
.noc-log .sev.i{background:rgba(110,167,223,.12);color:var(--blue-600)}
.noc-log .sev.w{background:rgba(255,194,92,.12);color:var(--warn)}
.noc-log .sev.p4{background:rgba(122,134,158,.14);color:#a8b7cf}
.noc-log .sev.fun{background:rgba(200,160,255,.14);color:#c8a0ff}
.noc-log .msg{color:#c1cbdc}
.noc-log .msg b{color:#f1f5fb;font-weight:500}
.pw-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:11px;color:#6d7f9b;letter-spacing:.04em;margin-top:14px;padding-top:12px;border-top:1px dashed #1d2740}
.pw-foot .cta{color:var(--blue-600)}
.pw-foot .cta:hover{text-decoration:underline}
@media (max-width:960px){
.noc-body{grid-template-columns:1fr;gap:18px}
.noc-col + .noc-col{border-left:0;border-top:1px dashed #1d2740;padding-left:0;padding-top:14px}
}
@media (max-width:720px){
.noc-metrics{grid-template-columns:repeat(3,1fr)}
}
/* ---------- HERO ---------- */
.e-hero{background:#fff;border-bottom:1px solid var(--line)}
.e-hero .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.e-hero .meta{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
padding:18px 0 14px;border-bottom:1px dashed var(--line);
font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;
}
.e-hero .meta .mid{color:var(--ink)}
.e-hero .meta .right{text-align:right}
.e-hero-main{
display:grid;grid-template-columns:1.35fr 1fr;gap:72px;padding:56px 0 48px;align-items:end;
}
.e-hero-main h1{
font-family:var(--font-sans);font-weight:300;font-size:clamp(46px,5.8vw,80px);
line-height:.98;letter-spacing:-.03em;margin:0;color:var(--ink);text-wrap:balance;
}
.e-hero-main h1 em{font-family:var(--display-serif);font-style:italic;font-weight:400;color:var(--blue-700)}
.e-hero-main h1 .num{font-family:var(--font-mono);font-weight:500;font-size:.48em;color:var(--mute);letter-spacing:-.01em;display:block;margin-top:22px}
.e-hero-lede{max-width:44ch}
.e-hero-lede p{font-size:19px;line-height:1.5;color:var(--ink-2);margin:0 0 22px;text-wrap:pretty}
.e-hero-lede .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
/* Proof pills row */
.e-hero-proof{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--line);
}
.e-hero-proof .cell{
padding:26px 28px 30px;border-right:1px solid var(--line);
}
.e-hero-proof .cell:last-child{border-right:0}
.e-hero-proof .cell .n{
font-family:var(--font-sans);font-weight:300;font-size:44px;line-height:1;
letter-spacing:-.025em;color:var(--ink);display:block;margin-bottom:8px;
}
.e-hero-proof .cell .n sup{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--blue-600);vertical-align:22px;margin-left:2px}
.e-hero-proof .cell .lbl{font-size:13px;color:var(--mute);line-height:1.5;text-wrap:pretty}
/* ---------- INDUSTRIES ---------- */
.e-industries{background:var(--bg);border-bottom:1px solid var(--line)}
.e-industries .container{max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.e-industries .head{
display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:48px;
}
.e-industries .head .left .kicker{font-family:var(--font-mono);font-size:11px;color:var(--blue-700);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.e-industries .head .left .kicker::before{content:"";width:18px;height:1px;background:var(--blue-700)}
.e-industries .head h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(34px,3.8vw,52px);
line-height:1.05;letter-spacing:-.025em;margin:14px 0 0;max-width:18ch;
}
.e-industries .head h2 em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.e-industries .head p{margin:0;color:var(--mute);font-size:16px;line-height:1.6;max-width:48ch}
.ind-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.ind-cell{
background:#fff;padding:32px 28px 28px;display:flex;flex-direction:column;gap:16px;
min-height:220px;transition:background 140ms;
}
.ind-cell:hover{background:var(--line-2)}
.ind-cell .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ind-cell .ic{
width:40px;height:40px;border-radius:10px;
background:var(--blue-50);color:var(--blue-700);
display:grid;place-items:center;flex-shrink:0;
}
.ind-cell .n{
font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.04em;padding-top:12px;
}
.ind-cell .n b{color:var(--ink);font-weight:500}
.ind-cell h3{font-family:var(--font-sans);font-size:21px;font-weight:500;margin:4px 0 0;letter-spacing:-.01em}
.ind-cell p{margin:0;color:var(--mute);font-size:14px;line-height:1.55;flex:1}
.ind-cell .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ind-cell .tags span{
font-family:var(--font-mono);font-size:11px;color:var(--mute);
padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;
}
/* ---------- CASES ---------- */
.e-cases{background:#fff;border-bottom:1px solid var(--line)}
.e-cases .container{max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.e-cases .head{
display:grid;grid-template-columns:220px 1fr auto;gap:40px;align-items:end;
padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:48px;
}
.e-cases .head aside{
font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}
.e-cases .head aside .sn{
font-family:var(--display-serif);font-style:italic;font-size:88px;line-height:.88;
color:var(--blue-700);display:block;margin-bottom:12px;letter-spacing:-.02em;font-weight:400;
}
.e-cases .head aside b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px}
.e-cases .head h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(30px,3.4vw,46px);
line-height:1.08;letter-spacing:-.025em;margin:0;max-width:22ch;
}
.e-cases .head h2 em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.e-cases .head .side-link{font-family:var(--font-mono);font-size:12px;color:var(--blue-700);white-space:nowrap}
.e-cases .head .side-link:hover{text-decoration:underline}
.cases-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.case{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:28px 28px 22px;display:flex;flex-direction:column;gap:18px;
transition:border-color 140ms,transform 180ms,box-shadow 180ms;position:relative;
}
.case:hover{border-color:var(--blue-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.case .head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.case .client{
display:flex;align-items:center;gap:10px;color:var(--mute);
}
.case .client .avatar{
width:34px;height:34px;border-radius:8px;
background:var(--blue-700);color:#fff;
display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;
letter-spacing:.02em;
}
.case .client .meta{line-height:1.25}
.case .client .meta b{font-family:var(--font-sans);color:var(--ink);font-size:14px;font-weight:500;display:block}
.case .client .meta span{font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.02em}
.case .badge{
font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.case .badge.urgent{background:#fdecec;color:var(--err)}
.case .badge.plan{background:var(--blue-50);color:var(--blue-700)}
.case .badge.long{background:var(--line-2);color:var(--mute)}
.case .title{
font-family:var(--font-sans);font-weight:500;font-size:20px;line-height:1.3;
letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:pretty;
}
.case .q-a{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.case .q-a .lbl{
font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
color:var(--mute);padding-top:4px;
}
.case .q-a .val{color:var(--ink-2);line-height:1.55}
.case .result{
margin-top:auto;padding:14px 16px;background:var(--bg);
border-radius:10px;border-left:3px solid var(--ok);
display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
}
.case .result .big{
font-family:var(--font-sans);font-weight:300;font-size:26px;letter-spacing:-.02em;color:var(--ink);line-height:1;
}
.case .result .big em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.case .result .sub{font-size:12px;color:var(--mute);line-height:1.45;margin-top:4px}
.case .result .arr{font-family:var(--font-mono);color:var(--ok);font-size:22px}
.archive-note{
margin-top:48px;padding:20px 24px;background:var(--bg);border:1px dashed var(--line);
border-radius:12px;font-family:var(--font-mono);font-size:13px;color:var(--mute);
display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.archive-note a{color:var(--blue-700);text-decoration:underline}
/* ---------- HOW WE WORK ---------- */
.e-how{background:var(--bg);border-bottom:1px solid var(--line)}
.e-how .container{max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.e-how .head{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:64px;align-items:end}
.e-how .head h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(30px,3.4vw,44px);
line-height:1.1;letter-spacing:-.025em;margin:14px 0 0;max-width:22ch;
}
.e-how .head h2 em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.e-how .head .kicker{font-family:var(--font-mono);font-size:11px;color:var(--blue-700);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.e-how .head .kicker::before{content:"";width:18px;height:1px;background:var(--blue-700)}
.e-how .head p{margin:0;color:var(--mute);font-size:16px;line-height:1.6;max-width:48ch}
.steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);
column-gap:1px;
}
.step{
background:#fff;padding:36px 28px 32px;display:flex;flex-direction:column;gap:12px;
position:relative;min-height:260px;
}
.step .n{
font-family:var(--display-serif);font-style:italic;font-weight:400;
font-size:64px;line-height:.9;color:var(--blue-700);letter-spacing:-.02em;
}
.step h3{font-family:var(--font-sans);font-weight:500;font-size:19px;margin:8px 0 4px;letter-spacing:-.005em}
.step p{margin:0;color:var(--mute);font-size:14px;line-height:1.6;flex:1}
.step .when{
font-family:var(--font-mono);font-size:11px;color:var(--ok);margin-top:auto;
letter-spacing:.04em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
}
.step .when::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ok)}
/* ---------- TESTIMONIALS ---------- */
.e-testi{background:#fff;border-bottom:1px solid var(--line)}
.e-testi .container{max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.e-testi .head{
display:grid;grid-template-columns:1fr auto;gap:32px;margin-bottom:48px;align-items:end;
padding-bottom:24px;border-bottom:1px solid var(--line);
}
.e-testi .head h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(30px,3.4vw,44px);
line-height:1.1;letter-spacing:-.025em;margin:0;max-width:22ch;
}
.e-testi .head h2 em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.e-testi .head a{font-family:var(--font-mono);font-size:12px;color:var(--blue-700)}
.e-testi .head a:hover{text-decoration:underline}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
display:flex;flex-direction:column;gap:20px;
}
.testi .quote-mark{
font-family:var(--display-serif);font-style:italic;font-weight:400;
color:var(--blue-700);font-size:72px;line-height:.6;margin-bottom:-8px;
}
.testi blockquote{
margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--ink-2);
text-wrap:pretty;flex:1;font-weight:400;
}
.testi blockquote em{font-family:var(--display-serif);font-style:italic;font-weight:400;color:var(--ink)}
.testi .who{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.testi .who .ava{
width:42px;height:42px;border-radius:999px;background:var(--blue-100);color:var(--blue-700);
display:grid;place-items:center;font-family:var(--font-sans);font-weight:500;font-size:14px;
}
.testi .who .info{line-height:1.3}
.testi .who .info b{font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--ink);display:block}
.testi .who .info span{font-size:12px;color:var(--mute)}
.testi .years{
font-family:var(--font-mono);font-size:11px;color:var(--mute);letter-spacing:.04em;
margin-left:auto;white-space:nowrap;
}
/* ---------- SERVICES (plain-language) ---------- */
.e-svc{background:var(--bg);border-bottom:1px solid var(--line)}
.e-svc .container{max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.e-svc .head{
display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;
padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:40px;
}
.e-svc .head h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(30px,3.4vw,44px);
line-height:1.1;letter-spacing:-.025em;margin:0;max-width:22ch;
}
.e-svc .head h2 em{font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400}
.e-svc .head a{font-family:var(--font-mono);font-size:12px;color:var(--blue-700)}
.e-svc .head a:hover{text-decoration:underline}
.svc-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.svc-cell{background:#fff;padding:28px 24px;display:flex;flex-direction:column;gap:10px;min-height:210px;transition:background 120ms}
.svc-cell:hover{background:var(--line-2)}
.svc-cell .k{
font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--blue-600);
}
.svc-cell h3{font-family:var(--font-sans);font-size:18px;font-weight:500;letter-spacing:-.01em;margin:2px 0;line-height:1.3}
.svc-cell p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.55;flex:1}
.svc-cell .price{
font-family:var(--font-mono);font-size:12px;color:var(--ink-2);margin-top:auto;
display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px dashed var(--line);
}
.svc-cell .price b{font-weight:500;color:var(--ink)}
.svc-cell .price .arr{color:var(--ink-2)}
/* ---------- CTA final ---------- */
.e-cta{background:var(--ink);color:#fff;padding:96px 0;background-image:linear-gradient(135deg,rgba(42,104,168,.15),rgba(11,18,32,.9)),linear-gradient(135deg,var(--ink-2),var(--ink))}
.e-cta .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.e-cta .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.e-cta h2{font-family:var(--font-sans);font-size:clamp(32px,4vw,56px);line-height:1;font-weight:300;letter-spacing:-.025em;margin:0 0 20px;color:#fff;text-wrap:balance}
.e-cta h2 em{font-family:var(--display-serif);font-style:italic;color:#7ab7f0;font-weight:400}
.e-cta p{color:#9fb3d1;max-width:46ch;font-size:16px;line-height:1.6;margin:0 0 28px}
.e-cta .phone-block{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:28px 32px;backdrop-filter:blur(8px)}
.e-cta .phone-block .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fb3d1;margin-bottom:10px}
.e-cta .phone-block .ph{font-family:var(--font-mono);font-size:32px;color:#fff;font-weight:500;letter-spacing:-.01em;margin-bottom:16px}
.e-cta .phone-block ul{margin:0;padding:0;list-style:none;color:#c8d1e0;font-size:14px;line-height:1.9;font-family:var(--font-mono)}
.e-cta .phone-block ul span{color:#6b7a94;margin-right:8px}
.e-cta .btns{display:flex;gap:10px;flex-wrap:wrap}
.e-cta .btn{padding:12px 22px}
.e-cta .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.e-cta .btn-primary:hover{background:#e6ecf5}
.e-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
.e-cta .btn-ghost:hover{border-color:#fff}
/* ---------- Responsive ---------- */
@media (max-width:900px){
.e-hero-main{grid-template-columns:1fr;gap:32px;padding:48px 0 32px}
.e-hero-proof{grid-template-columns:repeat(2,1fr)}
.e-hero-proof .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.e-hero-proof .cell:nth-child(2n){border-right:0}
.e-hero-proof .cell:nth-last-child(-n+2){border-bottom:0}
.ind-grid,.steps{grid-template-columns:repeat(2,1fr)}
.cases-grid,.testi-grid{grid-template-columns:1fr}
.e-industries .head,.e-how .head{grid-template-columns:1fr;gap:16px}
.e-cases .head{grid-template-columns:1fr;gap:16px}
.e-cases .head aside .sn{font-size:64px}
.svc-grid{grid-template-columns:repeat(2,1fr)}
.e-cta .grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:768px){
.e-hero .meta{grid-template-columns:1fr;gap:6px}
.e-hero .meta .right,.e-hero .meta .mid{text-align:left}
}
@media (max-width:640px){
.ind-grid,.steps,.svc-grid,.e-hero-proof{grid-template-columns:1fr}
.e-hero-proof .cell{border-right:0}
.e-hero-proof .cell:last-child{border-bottom:0}
}
/* ============ about.html ============ */
.page-head {
background: var(--ink); color: #fff; padding: 56px 0 48px;
position: relative; overflow: hidden;
}
.page-head::before {
content:""; position:absolute; inset:0;
background:
radial-gradient(700px 360px at 90% 120%, var(--blue-700) 0%, transparent 70%),
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: auto, 48px 48px, 48px 48px;
pointer-events:none;
}
.page-head-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.crumbs { font-family: var(--font-mono); font-size: 12px; color: #9fb3d1; display: flex; gap: 8px; margin-bottom: 20px; }
.crumbs a { color: var(--blue-300); }
.crumbs .sep { color: #3a4762; }
.page-head h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; margin: 0; }
.page-head h1 .bracket { color: var(--blue-300); }
.page-head-lead { max-width: 60ch; color: #9fb3d1; font-size: 20px; line-height: 1.5; margin: 28px 0 0; }
/* Principles */
.principles {
padding: 96px 0; border-bottom: 1px solid var(--line);
}
.principles-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.principles-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px;
}
.principle {
border: 1px solid var(--line); border-radius: 16px; padding: 32px;
background: var(--panel);
}
.principle .n {
font-family: var(--font-mono); color: var(--blue-600); font-size: 12px;
letter-spacing: 0.06em; margin-bottom: 18px;
}
.principle h3 { margin: 0 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.principle p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }
/* About page · principle cards (isolated to avoid clash with legacy .principle) */
.about-princ-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px;
}
.about-princ {
border: 1px solid var(--line); border-radius: 16px; padding: 32px;
background: var(--panel);
}
.about-princ .n {
font-family: var(--font-mono); color: var(--blue-600); font-size: 12px;
letter-spacing: 0.06em; margin-bottom: 18px;
}
.about-princ h3 { margin: 0 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.about-princ p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .about-princ-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .about-princ-grid { grid-template-columns: 1fr; } }
/* Numbers row */
.numbers {
background: var(--bg); padding: 72px 0;
border-bottom: 1px solid var(--line);
}
.numbers-inner {
max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.numbers-inner > div { background: var(--panel); padding: 32px; }
.numbers .bignum {
font-family: var(--font-display); font-size: 64px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
color: var(--ink);
}
.numbers .bignum small { font-size: 16px; color: var(--mute); font-family: var(--font-mono); font-weight: 400; margin-left: 4px; }
.numbers .k { font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 12px; }
/* Team */
.team { padding: 96px 0; border-bottom: 1px solid var(--line); }
.team-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.member {
border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden;
transition: border-color 150ms, transform 200ms;
}
.member:hover { border-color: var(--blue-300); transform: translateY(-2px); }
.member .photo {
aspect-ratio: 1/1;
background:
radial-gradient(circle at 50% 42%, rgba(255,255,255,0.5) 0%, transparent 30%),
linear-gradient(135deg, var(--blue-50), var(--blue-100));
position: relative;
display: grid; place-items: center;
color: var(--blue-700);
font-family: var(--font-display);
font-weight: 500;
font-size: 56px;
letter-spacing: -0.02em;
}
.member .photo::after {
content: "[photo]";
position: absolute; bottom: 10px; right: 12px;
font-family: var(--font-mono); font-size: 10px; color: var(--mute-2);
}
.member .info { padding: 20px; }
.member h4 { margin: 0 0 4px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.member .role { color: var(--mute); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.member .bio { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
/* Timeline */
.timeline { padding: 96px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.timeline-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.tl-list {
margin-top: 40px; border-left: 1px solid var(--line); padding-left: 0;
display: grid; gap: 0;
}
.tl-row {
display: grid; grid-template-columns: 120px 1fr; gap: 32px;
padding: 24px 0 24px 32px;
border-bottom: 1px solid var(--line);
position: relative;
}
.tl-row::before {
content: ""; position: absolute; left: -6px; top: 34px;
width: 11px; height: 11px; background: var(--blue-600);
border-radius: 999px; border: 2px solid var(--bg);
}
.tl-row .year {
font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2);
}
.tl-row h4 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.tl-row p { margin: 0; color: var(--mute); font-size: 14px; max-width: 60ch; }
@media (max-width: 900px) {
.principles-grid, .team-grid { grid-template-columns: 1fr 1fr; }
.numbers-inner { grid-template-columns: 1fr 1fr; }
.tl-row { grid-template-columns: 80px 1fr; gap: 16px; }
.tl-row .year { font-size: 22px; }
}
/* ----- Utilbar ----- */
/* ----- Header ----- */
/* ----- Buttons ----- */
/* ----- Universal page head (about, services, contacts, reviews, news, archive) ----- */
/* Meta bar above page title (mono uppercase) */
/* ----- Section rhythm ----- */
/* Anything with neutral white panel bg repaints to dark panel */
/* Timeline & other lists commonly styled off --line */
/* Services cells / cases / testimonials — common patterns */
/* Grid wrappers that use --line as gap color */
/* Hair rules & dividers */
/* Section kickers & section heads */
/* ----- Footer ----- */
/* ----- Forms ----- */
/* ----- Misc text ----- */
/* ----- Tags / pills used across pages ----- */
/* ----- Archive rows ----- */
/* ----- Dark CTA blocks that used var(--ink) as background ----- */
/* services.html final pricing strip — переводим в светло-синий панельный вид
(не «чёрный кусок» перед футером, а выраженный акцент) */
/* about.html final CTA */
/* reviews.html CTA band — синий градиент остаётся, чиним только текст
(в светлой теме --blue-700/900 были тёмно-синие, в тёмной — светло-голубые,
поэтому фиксируем явными значениями) */
/* Any other CTA / dark-block pattern commonly seen across pages */
.e-cta-final{
background:#0b1220;
color:#fff; padding:96px 0; position:relative; overflow:hidden;
background-image:
linear-gradient(135deg, rgba(42,104,168,.15), rgba(11,18,32,.9)),
linear-gradient(135deg, #1a2337, #0b1220);
border-top:1px solid #1c2538;
}
.e-cta-final .container{max-width:var(--maxw, 1280px); margin:0 auto; padding:0 24px}
.e-cta-final .grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.e-cta-final h2{
font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
font-size: clamp(32px, 4vw, 56px); line-height:1;
font-weight:300; letter-spacing:-.025em;
margin:0 0 20px; color:#fff; text-wrap:balance;
}
.e-cta-final h2 em{
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic; color:#7ab7f0; font-weight:400;
}
.e-cta-final p{ color:#9fb3d1; max-width:46ch; font-size:16px; line-height:1.6; margin:0 0 28px }
.e-cta-final .phone-block{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:12px; padding:28px 32px;
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.e-cta-final .phone-block .label{
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size:11px; letter-spacing:.06em; text-transform:uppercase;
color:#9fb3d1; margin-bottom:10px;
}
.e-cta-final .phone-block .ph{
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size:32px; color:#fff; font-weight:500;
letter-spacing:-.01em; margin-bottom:16px;
}
.e-cta-final .phone-block ul{
margin:0; padding:0; list-style:none;
color:#c8d1e0; font-size:14px; line-height:1.9;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.e-cta-final .phone-block ul span{ color:#6b7a94; margin-right:8px }
.e-cta-final .btns{ display:flex; gap:10px; flex-wrap:wrap }
.e-cta-final .btn{
display:inline-flex; align-items:center; gap:8px;
padding:12px 22px; border-radius:8px;
font-weight:500; font-size:14px;
border:1px solid transparent; text-decoration:none;
transition: all .15s ease;
}
.e-cta-final .btn-primary{ background:#fff; color:#0b1220; border-color:#fff }
.e-cta-final .btn-primary:hover{ background:#e6ecf5 }
.e-cta-final .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.2) }
.e-cta-final .btn-ghost:hover{ border-color:#fff }
@media (max-width: 900px){
.e-cta-final .grid{ grid-template-columns:1fr; gap:40px }
}
/* ============ services.html ============ */
/* Page header */
.page-head {
background: var(--ink);
color: #fff;
padding: 56px 0 48px;
position: relative; overflow: hidden;
}
.page-head::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(700px 360px at 90% 120%, var(--blue-700) 0%, transparent 70%),
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: auto, 48px 48px, 48px 48px;
pointer-events: none;
}
.page-head--services .page-head-inner {
position: relative;
max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start;
}
.page-head--services .page-head-inner > div:first-child { min-width: 0; }
.crumbs {
font-family: var(--font-mono); font-size: 12px; color: #9fb3d1;
display: flex; gap: 8px; align-items: center; margin-bottom: 20px;
}
.page-head p {
max-width: 54ch; color: #9fb3d1; font-size: 17px; line-height: 1.5;
margin: 24px 0 0;
}
.page-head .meta-chip {
border: 1px solid rgba(255,255,255,0.15);
padding: 14px 20px; border-radius: 12px;
font-family: var(--font-mono); font-size: 12px; color: #9fb3d1;
display: grid; gap: 4px;
}
.page-head .meta-chip b { color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
/* Category navigation rail */
.cat-nav {
background: var(--panel);
border-bottom: 1px solid var(--line);
position: sticky; top: 60px; z-index: 20;
}
.cat-nav-inner {
max-width: var(--maxw); margin: 0 auto; padding: 16px 24px;
display: flex; gap: 8px; overflow-x: auto;
font-family: var(--font-mono); font-size: 12px;
}
.cat-nav a {
padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
white-space: nowrap; color: var(--ink-2); letter-spacing: 0.04em;
}
.cat-nav a:hover { border-color: var(--ink); }
/* Categories */
.cat {
padding: 72px 0;
border-bottom: 1px solid var(--line);
}
.cat-inner {
max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: 380px 1fr; gap: 64px;
}
.cat-lead { position: sticky; top: 140px; align-self: start; }
.cat-lead .num {
font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: 0.06em;
}
.cat-lead h2 {
font-size: 44px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05;
margin: 14px 0 16px;
}
.cat-lead p { color: var(--mute); font-size: 15px; margin: 0; max-width: 36ch; }
.cat-lead .mono-tag { margin-top: 20px; display: inline-block; }
.cat-items { display: grid; gap: 14px; }
.cat-item {
display: grid; grid-template-columns: 1fr auto; gap: 24px;
padding: 24px;
border: 1px solid var(--line); border-radius: 12px;
background: var(--panel);
transition: border-color 150ms, transform 200ms;
}
.cat-item:hover { border-color: var(--blue-300); transform: translateY(-2px); }
.cat-item h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.01em; }
.cat-item p { margin: 0 0 12px; color: var(--mute); font-size: 14px; line-height: 1.5; max-width: 58ch; }
.cat-item .row {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 8px;
}
.cat-item .price {
font-family: var(--font-mono); font-size: 12px; color: var(--blue-700);
padding: 4px 10px; border: 1px solid var(--blue-100); border-radius: 999px;
background: var(--blue-50);
}
.cat-item .arrow {
align-self: start;
width: 40px; height: 40px; border-radius: 999px;
border: 1px solid var(--line);
display: grid; place-items: center;
font-family: var(--font-mono);
}
.cat-item:hover .arrow { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
/* Process timeline */
.process {
background: var(--bg); padding: 96px 0;
}
.process-inner {
max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.process-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px;
}
.step {
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
padding: 24px; position: relative;
}
.step .n {
font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); letter-spacing: 0.06em;
display: flex; justify-content: space-between; margin-bottom: 16px;
}
.step h4 { margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
/* Final pricing strip */
.svc-price-strip {
background: var(--ink); color: #fff;
padding: 60px 0;
}
.svc-price-strip-inner {
max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center;
}
.svc-price-strip h3 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.svc-price-strip .pchip {
font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
padding: 16px 24px; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px;
}
.svc-price-strip .pchip small { display:block; font-family: var(--font-mono); font-size: 11px; color: #9fb3d1; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; margin-top: 4px; }
@media (max-width: 900px) {
.cat-inner { grid-template-columns: 1fr; gap: 32px; }
.cat-lead { position: static; }
.process-steps { grid-template-columns: 1fr 1fr; }
.svc-price-strip-inner { grid-template-columns: 1fr; }
.page-head--services .page-head-inner { grid-template-columns: 1fr; }
}
/* ============ contacts.html ============ */
.page-head { background: var(--ink); color:#fff; padding: 56px 0 48px; position: relative; overflow: hidden; }
.page-head-inner { position:relative; max-width: var(--maxw); margin:0 auto; padding: 0 24px; }
.page-head h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; margin:0; }
.page-head p { max-width: 56ch; color: #9fb3d1; font-size: 19px; line-height: 1.5; margin: 24px 0 0; }
.contact-grid {
max-width: var(--maxw); margin: -56px auto 0; padding: 0 24px 96px;
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
align-items: start;
position: relative;
}
.form-card {
background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 40px;
box-shadow: var(--shadow-md);
}
.form-card h2 { font-size: 32px; margin: 0 0 8px; font-weight: 500; letter-spacing: -0.02em; }
.form-card .lead { color: var(--mute); font-size: 14px; margin: 0 0 28px; max-width: 44ch; }
.form-row { display: grid; gap: 14px; }
.form-row .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field {
display: grid; gap: 6px;
}
.field label { font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field textarea, .field select {
font: inherit;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
background: var(--panel-2); color: var(--ink);
transition: border-color 150ms, background 150ms;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--blue-500); background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.pickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pickers label {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 10px;
font-size: 13px; cursor: pointer; transition: border-color 150ms, background 150ms;
}
.pickers label:hover { border-color: var(--blue-300); }
.pickers input { accent-color: var(--blue-600); }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.form-actions small { color: var(--mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.form-actions .btn-primary { padding: 14px 22px; font-size: 15px; }
/* Validation errors */
.field-err { display:none; font-family: var(--font-mono); font-size:11px; color: var(--err); letter-spacing:.03em; }
.field.is-invalid .field-err { display:block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--err); background:#fff6f6; }
/* Submit status */
.form-status { margin-top:16px; padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.5; display:none; }
.form-status.is-pending { display:block; background:var(--panel-2); border:1px solid var(--line); color:var(--mute); font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; }
.form-status.is-ok { display:block; background:#eafaf2; border:1px solid #b8e6cf; color:#176a42; }
.form-status.is-ok b { display:block; font-size:15px; margin-bottom:4px; color:#0f4f32; }
.form-status.is-err { display:block; background:#fdecec; border:1px solid #f4bdbd; color:#8a2323; }
.info-stack { display: grid; gap: 16px; align-content: start; }
.info-card {
background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
}
.info-card h3 {
margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; color: var(--mute);
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.info-card .row {
display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 10px 0;
border-top: 1px dashed var(--line);
font-size: 14px;
}
.info-card .row:first-of-type { border-top: none; padding-top: 0; }
.info-card .row b { font-family: var(--font-mono); color: var(--mute); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.info-card .big {
font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em;
margin: 4px 0 0;
}
.info-card .big small { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--mute); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.info-dark {
background: #0b1220; color: #fff;
border: 1px solid #1d2a42;
}
.info-dark h3 { color: #cbd9ef; }
.info-dark .big { color: #fff; }
.info-dark .big small { color: #9fb3d1; }
.info-dark .row { border-color: #2a3a5a; color: #fff; }
.info-dark .row b { color: #9fb3d1; }
.info-dark .row span { color: #fff; }
.office-card .map {
aspect-ratio: 16/9;
background:
linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
repeating-linear-gradient(45deg, var(--blue-100) 0 8px, var(--blue-50) 8px 16px);
border-radius: 10px;
border: 1px solid var(--line);
position: relative;
display: grid; place-items: center;
margin-bottom: 16px;
overflow: hidden;
}
.office-card .map::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(58,126,191,0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(58,126,191,0.15) 1px, transparent 1px);
background-size: 40px 40px;
}
.office-card .map::after {
content: "◉"; position: relative; color: var(--blue-700); font-size: 28px;
text-shadow: 0 4px 12px rgba(58,126,191,0.4);
}
.office-card .map .tag {
position: absolute; top: 10px; left: 10px;
font-family: var(--font-mono); font-size: 10px; color: var(--mute);
background: rgba(255,255,255,0.9); padding: 3px 8px; border-radius: 999px;
border: 1px solid var(--line);
}
@media (max-width: 1000px) {
.contact-grid { grid-template-columns: 1fr; }
.form-card { padding: 28px; }
.form-row .pair { grid-template-columns: 1fr; }
.pickers { grid-template-columns: 1fr; }
}
/* ============ reviews.html ============ */
.page-head { background: var(--ink); color:#fff; padding: 56px 0 48px; position: relative; overflow: hidden; }
.contact-grid {
max-width: var(--maxw); margin: -56px auto 0; padding: 0 24px 96px;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px;
position: relative;
}
/* ============ Reviews page ============ */
.reviews-head { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 24px; }
.reviews-head .tag { font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); letter-spacing: .14em; text-transform: uppercase; }
.reviews-head h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 10px 0 14px; font-weight: 600; }
.reviews-head .lede { max-width: 680px; color: var(--mute); font-size: 17px; line-height: 1.55; }
.reviews-stats { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.stat-card .k { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; }
.stat-card .v { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; line-height: 1; }
.stat-card .s { color: var(--mute); font-size: 13px; margin-top: 6px; }
.stat-card .bar { margin-top: 14px; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.stat-card .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); }
/* rating distribution */
.rating-block { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px 40px; display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.rating-summary { background: var(--ink); color: #e7edf8; border-radius: var(--r-lg); padding: 28px; position: relative; overflow: hidden; }
.rating-summary::before {
content: ''; position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 28px 28px; pointer-events: none;
}
.rating-summary > * { position: relative; }
.rating-big { font-family: var(--font-display); font-size: 72px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.rating-big .out { color: #6a7b99; font-size: 28px; font-weight: 500; }
.rating-stars { color: #f0a020; font-size: 20px; letter-spacing: 2px; margin: 8px 0 4px; }
.rating-sub { color: #9fb3d1; font-size: 13px; font-family: var(--font-mono); }
.rating-meta { margin-top: 24px; padding-top: 20px; border-top: 1px solid #2b374e; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rating-meta .rm-k { color: #9fb3d1; font-size: 12px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.rating-meta .rm-v { font-size: 18px; font-weight: 500; margin-top: 4px; color: #fff; }
.rating-bars { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.rating-bars h3 { margin: 0 0 18px; font-size: 14px; font-family: var(--font-mono); font-weight: 500; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; }
.rbar { display: grid; grid-template-columns: 70px 1fr 48px; gap: 14px; align-items: center; margin-bottom: 10px; }
.rbar .lbl { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.rbar .tr { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.rbar .tr > span { display: block; height: 100%; background: var(--blue-500); border-radius: 4px; }
.rbar .pct { font-family: var(--font-mono); font-size: 13px; color: var(--mute); text-align: right; }
/* filters */
.rev-filters { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rev-filters .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .15s; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:1; min-width: 32px; }
.chip:hover { border-color: var(--blue-500); color: var(--blue-600); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); cursor: default; }
.news-pager .chip.dots { border:0; background:transparent; padding:6px 4px; cursor:default; }
/* reviews grid (masonry-ish) */
.reviews-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 64px; columns: 3 340px; column-gap: 18px; }
.review { break-inside: avoid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; position: relative; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar { width: 42px; height: 42px; border-radius: 8px; background: var(--blue-700); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--font-display); font-size: 16px; flex-shrink: 0; }
.review-meta .who { font-weight: 500; color: var(--ink); font-size: 14px; }
.review-meta .where { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .04em; margin-top: 2px; }
.review-stars { color: #f0a020; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; }
.review-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.review-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; }
.review-foot .svc { color: var(--blue-600); }
.review-quote-mark { position: absolute; top: 16px; right: 16px; color: var(--line); font-family: Georgia, serif; font-size: 48px; line-height: 0.8; font-weight: 700; }
.cta-band { max-width: var(--maxw); margin: 0 auto 64px; padding: 0 24px; }
.cta-inner { background: linear-gradient(135deg, var(--blue-700), var(--blue-900)); color: #fff; border-radius: var(--r-lg); padding: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.cta-inner h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.cta-inner p { color: #c8d7ec; margin: 0; }
.cta-inner .btn { background: #fff; color: var(--blue-900); padding: 14px 24px; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
/* ============ News page ============ */
.news-head { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 24px; }
.news-head .tag { font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); letter-spacing: .14em; text-transform: uppercase; }
.news-head h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 10px 0 14px; font-weight: 600; }
.news-head .lede { max-width: 680px; color: var(--mute); font-size: 17px; line-height: 1.55; }
.feed-layout { max-width: var(--maxw); margin: 0 auto; padding: 24px 24px 64px; display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.feed h2 { margin: 28px 0 14px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.feed h2:first-child { margin-top: 0; }
/* hero news */
.feed-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
/* .feed-hero-img + .ornament — old gradient/grid block intentionally removed.
The actual cover styles live further down (".feed-hero-img" near line ~2680):
they use the SVG grid baked into si_news_cover_svg() and a solid
#0e1b2c background. The old ::before drew a second 32px CSS grid on top of
the SVG's 40px grid → muаре/полосы в Firefox. Badge styling now lives in the
later block too. */
.feed-hero-img .badge {
background: rgba(0,0,0,0.3); color: #fff; font-family: var(--font-mono);
font-size: 11px; padding: 6px 10px; border-radius: 4px; letter-spacing: .12em; text-transform: uppercase;
backdrop-filter: blur(8px);
}
.feed-hero-body { padding: 28px 32px 32px; }
.feed-hero-body .date { font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: .06em; margin-bottom: 10px; }
.feed-hero-body h3 { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.15; }
.feed-hero-body p { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; max-width: 640px; }
.feed-hero-body .read { color: var(--blue-600); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
/* news list */
.news-item { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: background .15s; }
.news-item:hover { background: var(--panel-2); padding-left: 16px; padding-right: 16px; border-radius: var(--r); border-bottom-color: transparent; }
.news-item:last-child { border-bottom: 0; }
.news-date { font-family: var(--font-mono); }
.news-date .day { font-size: 32px; font-weight: 500; color: var(--ink); line-height: 1; }
.news-date .mo { font-size: 11px; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.news-body h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.005em; }
.news-body p { color: var(--mute); margin: 0 0 8px; font-size: 14px; }
.news-body .ntag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); }
/* sidebar */
.side-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.side-card h4 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud a { background: var(--line-2); color: var(--ink-2); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: var(--font-mono); transition: all .15s; }
.tag-cloud a:hover { background: var(--ink); color: #fff; }
.article-item { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.article-item:last-child { border-bottom: 0; padding-bottom: 0; }
.article-item .t { font-size: 14px; color: var(--ink); line-height: 1.4; font-weight: 500; }
.article-item .d { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 4px; letter-spacing: .06em; }
.subscribe-card { background: var(--ink); color: #e7edf8; }
.subscribe-card h4 { color: #9fb3d1; }
.subscribe-card p { color: #9fb3d1; font-size: 13px; margin: 0 0 12px; }
.subscribe-card .sub-field { display: flex; gap: 6px; }
.subscribe-card input { flex: 1; background: #1a2337; border: 1px solid #2b374e; color: #fff; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; }
.subscribe-card input::placeholder { color: #6a7b99; }
.subscribe-card button { background: var(--blue-500); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; }
@media (max-width: 1000px) {
.reviews-stats { grid-template-columns: repeat(2, 1fr); }
.rating-block { grid-template-columns: 1fr; }
.feed-layout { grid-template-columns: 1fr; }
.cta-inner { grid-template-columns: 1fr; }
}
/* ============ news.html ============ */
.page-head { background: var(--ink); color:#fff; padding: 56px 0 48px; position: relative; overflow: hidden; }
/* ============ archive.html ============ */
/* ================ PAGE-SPECIFIC ================ */
/* Page-scoped display serif for editorial accents */
.page-e { --display-serif: 'Instrument Serif', Georgia, serif; }
/* --- HERO: the archive --- */
.archive-hero {
border-bottom: 1px solid var(--line);
background: #fff;
}
.archive-hero .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.hero-meta {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 18px 0 14px;
border-bottom: 1px dashed var(--line);
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hero-meta .mid { color: var(--ink); }
.hero-meta .right { text-align: right; }
.hero-top {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 72px;
padding: 56px 0 32px;
align-items: end;
}
.hero-top h1 {
font-family: var(--font-sans);
font-weight: 300;
font-size: clamp(44px, 5.6vw, 76px);
line-height: 0.98;
letter-spacing: -0.03em;
margin: 0;
color: var(--ink);
}
.hero-top h1 em {
font-family: var(--display-serif);
font-style: italic;
font-weight: 400;
color: var(--blue-700);
}
.hero-top h1 .num {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.75em;
color: var(--blue-600);
vertical-align: 0.08em;
letter-spacing: -0.01em;
}
.hero-lede { max-width: 44ch; }
.hero-lede p {
font-size: 18px;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 20px;
}
.hero-lede .lede-mono {
font-family: var(--font-mono);
font-size: 12px;
color: var(--mute);
letter-spacing: 0.02em;
line-height: 1.6;
border-left: 2px solid var(--blue-500);
padding-left: 14px;
margin: 0 0 24px;
}
.hero-lede .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
/* --- Controls bar --- */
.log-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
color: var(--mute);
gap: 16px;
flex-wrap: wrap;
}
.log-controls .filters { display: flex; gap: 4px; align-items: center; }
.log-controls button.filter {
appearance: none;
border: 1px solid var(--line);
background: var(--panel);
color: var(--mute);
padding: 6px 12px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 120ms;
}
.log-controls button.filter:hover { border-color: var(--ink-2); color: var(--ink); }
.log-controls button.filter.active {
background: var(--ink); color: #fff; border-color: var(--ink);
}
.log-controls .search {
display: flex; align-items: center; gap: 8px;
border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
background: #fff;
}
.log-controls .search input {
border: 0; outline: 0; font-family: var(--font-mono); font-size: 12px;
color: var(--ink); background: transparent; min-width: 180px;
}
.log-controls .search input::placeholder { color: var(--mute-2); }
.log-controls .counter { color: var(--ink); }
.log-controls .counter b { font-weight: 500; }
/* --- The log table --- */
.log-wrap { padding: 0 0 80px; background: #fff; }
.log-row {
display: grid;
grid-template-columns: 128px 72px 88px 1fr 170px 96px;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 13px;
align-items: start;
cursor: pointer;
transition: background 120ms;
position: relative;
}
.log-row:hover { background: var(--line-2); }
.log-row.expanded { background: var(--line-2); }
.log-row .cell-time {
color: var(--mute);
font-size: 11px;
letter-spacing: 0.02em;
padding-top: 2px;
line-height: 1.4;
}
.log-row .cell-time b { display: block; color: var(--ink); font-weight: 500; font-size: 12px; margin-bottom: 2px; }
.log-row .cell-tag {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 4px;
justify-self: start;
margin-top: 2px;
font-weight: 500;
}
.tag-sev.p1 { background: #fdecec; color: var(--err); }
.tag-sev.p2 { background: #fdf3e0; color: #b47505; }
.tag-sev.p3 { background: var(--blue-50); color: var(--blue-700); }
.tag-sev.p4 { background: var(--line-2); color: var(--mute); }
.log-row .cell-cat {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mute);
padding-top: 4px;
}
.log-row .cell-title { padding-top: 1px; }
.log-row .cell-title .sym {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.4;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.005em;
}
.log-row .cell-title .sym .client {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mute);
margin-right: 8px;
padding: 1px 6px;
background: var(--line-2);
border-radius: 3px;
letter-spacing: 0.03em;
vertical-align: 1px;
}
.log-row .cell-stack { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.log-row .cell-stack span {
font-size: 10px;
color: var(--mute);
border: 1px solid var(--line);
padding: 2px 7px;
border-radius: 3px;
letter-spacing: 0.02em;
background: #fff;
white-space: nowrap;
}
.log-row .cell-resp {
text-align: right;
padding-top: 4px;
color: var(--mute);
font-size: 11px;
letter-spacing: 0.02em;
}
.log-row .cell-resp b { color: var(--ok); font-weight: 500; display: block; font-size: 13px; margin-bottom: 2px; }
.log-row .cell-resp b.over { color: var(--warn); }
/* Expanded detail */
.log-detail {
grid-column: 1 / -1;
padding: 14px 0 8px 220px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
border-top: 1px dashed var(--line);
margin-top: 18px;
animation: detailIn 240ms ease;
}
@keyframes detailIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.log-detail h5 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mute);
margin: 0 0 8px;
font-weight: 500;
}
.log-detail .narr {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 14px;
}
.log-detail .fix-steps {
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
color: var(--ink-2);
counter-reset: step;
}
.log-detail .fix-steps li {
padding-left: 28px;
position: relative;
margin-bottom: 6px;
counter-increment: step;
}
.log-detail .fix-steps li::before {
content: counter(step, decimal-leading-zero);
position: absolute; left: 0; top: 0;
color: var(--blue-600);
font-weight: 500;
}
.log-detail .outcome {
background: var(--ink);
color: #d5e0f0;
border-radius: 6px;
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
margin-top: 12px;
}
.log-detail .outcome b { color: var(--ok); font-weight: 500; }
.log-footer {
padding: 28px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
color: var(--mute);
flex-wrap: wrap;
gap: 16px;
}
.log-footer a { color: var(--blue-700); }
.log-footer a:hover { text-decoration: underline; }
/* --- "Who we are" editorial section --- */
.whoweare {
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.whoweare .container { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px; }
.whoweare .grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 64px;
}
.whoweare aside {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mute);
}
.whoweare aside .section-num {
font-family: var(--display-serif);
font-style: italic;
font-size: 72px;
line-height: 0.9;
color: var(--blue-700);
display: block;
margin-bottom: 16px;
letter-spacing: -0.02em;
font-weight: 400;
}
.whoweare aside .sect-label { display: block; margin-bottom: 2px; color: var(--ink); }
.whoweare aside .sect-sub { display: block; letter-spacing: 0.02em; text-transform: none; color: var(--mute); font-family: var(--font-sans); font-size: 13px; margin-top: 8px; line-height: 1.5; }
.whoweare article h2 {
font-family: var(--font-sans);
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 300;
margin: 0 0 24px;
max-width: 22ch;
color: var(--ink);
}
.whoweare article h2 em { font-family: var(--display-serif); font-style: italic; color: var(--blue-700); font-weight: 400; }
.whoweare article .lead {
font-size: 18px; line-height: 1.55; max-width: 62ch; color: var(--ink-2);
margin: 0 0 36px;
}
.principle-list { display: grid; gap: 28px; margin-top: 32px; }
.principle {
display: grid;
grid-template-columns: 36px 1fr;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.principle .num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--blue-600);
padding-top: 3px;
letter-spacing: 0.04em;
}
.principle h3 {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.principle p {
margin: 0;
color: var(--mute);
font-size: 15px;
line-height: 1.6;
max-width: 58ch;
}
/* --- Proof strip: numbers ticker --- */
.proof-strip {
background: var(--ink);
color: #c8d1e0;
overflow: hidden;
position: relative;
}
.proof-strip .track {
display: flex;
gap: 64px;
padding: 24px 0;
white-space: nowrap;
animation: tickerE 60s linear infinite;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.02em;
width: max-content;
}
.proof-strip .item { display: inline-flex; align-items: center; gap: 12px; }
.proof-strip .item .n { color: #fff; font-weight: 500; font-size: 15px; }
.proof-strip .item .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--blue-500); }
@keyframes tickerE {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* --- Now-on-duty rotation --- */
.onduty {
background: #fff;
border-bottom: 1px solid var(--line);
}
.onduty .container { max-width: var(--maxw); margin: 0 auto; padding: 72px 24px; }
.onduty .grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 72px;
align-items: center;
}
.onduty .left h2 {
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 300;
margin: 12px 0 16px;
max-width: 20ch;
}
.onduty .left h2 em { font-family: var(--display-serif); font-style: italic; color: var(--blue-700); }
.onduty .left p {
color: var(--mute); font-size: 15px; line-height: 1.65; max-width: 44ch; margin: 0 0 24px;
}
.onduty .left .live {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ok);
display: inline-flex; align-items: center; gap: 8px;
}
.onduty .left .live::before {
content: ""; width: 8px; height: 8px; border-radius: 999px;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(43,182,115,0.2);
animation: pulse 2s infinite;
}
.shift-board {
background: var(--ink);
border-radius: 14px;
padding: 24px;
color: #d5e0f0;
font-family: var(--font-mono);
font-size: 12px;
box-shadow: var(--shadow-lg);
}
.shift-board .sb-head {
display: flex;
justify-content: space-between;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid #1f2a40;
color: #9fb3d1;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.shift-board .sb-head b { color: #fff; font-weight: 500; }
.shift-board .eng-row {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid #1a2337;
align-items: center;
}
.shift-board .eng-row:last-child { border-bottom: 0; }
.shift-board .eng-row .name { color: #fff; }
.shift-board .eng-row .task { color: #9fb3d1; font-size: 11px; }
.shift-board .eng-row .status {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.shift-board .eng-row .status.active { color: var(--ok); }
.shift-board .eng-row .status.idle { color: #5b6a82; }
.shift-board .eng-row .status.standby { color: #d9c448; }
/* --- Services preview grid --- */
.services-preview {
background: var(--bg);
}
.services-preview .container { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px; }
.services-preview .head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.services-preview .head h2 {
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 300;
margin: 0;
max-width: 22ch;
}
.services-preview .head h2 em { font-family: var(--display-serif); font-style: italic; color: var(--blue-700); }
.services-preview .head .link {
font-family: var(--font-mono);
font-size: 12px;
color: var(--blue-700);
letter-spacing: 0.02em;
white-space: nowrap;
}
.services-preview .head .link:hover { text-decoration: underline; }
.svc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.svc-cell {
background: #fff;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 200px;
transition: background 120ms;
position: relative;
}
.svc-cell:hover { background: var(--line-2); }
.svc-cell .code {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--blue-600);
}
.svc-cell h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.25;
}
.svc-cell p {
margin: 0;
font-size: 13px;
color: var(--mute);
line-height: 1.55;
flex: 1;
}
.svc-cell .arr {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-2);
letter-spacing: 0.02em;
margin-top: auto;
}
/* --- CTA contact --- */
.cta-final {
background: var(--ink);
color: #fff;
padding: 96px 0;
background-image:
linear-gradient(135deg, rgba(42,104,168,0.15), rgba(11,18,32,0.9)),
linear-gradient(135deg, var(--ink-2), var(--ink));
}
.cta-final .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.cta-final .grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.cta-final h2 {
font-family: var(--font-sans);
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.025em;
margin: 0 0 20px;
color: #fff;
}
.cta-final h2 em { font-family: var(--display-serif); font-style: italic; color: #7ab7f0; }
.cta-final p {
color: #9fb3d1; max-width: 46ch; font-size: 16px; line-height: 1.6; margin: 0 0 28px;
}
.cta-final .phone-block {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 28px 32px;
backdrop-filter: blur(8px);
}
.cta-final .phone-block .label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: #9fb3d1; margin-bottom: 10px;
}
.cta-final .phone-block .ph {
font-family: var(--font-mono);
font-size: 32px;
color: #fff;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 16px;
}
.cta-final .phone-block ul { margin: 0; padding: 0; list-style: none; color: #c8d1e0; font-size: 14px; line-height: 1.9; font-family: var(--font-mono); }
.cta-final .phone-block ul span { color: #6b7a94; margin-right: 8px; }
.cta-final .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-final .btn { padding: 12px 22px; }
.cta-final .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta-final .btn-primary:hover { background: #e6ecf5; }
.cta-final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.2); }
.cta-final .btn-ghost:hover { border-color: #fff; }
@media (max-width: 1024px) {
.hero-top { grid-template-columns: 1fr; gap: 32px; }
.log-row { grid-template-columns: 100px 60px 1fr 80px; font-size: 12px; gap: 12px; }
.log-row .cell-cat, .log-row .cell-stack { display: none; }
.log-detail { padding-left: 0; grid-template-columns: 1fr; gap: 20px; }
.whoweare .grid { grid-template-columns: 1fr; gap: 32px; }
.onduty .grid, .cta-final .grid { grid-template-columns: 1fr; gap: 40px; }
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.hero-meta { grid-template-columns: 1fr; gap: 6px; }
.hero-meta .right, .hero-meta .mid { text-align: left; }
}
@media (max-width: 600px) {
.svc-grid { grid-template-columns: 1fr; }
}
/* ============ Single news article ============ */
.page-head--article { padding: 48px 0 56px; }
.page-head--article .crumbs{
display:flex; flex-wrap:wrap; gap:8px; align-items:center;
font-family: var(--font-sans); font-size: 13px;
color:#8ea0bc; letter-spacing: 0;
margin-bottom: 28px;
}
.page-head--article .crumbs a{ color: var(--blue-300); }
.page-head--article .crumbs a:hover{ color:#fff; }
.page-head--article .crumbs .sep{ color:#3a4762; }
.page-head--article .crumbs span:last-child{
color:#c8d1e0;
font-family: var(--font-sans); font-size: 13px;
}
.article-kicker{
display:inline-block;
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
color: var(--blue-300); letter-spacing: 0;
padding: 4px 12px; border:1px solid rgba(122,168,214,.3); border-radius: 4px;
margin-bottom: 18px;
}
.page-head--article h1.article-title{
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.01em;
margin: 0;
max-width: 22ch;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-wrap: balance;
}
.article-meta{
margin-top: 20px;
font-family: var(--font-mono); font-size: 12px; color: #8ea0bc;
letter-spacing: .04em;
}
.article-meta .article-date{ color:#c8d1e0; }
.article-body{
max-width: 780px;
margin: 0 auto;
padding: 48px 24px 64px;
}
.article-col > *{ margin: 0 0 20px; }
.article-col p{
font-size: 17px; line-height: 1.7; color: var(--ink-2);
text-wrap: pretty;
}
.article-col p:first-child{ font-size: 19px; color: var(--ink); }
.article-col h2{
font-family: var(--font-display); font-size: 26px; font-weight: 600;
letter-spacing:-0.01em; margin: 40px 0 14px; color: var(--ink);
}
.article-col h3{
font-family: var(--font-display); font-size: 20px; font-weight: 600;
margin: 32px 0 10px; color: var(--ink);
}
.article-col ul, .article-col ol{ padding-left: 22px; }
.article-col ul li, .article-col ol li{
font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 6px 0;
}
.article-col a{ color: var(--blue-600); border-bottom: 1px solid rgba(42,104,168,.3); }
.article-col a:hover{ border-bottom-color: var(--blue-600); }
.article-col code{
font-family: var(--font-mono); font-size: 13px;
background: var(--line-2); padding: 2px 6px; border-radius: 4px;
}
.article-col pre{
background: var(--ink); color: #e7edf8;
font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
padding: 18px 20px; border-radius: 8px; overflow-x: auto;
}
.article-col pre code{ background: transparent; padding: 0; color: inherit; }
.article-col blockquote{
border-left: 3px solid var(--blue-500);
padding: 4px 0 4px 20px; color: var(--mute); font-style: italic; margin: 24px 0;
}
.article-col img{ max-width: 100%; height: auto; border-radius: 8px; }
.article-tags{
display:flex; flex-wrap: wrap; gap: 6px;
margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
}
.article-tags .chip{ text-decoration: none; }
.article-nav{
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin: 32px 0 24px;
}
.article-nav-item{
display:flex; flex-direction: column; gap: 6px;
background: var(--panel-2, var(--line-2));
border: 1px solid var(--line);
border-radius: var(--r, 10px);
padding: 14px 18px;
color: var(--ink);
transition: border-color .15s, background .15s;
}
.article-nav-item:hover{ border-color: var(--blue-500); background: #fff; }
.article-nav-item .dir{
font-family: var(--font-mono); font-size: 11px;
color: var(--mute); letter-spacing: .08em; text-transform: uppercase;
}
.article-nav-item .t{
font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-nav-item--next{ text-align: right; align-items: flex-end; }
.back-to-news{
display: inline-block; margin-top: 8px;
font-family: var(--font-mono); font-size: 12px;
color: var(--blue-600); letter-spacing: .06em;
}
.back-to-news:hover{ color: var(--blue-700); text-decoration: underline; }
@media (max-width: 700px) {
.page-head--article { padding: 32px 0 40px; }
.page-head--article h1.article-title{ font-size: clamp(24px, 7vw, 34px); max-width: 100%; }
.article-body { padding: 32px 20px 48px; }
.article-col p:first-child { font-size: 17px; }
.article-col p { font-size: 16px; }
.article-nav { grid-template-columns: 1fr; }
.article-nav-item--next { text-align: left; align-items: flex-start; }
}
/* ============================================================
Single Service (single-si_service.html) — DARK
============================================================ */
/* Шапка */
.page-head--service { padding: 56px 0 56px; background: transparent; color: #fff; }
.page-head--service .page-head-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.page-head--service .crumbs { flex-wrap: wrap; align-items: baseline; margin-bottom: 24px; }
.page-head--service .crumbs a { color: var(--blue-300); }
.page-head--service .crumbs .sep { color: #3a4762; }
.page-head--service h1,
.page-head--service .wp-block-post-title {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 52px) !important;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0;
color: #fff;
text-wrap: balance;
}
/* Тело — тёмное */
.section--service-body {
padding: 56px 24px 96px !important;
color: #e4ebf5;
}
.section--service-body .wp-block-post-content {
max-width: 880px;
margin-left: auto;
margin-right: auto;
color: #d6dfee;
font-size: 17px;
line-height: 1.65;
}
.section--service-body .wp-block-post-content > * + * { margin-top: 1.1em; }
.section--service-body .wp-block-post-content p { margin: 0; text-wrap: pretty; }
.section--service-body .wp-block-post-content h2 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
color: #fff;
margin: 2em 0 0.6em;
padding-top: 0.8em;
border-top: 1px solid rgba(255,255,255,0.08);
}
.section--service-body .wp-block-post-content h3 {
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
color: #fff;
margin: 1.6em 0 0.4em;
}
.section--service-body .wp-block-post-content ul,
.section--service-body .wp-block-post-content ol {
margin: 0;
padding-left: 1.4em;
}
.section--service-body .wp-block-post-content li {
margin: 0.35em 0;
color: #d6dfee;
}
.section--service-body .wp-block-post-content li::marker { color: var(--blue-300); }
.section--service-body .wp-block-post-content strong { color: #fff; font-weight: 500; }
.section--service-body .wp-block-post-content a {
color: var(--blue-300);
text-decoration: underline;
text-underline-offset: 3px;
}
.section--service-body .wp-block-post-content a:hover { color: #fff; }
.section--service-body .wp-block-post-content em {
font-style: italic;
color: inherit;
}
.section--service-body .wp-block-post-content code {
font-family: var(--font-mono);
font-size: 0.9em;
background: rgba(255,255,255,0.08);
padding: 1px 6px;
border-radius: 4px;
color: #fff;
}
/* Кнопки */
.section--service-body .wp-block-post-content .wp-block-buttons { margin-top: 2em; }
.section--service-body .wp-block-post-content .wp-block-button__link {
display: inline-block;
background: var(--blue-600);
color: #fff !important;
padding: 14px 24px;
border-radius: 10px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
text-decoration: none;
letter-spacing: -0.005em;
transition: background 0.18s ease;
}
.section--service-body .wp-block-post-content .wp-block-button__link:hover {
background: #5a8cdc;
}
/* Таблица тарифов — тёмная, контрастная */
.section--service-body .wp-block-post-content .wp-block-table {
margin: 1.6em 0;
overflow-x: auto;
}
.section--service-body .wp-block-post-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.45;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
overflow: hidden;
}
.section--service-body .wp-block-post-content .wp-block-table thead {
background: rgba(90,140,220,0.14);
}
.section--service-body .wp-block-post-content .wp-block-table thead th {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
color: #fff;
text-align: left;
padding: 14px 14px;
border-bottom: 1px solid rgba(255,255,255,0.12);
white-space: nowrap;
}
/* ВАЖНО: force transparent — WP рисует полосы на td через CSS-переменные */
.section--service-body .wp-block-post-content .wp-block-table tbody tr,
.section--service-body .wp-block-post-content .wp-block-table tbody tr:nth-child(odd),
.section--service-body .wp-block-post-content .wp-block-table tbody tr:nth-child(even),
.section--service-body .wp-block-post-content .wp-block-table.is-style-stripes tbody tr,
.section--service-body .wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.section--service-body .wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
background: transparent !important;
background-color: transparent !important;
}
.section--service-body .wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td,
.section--service-body .wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) td,
.section--service-body .wp-block-post-content .wp-block-table tbody tr:nth-child(odd) td,
.section--service-body .wp-block-post-content .wp-block-table tbody tr:nth-child(even) td {
background: transparent !important;
background-color: transparent !important;
}
.section--service-body .wp-block-post-content .wp-block-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: #e4ebf5 !important;
vertical-align: top;
background: transparent !important;
}
.section--service-body .wp-block-post-content .wp-block-table tbody tr:last-child td {
border-bottom: 0;
}
.section--service-body .wp-block-post-content .wp-block-table tbody td:first-child {
color: #9fb3d1 !important;
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.01em;
width: 32%;
}
.section--service-body .wp-block-post-content .wp-block-table tbody tr:hover td {
background: rgba(255,255,255,0.03) !important;
}
.section--service-body .wp-block-post-content .wp-block-table figcaption {
margin-top: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: #8c9db8;
text-align: left;
}
/* Моб. правки */
@media (max-width: 700px) {
.page-head--service { padding: 36px 0 32px; }
.section--service-body { padding: 32px 20px 56px !important; }
.section--service-body .wp-block-post-content { font-size: 16px; }
.section--service-body .wp-block-post-content p.lead { font-size: 18px; }
.section--service-body .wp-block-post-content h2 { font-size: 22px; }
.section--service-body .wp-block-post-content h3 { font-size: 18px; }
.section--service-body .wp-block-post-content .wp-block-table table { font-size: 13px; }
.section--service-body .wp-block-post-content .wp-block-table thead th,
.section--service-body .wp-block-post-content .wp-block-table tbody td { padding: 10px 10px; }
.section--service-body .wp-block-post-content .wp-block-table tbody td:first-child { width: auto; }
}
/* ===== Кнопки CTA внутри услуг ===== */
/* Кнопка "Купить" прямо в ячейке таблицы тарифов */
.section--service-body .wp-block-post-content .wp-block-table.price-table--buyable td a,
.section--service-body .wp-block-post-content .wp-block-table a.row-buy {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border: 1px solid rgba(120,170,255,0.45);
border-radius: 999px;
background: linear-gradient(180deg, rgba(90,140,220,0.22) 0%, rgba(90,140,220,0.08) 100%);
color: #eaf1ff !important;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.section--service-body .wp-block-post-content .wp-block-table.price-table--buyable td a:hover,
.section--service-body .wp-block-post-content .wp-block-table a.row-buy:hover {
background: linear-gradient(180deg, rgba(120,170,255,0.35) 0%, rgba(90,140,220,0.15) 100%);
border-color: rgba(170,200,255,0.7);
transform: translateY(-1px);
}
.section--service-body .wp-block-post-content .wp-block-table.price-table--buyable td a:active,
.section--service-body .wp-block-post-content .wp-block-table a.row-buy:active {
transform: translateY(0);
}
/* Блок CTA-кнопок под контентом услуги — тёмный pill в стиле row-buy */
.section--service-body .wp-block-post-content .service-cta {
margin: 28px 0 8px;
gap: 12px;
}
.section--service-body .wp-block-post-content .service-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid rgba(120, 170, 255, 0.45);
border-radius: 999px;
background: linear-gradient(180deg, rgba(90, 140, 220, 0.22) 0%, rgba(90, 140, 220, 0.08) 100%);
color: #eaf1ff;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.section--service-body .wp-block-post-content .service-cta .wp-block-button__link:hover {
background: linear-gradient(180deg, rgba(120, 170, 255, 0.35) 0%, rgba(90, 140, 220, 0.15) 100%);
border-color: rgba(170, 200, 255, 0.7);
color: #ffffff;
transform: translateY(-1px);
}
.section--service-body .wp-block-post-content .service-cta .wp-block-button__link:active {
transform: translateY(0);
}
@media (max-width: 700px) {
/* Компактная кнопка «КУПИТЬ» — текст остаётся, но кнопка уже и по центру ячейки. */
.section--service-body .wp-block-post-content .wp-block-table td:has(a.row-buy),
.section--service-body .wp-block-post-content .wp-block-table td a.row-buy {
text-align: center;
}
.section--service-body .wp-block-post-content .wp-block-table a.row-buy {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 5px 10px !important;
font-size: 10px !important;
letter-spacing: 0.04em !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
margin: 0 auto !important;
}
.section--service-body .wp-block-post-content .service-cta .wp-block-button__link { padding: 14px 22px; font-size: 11px; }
}
/* ============================
Новости — обложка hero (SVG-плейсхолдер)
============================ */
.feed-hero { position: relative; }
.feed-hero-img {
position: relative;
overflow: hidden;
border-radius: 14px;
border: 1px solid var(--line, rgba(125,170,220,.18));
background: #0e1b2c;
aspect-ratio: 21 / 8;
}
.feed-hero-img .news-cover {
display: block;
width: 100%;
height: 100%;
}
.feed-hero-img .feed-hero-img-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-hero-img .badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
}
/* ============================
Hero layout — defensive fix
Гарантирует 2-колоночный grid даже если родитель (WP .wp-site-blocks,
.wp-block-shortcode, FSE obertки) навязал flex-direction:column или
ограничил ширину.
============================ */
body .e-hero .container{
display:block !important;
max-width:var(--maxw) !important;
margin:0 auto !important;
padding:0 24px !important;
}
body .e-hero .e-hero-main{
display:grid !important;
grid-template-columns: 1.35fr 1fr !important;
gap: 72px !important;
align-items: end !important;
padding: 56px 0 48px !important;
width: 100% !important;
}
body .e-hero .e-hero-proof{
display:grid !important;
grid-template-columns: repeat(4, 1fr) !important;
width: 100% !important;
}
@media (max-width: 900px){
body .e-hero .e-hero-main{
grid-template-columns: 1fr !important;
gap: 32px !important;
padding: 40px 0 32px !important;
}
body .e-hero .e-hero-proof{
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px){
body .e-hero .e-hero-proof{
grid-template-columns: 1fr !important;
}
}
/* Unified split section head — kicker + h2 left, descriptive text right */
.head-split{
display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start;
padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:48px;
}
.head-split .hs-left{display:flex;flex-direction:column;gap:20px}
.head-split .kicker{
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--blue-700);display:inline-flex;align-items:center;gap:10px;
}
.head-split .kicker::before{
content:"";width:24px;height:1px;background:var(--blue-700);
}
.head-split h2{
font-family:var(--font-sans);font-weight:300;font-size:clamp(32px,3.6vw,52px);
line-height:1.06;letter-spacing:-.025em;margin:0;max-width:16ch;
}
.head-split h2 em{
font-family:var(--display-serif);font-style:italic;color:var(--blue-700);font-weight:400;
}
.head-split .hs-right{
color:var(--mute);font-size:15px;line-height:1.6;padding-top:28px;max-width:44ch;
}
.head-split .hs-right .side-link{
display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:12px;
color:var(--blue-700);white-space:nowrap;
}
.head-split .hs-right .side-link:hover{text-decoration:underline}
@media (max-width:900px){
.head-split{grid-template-columns:1fr;gap:24px}
.head-split .hs-right{padding-top:0}
}
/* =========================================================================
Contacts page — grid / form-card / info-stack / info-card
Migrated from contacts.html (HTML mockup) so WP theme renders identically.
Mobile layout (<=1000px): form stacks above info; fields go single column.
========================================================================= */
.contact-grid{
max-width:var(--maxw);margin:-56px auto 0;padding:0 24px 96px;
display:grid;grid-template-columns:1fr 1fr;gap:28px;
align-items:start;position:relative;
}
.form-card{
background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px;
box-shadow:var(--shadow-md);position:relative;
}
.form-card h2{font-size:32px;margin:0 0 8px;font-weight:500;letter-spacing:-.02em}
.form-card .lead{color:var(--mute);font-size:14px;margin:0 0 28px;max-width:44ch}
.form-row{display:grid;gap:14px}
.form-row .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field label{font-family:var(--font-mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.field input,.field textarea,.field select{
font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
background:var(--panel-2);color:var(--ink);
transition:border-color 150ms,background 150ms;
}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none;border-color:var(--blue-500);background:var(--panel-2);
box-shadow:0 0 0 3px rgba(90,140,220,.15);
}
/* autofill (Chrome/Safari) — убираем жёлтую подсветку */
.field input:-webkit-autofill,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active{
-webkit-text-fill-color:var(--ink);
-webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
box-shadow:0 0 0 1000px var(--panel-2) inset;
caret-color:var(--ink);
transition:background-color 9999s ease-out, color 9999s ease-out;
}
.field textarea{min-height:120px;resize:vertical}
.field.is-invalid input,.field.is-invalid textarea{border-color:#d46a6a}
.field-err{font-family:var(--font-mono);font-size:11px;color:#d46a6a;letter-spacing:.04em;min-height:0}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap}
.form-actions small{color:var(--mute);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
.form-actions .btn-primary{padding:14px 22px;font-size:15px}
.form-status{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;margin-top:8px}
.form-status.is-err{color:#d46a6a}
.form-status.is-ok{color:#2bb673}
/* ON AIR badge (top-right of form card) */
.form-live{
position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:8px;
padding:4px 10px;border:1px solid var(--line);border-radius:999px;
font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--mute);
}
.form-live__dot{width:6px;height:6px;border-radius:999px;background:#2bb673;box-shadow:0 0 0 0 rgba(43,182,115,.7);animation:si-pulse 2s infinite}
@keyframes si-pulse{
0%{box-shadow:0 0 0 0 rgba(43,182,115,.6)}
70%{box-shadow:0 0 0 8px rgba(43,182,115,0)}
100%{box-shadow:0 0 0 0 rgba(43,182,115,0)}
}
/* Service pill (querystring-based) */
.svc-pill{
display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 6px;
background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
font-size:13px;
}
.svc-pill__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc-pill b{font-weight:500}
.svc-pill__plan{color:var(--mute)}
.svc-pill__close{margin-left:auto;color:var(--mute);text-decoration:none;font-size:16px;line-height:1;padding:0 4px}
.svc-pill__close:hover{color:var(--ink)}
.info-stack{display:grid;gap:16px;align-content:start}
.info-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.info-card h3{
margin:0 0 16px;font-family:var(--font-mono);font-size:12px;color:var(--mute);
text-transform:uppercase;letter-spacing:.06em;font-weight:500;
}
.info-card .row{
display:grid;grid-template-columns:140px 1fr;gap:16px;padding:10px 0;
border-top:1px dashed var(--line);font-size:14px;
}
.info-card .row:first-of-type{border-top:none;padding-top:0}
.info-card .row b{font-family:var(--font-mono);color:var(--mute);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.info-card .big{font-family:var(--display-serif,var(--font-sans));font-size:28px;font-weight:500;letter-spacing:-.01em;margin:4px 0 0}
.info-card .big small{display:block;font-family:var(--font-mono);font-size:12px;color:var(--mute);font-weight:400;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.info-dark{background:#0b1220;color:#fff;border:1px solid #1d2a42}
.info-dark h3{color:#cbd9ef}
.info-dark .big{color:#fff}
.info-dark .big small{color:#8ea3c4}
.info-dark .row{border-color:#1d2a42;color:#e8eef8}
.info-dark .row b{color:#8ea3c4}
.info-dark .row span{color:#fff}
/* ----- Mobile: single column, dense padding ----- */
@media (max-width:1000px){
.contact-grid{grid-template-columns:1fr;gap:20px;padding-bottom:64px}
.form-card{padding:28px}
.form-row .pair{grid-template-columns:1fr}
.info-card .row{grid-template-columns:1fr;gap:4px}
.info-card .row b{font-size:10px}
}
@media (max-width:560px){
.contact-grid{padding-left:16px;padding-right:16px}
.form-card{padding:22px}
.form-card h2{font-size:26px}
.form-live{top:14px;right:14px}
.form-actions{flex-direction:column;align-items:stretch}
.form-actions .btn-primary{width:100%;justify-content:center}
}
/* ==========================================================
Header stickiness rules (v1.10.111)
FSE wraps