:root { color-scheme: dark;
  --bg:#08080a; --panel:#101014; --panel-2:#15151a; --edge:#232329; --edge-2:#3a3a42;
  --text:#f5f5f4; --muted:#a1a1aa; --dim:#71717a;
  --accent:#fbf237; --accent-ink:#fbf237; --on-accent:#0a0a0a;
  --radius:24px; --shadow:none; }
html[data-theme="light"] { color-scheme: light;
  --bg:#f6f6f1; --panel:#ffffff; --panel-2:#fbfbf7; --edge:#e3e3da; --edge-2:#cfcfc4;
  --text:#111114; --muted:#52525b; --dim:#82828c;
  --accent:#f2e40f; --accent-ink:#6f6400; --on-accent:#111114;
  --shadow:0 10px 30px rgba(20,20,10,.07); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html { background:var(--bg); }
body { margin:0; color:var(--text);
  font:17px/1.65 "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; transition:color .2s ease;
  background-color:var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg) 58%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)),
    url("bg.jpg");
  background-size:cover, cover;
  background-position:center, center;
  background-attachment:fixed, fixed;
  background-repeat:no-repeat, no-repeat; }
html[data-theme="light"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 94%, transparent)),
    url("bg.jpg"); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.topbar .wrap { max-width:1380px; }

/* top bar */
.topbar { border-bottom:1px solid var(--edge); background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); position:sticky; top:0; z-index:60; transition:background .2s ease; }
.topbar-in { display:flex; align-items:center; gap:20px; justify-content:space-between;
  min-height:88px; flex-wrap:nowrap; padding:10px 24px; }
.tb-left { display:flex; align-items:center; gap:14px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.14em;
  font-size:26px; text-transform:uppercase; line-height:1; }
.brand .dot { width:11px; height:11px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 60%, transparent); }
.navrow { display:flex; gap:6px; flex-wrap:wrap; }
.navrow a { font-size:13.5px; color:var(--muted); border:1px solid var(--edge);
  border-radius:999px; padding:8px 12px; transition:.15s; white-space:nowrap; }
.navrow a:hover { color:var(--accent-ink); border-color:var(--accent-ink); }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--edge); background:var(--panel); color:var(--text);
  cursor:pointer; font-size:18px; line-height:1; transition:.15s; }
.icon-btn:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.btn { display:inline-flex; align-items:center; gap:10px; border-radius:999px; white-space:nowrap;
  padding:14px 26px; font-weight:600; font-size:15px; border:1px solid transparent;
  cursor:pointer; font-family:inherit;
  transition:transform .15s ease, background .15s ease, color .15s ease; }
.btn-accent { background:var(--accent); color:var(--on-accent); }
.btn-accent:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn-ghost { border-color:var(--edge-2); color:var(--text); background:transparent; }
.btn-ghost:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.btn-sm { padding:11px 20px; font-size:14px; }

/* burger + mobile menu */
.burger { display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border-radius:12px; border:1px solid var(--edge);
  background:var(--panel); cursor:pointer; padding:0 11px; }
.burger span { display:block; height:2px; border-radius:2px; background:var(--text); transition:.2s; }
body.menu-open .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity:0; }
body.menu-open .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; border-top:1px solid var(--edge); background:var(--panel); }
body.menu-open .mobile-menu { display:block; }
.mobile-menu .inner { max-width:1180px; margin:0 auto; padding:14px 24px 20px; display:grid; gap:8px; }
.mobile-menu a { padding:13px 16px; border-radius:14px; border:1px solid var(--edge);
  background:var(--panel-2); font-size:15px; }
.mobile-menu a:hover { border-color:var(--accent-ink); color:var(--accent-ink); }


.phone { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px;
  color:var(--text); white-space:nowrap; }
.phone:hover { color:var(--accent-ink); }
.lang-switch { display:inline-flex; align-items:center; justify-content:center; height:40px; min-width:44px;
  padding:0 12px; border:1px solid var(--edge); border-radius:999px; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--muted); }
.lang-switch:hover { color:var(--accent-ink); border-color:var(--accent-ink); }
@media (max-width:760px) { .phone { display:none; } }

/* hero */
.hero { padding:56px 0 40px; }
.eyebrow { color:var(--accent-ink); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin-bottom:18px; }
h1.display { font-size:clamp(38px, 6vw, 76px); line-height:1.02; letter-spacing:-.03em;
  margin:0 0 24px; font-weight:800; }
h1.display .accent { color:var(--accent-ink); }
.hero p.lead { color:var(--muted); font-size:clamp(18px, 2vw, 22px); max-width:760px; margin:0 0 32px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.cards-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:44px; }
.svc-card { background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius);
  padding:26px; min-height:210px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.svc-card:hover { border-color:var(--accent-ink); transform:translateY(-3px); background:var(--panel-2); }
.svc-card h3 { margin:0 0 10px; font-size:22px; line-height:1.2; letter-spacing:-.01em; }
.svc-card p { margin:0; color:var(--muted); font-size:15px; }
.svc-card .arrow { color:var(--accent-ink); font-size:20px; margin-top:18px; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin:56px 0 0; }
.stat { border:1px solid var(--edge); border-radius:20px; padding:26px; background:var(--panel);
  box-shadow:var(--shadow); }
.stat b { display:block; font-size:44px; line-height:1; font-weight:800; letter-spacing:-.03em;
  color:var(--accent-ink); margin-bottom:10px; }
.stat span { color:var(--muted); font-size:15px; }

/* section */
section { padding:74px 0 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:32px; flex-wrap:wrap; }
.sec-head h2 { font-size:clamp(28px, 3.4vw, 44px); line-height:1.1; letter-spacing:-.02em; margin:0; }
.sec-head p { color:var(--muted); margin:8px 0 0; max-width:620px; }
.sec-link { color:var(--accent-ink); font-size:15px; white-space:nowrap; }

/* cases */
.cases { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; }
.case { border:1px solid var(--edge); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow); display:block;
  transition:border-color .18s ease, transform .18s ease; }
.case:hover { border-color:var(--accent-ink); transform:translateY(-3px); }
.case img { border:0; border-radius:0; margin:0; border-bottom:1px solid var(--edge); }
.case .in { padding:22px 24px 26px; }
.cases.compact { grid-template-columns:repeat(auto-fit, minmax(240px, 320px)); justify-content:start; }
.cases.cases-4 { grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); }
.case .tag { color:var(--accent-ink); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.case h3 { margin:8px 0 8px; font-size:21px; line-height:1.25; }
.case p { margin:0; color:var(--muted); font-size:15px; }
.case .ext { display:inline-block; margin-top:14px; font-size:13px; color:var(--dim); }

/* services list */
.svc-list { display:grid; gap:0; }
.svc-row { display:grid; grid-template-columns:80px 1fr; gap:24px; align-items:start;
  border-top:1px solid var(--edge); padding:26px 0; }
.svc-row:last-child { border-bottom:1px solid var(--edge); }
.svc-row .n { color:var(--accent-ink); font-weight:700; font-size:15px; letter-spacing:.1em; }
.svc-row h3 { margin:0 0 8px; font-size:24px; letter-spacing:-.01em; }
.svc-row p { margin:0; color:var(--muted); max-width:760px; }

/* process */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.step { background:var(--panel); border:1px solid var(--edge); border-radius:20px; padding:24px;
  box-shadow:var(--shadow); }
.step b { display:block; color:var(--accent-ink); font-size:13px; letter-spacing:.14em; margin-bottom:12px; }
.step h3 { margin:0 0 8px; font-size:19px; }
.step p { margin:0; color:var(--muted); font-size:15px; }

/* stack */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chips span { border:1px solid var(--edge); background:var(--panel); border-radius:999px;
  padding:10px 18px; font-size:14px; color:var(--muted); }
.chips span:hover { border-color:var(--accent-ink); color:var(--text); }

/* blog list */
.bloglist { display:grid; gap:12px; }
.blogrow { display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--edge); border-radius:18px; padding:20px 24px; background:var(--panel);
  box-shadow:var(--shadow); transition:border-color .15s ease, transform .15s ease; }
.blogrow:hover { border-color:var(--accent-ink); transform:translateX(3px); }
.blogrow .t { font-size:18px; font-weight:600; }
.blogrow .d { color:var(--dim); font-size:14px; margin-top:4px; }
.blogrow .go { color:var(--accent-ink); font-size:20px; }

/* contact */
.contact { margin-top:74px; border:1px solid var(--edge); border-radius:28px; background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
  var(--panel); padding:44px; box-shadow:var(--shadow); }
.contact h2 { margin:0 0 12px; font-size:clamp(26px, 3vw, 40px); letter-spacing:-.02em; }
.contact p { color:var(--muted); margin:0 0 28px; max-width:640px; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:22px;
  border-top:1px solid var(--edge); padding-top:28px; margin-top:32px; }
.contact-grid .k { color:var(--dim); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:8px; }
.contact-grid .v { font-size:17px; }
.contact-grid a.v:hover { color:var(--accent-ink); }
footer.site-foot { margin-top:64px; border-top:1px solid var(--edge); padding:34px 0 60px;
  color:var(--dim); font-size:14px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
footer.site-foot a:hover { color:var(--accent-ink); }

/* modal form */
.modal { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center;
  padding:20px; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(4,4,6,.72); backdrop-filter:blur(4px); }
.modal-card { position:relative; width:min(560px, 100%); background:var(--panel);
  border:1px solid var(--edge); border-radius:24px; padding:34px; box-shadow:0 30px 80px rgba(0,0,0,.45);
  max-height:92vh; overflow:auto; }
.modal-card h2 { margin:0 0 8px; font-size:28px; letter-spacing:-.01em; }
.modal-card > p { color:var(--muted); margin:0 0 22px; font-size:15px; }
.modal-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--edge); background:var(--panel-2); color:var(--text); font-size:20px;
  cursor:pointer; line-height:1; }
.modal-close:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.field { display:block; margin-bottom:14px; }
.field span { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea { width:100%; background:var(--panel-2); color:var(--text);
  border:1px solid var(--edge); border-radius:12px; padding:12px 14px; font:inherit; font-size:15px; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent-ink); }
.form-status { margin:14px 0 0; font-size:14px; min-height:20px; color:var(--muted); }
.form-status.ok { color:#3f9e58; }
html[data-theme="dark"] .form-status.ok { color:#7ee2a1; }
.form-status.err { color:#d9534f; }
html[data-theme="dark"] .form-status.err { color:#ff8a80; }
.form-note { margin:14px 0 0; font-size:12px; color:var(--dim); }

/* article styles */
.page { max-width:840px; margin:0 auto; padding:40px 24px 110px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:44px;
  font-size:15px; color:var(--dim); }
.top a { color:var(--muted); } .top a:hover { color:var(--accent-ink); }
.cover { width:100%; border-radius:20px; border:1px solid var(--edge); margin:0 0 32px; display:block; }
.page h1 { font-size:clamp(30px, 4.4vw, 44px); line-height:1.14; margin:0 0 14px; letter-spacing:-.02em; }
.page h2 { font-size:27px; margin:52px 0 16px; }
.page h3 { font-size:21px; margin:32px 0 10px; }
.meta { color:var(--dim); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; }
.lead { color:var(--muted); font-size:19px; margin:0 0 34px; }
.page p { margin:0 0 18px; }
.page strong { color:var(--text); }
code { background:var(--panel-2); padding:2px 6px; border-radius:6px; font-size:.9em;
  font-family:Consolas,"Cascadia Mono",monospace; color:var(--accent-ink);
  border:1px solid var(--edge); }
pre.code { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px 20px;
  overflow:auto; position:relative; }
pre.code code { background:none; padding:0; color:var(--text); font-size:14px; border:0; }
pre.code::before { content:attr(data-lang); position:absolute; top:8px; right:12px; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--dim); }
blockquote { margin:24px 0; padding:16px 20px; border-left:3px solid var(--accent);
  background:var(--panel); border-radius:0 12px 12px 0; color:var(--muted); }
blockquote p { margin:0; }
.page ul { padding-left:22px; margin:0 0 20px; } .page li { margin-bottom:8px; }
hr { border:0; border-top:1px solid var(--edge); margin:44px 0; }
.page img { border-radius:14px; border:1px solid var(--edge); margin:26px 0; }
.table-wrap { overflow-x:auto; margin:24px 0; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--edge); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
tbody tr:hover { background:var(--panel); }
kbd { background:var(--panel-2); border:1px solid var(--edge-2); border-bottom-width:2px; border-radius:6px;
  padding:1px 6px; font:13px Consolas,monospace; }
.diagram { margin:28px 0; border:1px dashed var(--edge-2); border-radius:14px; padding:16px; background:var(--panel); }
.diagram-cap { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.diagram pre { margin:0; white-space:pre-wrap; color:var(--muted); font-size:13px; }
.tags { margin:26px 0 0; }
.tags span { display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--edge-2);
  background:var(--panel-2); border-radius:999px; padding:3px 10px; margin:0 8px 8px 0; }
footer.art { margin-top:64px; padding-top:24px; border-top:1px solid var(--edge); color:var(--dim); font-size:14px; }

@media (max-width:900px) {
  .navrow { display:none; }
  .burger { display:flex; }
  .brand { font-size:20px; }
  .top-actions .btn { padding:11px 18px; font-size:14px; }
}
@media (max-width:640px) {
  .svc-row { grid-template-columns:1fr; gap:10px; }
  .contact { padding:28px; }
  .topbar-in { min-height:72px; }
  .top-actions .btn span { display:none; }
}