:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceff3;
  --ink: #101828;
  --ink-2: #24324a;
  --muted: #667085;
  --line: rgba(16, 24, 40, 0.12);
  --line-strong: rgba(16, 24, 40, 0.2);
  --accent: #3657ff;
  --accent-2: #0d8f9d;
  --navy: #0d172b;
  --success: #12a66a;
  --container: 1320px;
  --shadow-sm: 0 12px 28px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 24px 60px rgba(16, 24, 40, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open, body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  left: 14px;
  top: -60px;
  z-index: 9999;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding: 108px 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  background: rgba(244, 245, 247, 0.9);
  backdrop-filter: blur(18px);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(16,24,40,.05); background: rgba(244,245,247,.97); }
.nav-wrap { height: 78px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ink);
  border-radius: 10px;
  font-weight: 900;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(16,24,40,.16);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 15px; letter-spacing: -.02em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav > a { color: var(--ink-2); font-size: 13px; font-weight: 700; transition: color .2s ease; }
.main-nav > a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta {
  padding: 13px 17px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); background: #1c2b46; }
.language-switcher { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); background: rgba(255,255,255,.78); border-radius: 9px; }
.lang-btn { border: 0; background: transparent; padding: 8px 8px; border-radius: 6px; color: var(--muted); font-size: 10px; font-weight: 900; cursor: pointer; }
.lang-btn.active { color: #fff; background: var(--accent); }
.mobile-visible, .menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; padding: 82px 0 70px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -240px;
  background: radial-gradient(circle, rgba(54,87,255,.11), transparent 66%);
  pointer-events: none;
}
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(540px,.95fr); gap: 58px; align-items: center; }
.hero-copy { max-width: 660px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #137952; font-size: 12px; font-weight: 800; margin-bottom: 24px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #20c77a; box-shadow: 0 0 0 5px rgba(32,199,122,.12); }
.hero h1 { margin: 0; display: flex; flex-direction: column; font-size: clamp(46px, 4.1vw, 60px); line-height: .98; letter-spacing: -.065em; font-weight: 850; }
.hero h1 span { display: block; }
.hero h1 .accent-line { color: var(--accent); white-space: nowrap; }
.hero-lead { max-width: 620px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 31px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16,24,40,.16); }
.btn-secondary { background: rgba(255,255,255,.72); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: #fff; transform: translateY(-2px); }
.hero-facts { display: flex; gap: 30px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-facts div { display: flex; flex-direction: column; gap: 5px; }
.hero-facts strong { font-size: 14px; letter-spacing: -.02em; }
.hero-facts span { color: var(--muted); font-size: 11px; }

.portfolio-board { min-width: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.board-top { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.board-top > div { display: flex; align-items: center; gap: 10px; }
.board-top strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.board-top small { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.board-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; }
.board-feature { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 320px; }
.board-feature-copy { padding: 30px 26px; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: flex-start; }
.board-feature-copy > span { color: #8fa2c4; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.board-feature-copy h2 { margin: 15px 0 12px; font-size: 32px; letter-spacing: -.04em; }
.board-feature-copy p { margin: 0; color: #aebbd0; font-size: 12px; line-height: 1.7; }
.board-feature-copy a { margin-top: auto; padding-top: 22px; color: #fff; font-size: 12px; font-weight: 800; }
.board-ui { margin: 24px 24px 24px 0; align-self: stretch; background: #edf1f7; border: 1px solid #dbe2ec; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.ui-top { height: 35px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid #d8dfeb; background: #f7f9fc; }
.ui-top span { width: 6px; height: 6px; border-radius: 50%; background: #c0c9d6; }
.ui-top b { margin-left: auto; margin-right: auto; color: #8d9aaf; font-size: 8px; font-weight: 700; }
.ui-search { margin: 14px; padding: 18px; color: #fff; background: linear-gradient(135deg, #283f83, #4a4fc7 55%, #178a9b); }
.ui-search strong { display: block; margin-bottom: 16px; font-size: 14px; }
.ui-search div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.ui-search i { display: block; height: 22px; background: rgba(255,255,255,.22); }
.ui-search button { border: 0; background: #fff; color: #253159; font-size: 8px; font-weight: 900; padding: 0 10px; }
.ui-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 14px; }
.ui-cards article { height: 88px; border: 1px solid #d5dde9; background: linear-gradient(#d9e0ea 55%, #fff 55%); }
.board-secondary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.board-secondary a { min-width: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 17px 20px; }
.board-secondary a + a { border-left: 1px solid var(--line); }
.board-secondary > a > span { color: var(--accent); font-size: 10px; font-weight: 900; }
.board-secondary div { min-width: 0; }
.board-secondary small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.board-secondary strong { display: block; margin-top: 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-secondary i { font-style: normal; color: var(--muted); }
.board-foot { display: flex; gap: 17px; padding: 12px 20px; color: #7b8799; background: #f7f8fa; border-top: 1px solid var(--line); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,460px); gap: 80px; align-items: end; margin-bottom: 46px; }
.section-kicker { display: block; margin-bottom: 14px; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.section-heading h2, .process-header h2, .about-copy h2, .contact-copy h2 { margin: 0; font-size: clamp(36px,4vw,58px); line-height: 1.03; letter-spacing: -.055em; }
.section-heading h2 em, .process-header h2 em, .about-copy h2 em, .contact-copy h2 em { color: var(--muted); font-style: normal; font-weight: 650; }
.section-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }

.projects { background: #fff; }
.projects-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.project-card { min-width: 0; border: 1px solid var(--line); background: #fff; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; outline: none; }
.project-card:hover, .project-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.project-cover { position: relative; height: 260px; overflow: hidden; padding: 20px; display: flex; flex-direction: column; }
.cover-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.cover-head span { font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.cover-head b { padding: 6px 8px; border: 1px solid currentColor; font-size: 8px; letter-spacing: .1em; }
.cover-title { position: relative; z-index: 2; margin-top: auto; }
.cover-title small { display: block; margin-bottom: 7px; font-size: 8px; font-weight: 900; letter-spacing: .14em; opacity: .72; }
.cover-title strong { display: block; max-width: 90%; font-size: clamp(24px,2vw,32px); line-height: 1.02; letter-spacing: -.045em; }
.cover-besthome { color: #fff; background: #132445; }
.cover-besthome::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 100% 0, rgba(60,91,255,.45), transparent 50%), linear-gradient(135deg, transparent 40%, rgba(12,144,157,.18)); }
.cover-interface { position: absolute; right: 22px; top: 56px; width: 58%; height: 126px; padding: 12px; background: rgba(255,255,255,.96); box-shadow: 0 20px 38px rgba(0,0,0,.2); transform: rotate(-2deg); }
.mini-header { height: 9px; background: #e5eaf1; margin-bottom: 10px; }
.mini-search { height: 32px; background: linear-gradient(90deg,#3d4ec7,#1a929b); margin-bottom: 8px; }
.mini-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.mini-cards i { height: 43px; background: #e5eaf1; }
.cover-baltic { color: #2f261e; background: #ded3c3; }
.cover-baltic::after { content:""; position:absolute; right:-80px; top:-100px; width:260px; height:260px; border-radius:50%; border:1px solid rgba(47,38,30,.2); box-shadow: 0 0 0 42px rgba(47,38,30,.05), 0 0 0 84px rgba(47,38,30,.035); }
.blueprint-house { position: absolute; left: 16px; right: 16px; top: 57px; width: calc(100% - 32px); height: 138px; fill: none; stroke: rgba(47,38,30,.62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cover-transfer { color: #fff; background: linear-gradient(145deg,#151837,#292f72); }
.transfer-map { position:absolute; left:24px; right:24px; top:68px; display:grid; grid-template-columns:70px 1fr 140px; align-items:center; gap:14px; }
.device-a { height: 106px; border: 2px solid rgba(255,255,255,.8); padding: 12px; }
.device-a i { display:block; height:100%; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0/16px 16px; opacity:.75; }
.transfer-path { display:flex; align-items:center; justify-content:center; gap:10px; }
.transfer-path span { width:8px; height:8px; border-radius:50%; background:#63e3e8; box-shadow:0 0 0 5px rgba(99,227,232,.08); animation: dataPulse 1.8s infinite ease-in-out; }
.transfer-path span:nth-child(2){animation-delay:.2s}.transfer-path span:nth-child(3){animation-delay:.4s}
.device-b { height: 90px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); padding:16px; }
.device-b i { display:block; height:8px; margin-bottom:10px; background:linear-gradient(90deg,#6e68ff 70%,rgba(255,255,255,.12) 70%); }
.cover-netusta { color:#17313b; background:#cfe0e2; }
.work-panel { position:absolute; right:18px; top:58px; width:70%; height:132px; display:grid; grid-template-columns:44px 1fr; background:#f8fbfb; box-shadow:0 18px 34px rgba(23,49,59,.14); }
.work-sidebar { padding:16px 12px; background:#234353; }
.work-sidebar i { display:block; height:5px; margin-bottom:12px; background:rgba(255,255,255,.45); }
.work-list { padding:13px; }
.work-list span { display:grid; grid-template-columns:14px 1fr; gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid #dce8ea; }
.work-list b { width:10px;height:10px;border-radius:50%;background:#3c68ff; }
.work-list i { height:6px;background:#d2dde0; }
.cover-automation { color:#153329; background:#d9e7df; }
.message-stack { position:absolute; top:59px; right:20px; width:72%; }
.message-stack div { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:12px; margin-bottom:9px; padding:12px 14px; background:#fff; border-left:3px solid #2a8d68; box-shadow:0 12px 25px rgba(21,51,41,.08); }
.message-stack span { font-size:10px;font-weight:900;color:#2a8d68; }
.message-stack i { height:7px;background:#dbe4df; }
.cover-device { color:#e9eef6; background:#171c24; }
.terminal-card { position:absolute; left:24px; right:24px; top:60px; height:134px; padding:14px 16px; border:1px solid rgba(255,255,255,.16); background:#0d1118; box-shadow:0 20px 40px rgba(0,0,0,.3); font: 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.terminal-card > div { display:flex; gap:5px; margin-bottom:11px; }
.terminal-card > div span { width:6px;height:6px;border-radius:50%;background:#566173; }
.terminal-card p { margin:4px 0;color:#9ba8bc; }
.terminal-card .terminal-ok { color:#50d49b; }
.project-info { display:flex; flex-direction:column; min-height: 330px; padding: 24px; }
.project-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.project-info h3 { margin:18px 0 10px; font-size:28px; line-height:1.1; letter-spacing:-.04em; }
.project-info p { margin:0; color:var(--muted); font-size:14px; line-height:1.72; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.tag-row span { padding:7px 9px; color:#4f5d73; background:#f1f3f6; font-size:9px; font-weight:800; }
.project-links { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:auto; padding-top:24px; }
.project-links a, .details-btn { border:0; background:transparent; padding:0; font-size:12px; font-weight:900; cursor:pointer; }
.project-links a:hover, .details-btn:hover { color:var(--accent); }

.services { background:#eef0f3; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.services-list { border-top:1px solid var(--line-strong); }
.service-row { display:grid; grid-template-columns:54px 1.05fr 1.55fr 1fr; gap:30px; align-items:center; min-height:132px; border-bottom:1px solid var(--line); }
.service-row > span { color:var(--accent); font-size:11px; font-weight:900; }
.service-row h3 { margin:0; font-size:21px; letter-spacing:-.03em; }
.service-row p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.service-row > div { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.service-row b { padding:7px 9px; background:#fff; border:1px solid var(--line); font-size:9px; font-weight:800; }

.process { background:#fff; }
.process-header { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:48px; }
.text-link { flex:0 0 auto; padding-bottom:7px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:900; }
.process-track { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.process-track article { position:relative; min-height:260px; padding:28px 26px 20px 0; border-right:1px solid var(--line); }
.process-track article:last-child { border-right:0; padding-right:0; }
.process-track article + article { padding-left:26px; }
.process-track article > span { position:absolute; right:18px; top:25px; color:#c4cad4; font-size:34px; font-weight:800; letter-spacing:-.06em; }
.process-track small { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.14em; }
.process-track h3 { margin:44px 0 12px; font-size:21px; letter-spacing:-.03em; }
.process-track p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }

.about { background:#f0ede7; }
.about-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:76px; align-items:center; }
.work-console { overflow:hidden; color:#dbe6f6; background:#101827; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-md); }
.console-top { height:50px; display:flex; align-items:center; gap:16px; padding:0 16px; background:#0b1220; border-bottom:1px solid rgba(255,255,255,.08); }
.console-top > div { display:flex; gap:6px; }
.console-top > div span { width:7px;height:7px;border-radius:50%;background:#506079; }
.console-top b { font:10px ui-monospace,SFMono-Regular,Menlo,monospace; color:#9daac0; }
.console-top small { margin-left:auto; color:#5ce0a4; font-size:8px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.console-main { display:grid; grid-template-columns:165px 1fr; min-height:390px; }
.console-main aside { padding:25px 18px; background:#0d1524; border-right:1px solid rgba(255,255,255,.08); }
.console-main aside strong { display:block; margin-bottom:16px; color:#63718a; font-size:8px; letter-spacing:.14em; }
.console-main aside span { display:block; padding:9px 10px; margin-bottom:4px; color:#8592a8; font-size:10px; }
.console-main aside span.active { color:#fff; background:rgba(54,87,255,.18); border-left:2px solid #5f79ff; }
.console-content { padding:30px; }
.console-title small { color:#70819d; font-size:8px; letter-spacing:.14em; }
.console-title h3 { margin:8px 0 24px; color:#fff; font-size:24px; letter-spacing:-.04em; }
.code-lines { padding:17px; background:#0b1220; border:1px solid rgba(255,255,255,.07); font:11px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-lines p { margin:0; white-space:nowrap; }
.code-lines p > span { display:inline-block; width:26px; color:#45536b; }
.code-lines b { color:#8ca0ff; }
.code-lines i { color:#5cd5a4; font-style:normal; }
.code-lines em { color:#8291aa; font-style:normal; }
.code-lines strong { color:#65d9ed; }
.code-lines u { display:inline-block; width:6px; height:13px; margin-left:3px; vertical-align:-2px; background:#65d9ed; animation:blink 1s steps(1) infinite; text-decoration:none; }
.console-status { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.console-status div { padding:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.console-status i { display:block; width:7px;height:7px;border-radius:50%;background:#48d399;margin-bottom:10px; }
.console-status span { display:block;color:#8d9bb2;font-size:8px;text-transform:uppercase;letter-spacing:.1em; }
.console-status b { display:block;margin-top:4px;color:#fff;font-size:10px; }
.about-copy h2 { font-size:clamp(34px,3.4vw,52px); }
.about-copy .section-kicker { margin-bottom:18px; }
.about-lead { margin:27px 0 16px; color:var(--ink); font-size:17px !important; font-weight:650; }
.about-copy p { margin:0 0 15px; color:#5f6671; font-size:14px; line-height:1.75; }
.about-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; }
.about-proof div { padding-top:15px; border-top:1px solid rgba(16,24,40,.18); }
.about-proof strong { display:block; font-size:11px; }
.about-proof span { display:block; margin-top:6px; color:#747b86; font-size:9px; line-height:1.45; }

.skills-section { padding:24px 0; background:#101827; }
.skills-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.skills-bar span { padding:8px 10px; border:1px solid rgba(255,255,255,.12); color:#aebbd0; font-size:9px; font-weight:800; }

.contact { background:#fff; }
.contact-shell { display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; padding:52px; color:#fff; background:#111b31; box-shadow:var(--shadow-md); }
.contact-copy .section-kicker { color:#7f96ff; }
.contact-copy h2 { font-size:clamp(38px,3.6vw,54px); }
.contact-copy h2 em { color:#9caac0; }
.contact-copy > p { max-width:520px; color:#aebbd0; font-size:14px; line-height:1.75; }
.contact-details { display:grid; gap:10px; margin-top:30px; }
.contact-details a { display:flex; flex-direction:column; gap:5px; padding:15px 0; border-top:1px solid rgba(255,255,255,.12); }
.contact-details small { color:#8695ad; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.contact-details strong { font-size:15px; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:26px; color:var(--ink); background:#fff; }
.contact-form label { display:flex; flex-direction:column; gap:8px; }
.contact-form label span { color:#4c5768; font-size:10px; font-weight:800; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; border:1px solid #d8dee7; background:#f8f9fb; color:var(--ink); outline:none; padding:13px 14px; border-radius:0; transition:border-color .2s ease,box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(54,87,255,.1); }
.contact-form textarea { resize:vertical; min-height:100px; }
.contact-form .full { grid-column:1/-1; }
.contact-form button { width:100%; }

.site-footer { color:#c6d0df; background:#0b1323; }
.footer-inner { padding:46px 0 20px; }
.footer-top { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer .brand-mark { background:#fff; color:#0b1323; box-shadow:none; }
.site-footer .brand-copy strong { color:#fff; }
.site-footer .brand-copy small { color:#7f8ba0; }
.footer-brand p { max-width:430px; margin:16px 0 0; color:#8490a4; font-size:12px; line-height:1.7; }
.footer-cta-compact { display:grid; grid-template-columns:1fr auto; gap:8px 24px; align-items:center; padding-left:34px; border-left:1px solid rgba(255,255,255,.1); }
.footer-cta-compact > span { grid-column:1/-1; color:#6f82ff; font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.footer-cta-compact strong { max-width:500px; color:#fff; font-size:25px; line-height:1.2; letter-spacing:-.03em; }
.footer-cta-compact a { padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.45); color:#fff; font-size:11px; font-weight:900; white-space:nowrap; }
.footer-links { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:50px; padding:28px 0; }
.footer-links nav, .footer-links > div { display:flex; flex-wrap:wrap; align-content:flex-start; gap:11px 24px; }
.footer-links a { color:#98a5b8; font-size:11px; transition:color .2s ease; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:#68758a; font-size:9px; }
.footer-bottom a { color:#aab6c7; }

.whatsapp-float { position:fixed; right:24px; bottom:24px; z-index:900; width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:#18bd67;color:#fff;box-shadow:0 15px 34px rgba(24,189,103,.28);transition:transform .2s ease; }
.whatsapp-float:hover { transform:translateY(-3px); }
.whatsapp-float svg { width:26px; fill:currentColor; }

.project-modal { position:fixed; inset:0; z-index:2000; display:none; }
.project-modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(10,16,29,.68); backdrop-filter:blur(7px); }
.modal-panel { position:relative; width:min(860px,calc(100% - 34px)); max-height:calc(100vh - 48px); overflow:auto; margin:24px auto; padding:38px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.24); }
.modal-close { position:absolute; top:14px; right:14px; width:34px;height:34px;border:1px solid var(--line);background:#fff;font-size:24px;line-height:1;cursor:pointer; }
.modal-kicker { color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.modal-panel h2 { margin:12px 0 10px;font-size:42px;letter-spacing:-.05em; }
.modal-summary { color:var(--muted);font-size:15px;line-height:1.7; }
.modal-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px; }
.modal-box { padding:18px;border:1px solid var(--line);background:#f7f8fa; }
.modal-box h3 { margin:0 0 10px;font-size:15px; }
.modal-box p,.modal-box li { color:var(--muted);font-size:12px;line-height:1.7; }
.modal-box ul { margin:0;padding-left:18px; }
.modal-tech { display:flex;flex-wrap:wrap;gap:7px;margin-top:18px; }
.modal-tech span { padding:7px 9px;background:#eef1f5;font-size:9px;font-weight:800; }
.modal-actions { display:flex;gap:10px;margin-top:24px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }

@keyframes blink { 50% { opacity:0; } }
@keyframes dataPulse { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.code-lines u,.transfer-path span{animation:none} }

@media (max-width: 1180px) {
  :root { --container: 1080px; }
  .main-nav { gap:18px; }
  .nav-actions .language-switcher { display:none; }
  .hero-layout { grid-template-columns:1fr 1fr; gap:42px; }
  .board-feature { grid-template-columns:1fr; }
  .board-feature-copy { min-height:210px; }
  .board-ui { display:none; }
  .project-cover { height:230px; }
  .service-row { grid-template-columns:46px 1fr 1.4fr; }
  .service-row > div { display:none; }
  .about-layout { gap:46px; }
}

@media (max-width: 900px) {
  .container { width:min(100% - 32px,var(--container)); }
  .section-pad { padding:78px 0; }
  .nav-wrap { height:68px; }
  .nav-actions { margin-left:auto; }
  .nav-cta { display:none; }
  .menu-toggle { display:flex; width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid var(--line);background:#fff;cursor:pointer; }
  .menu-toggle span { width:18px;height:2px;background:var(--ink);transition:transform .2s ease; }
  .menu-toggle.active span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.active span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .main-nav { position:fixed; left:16px;right:16px;top:76px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md); }
  .main-nav.open { display:flex; }
  .main-nav > a { padding:14px 5px;border-bottom:1px solid var(--line); }
  .mobile-visible { display:flex; margin-top:14px; width:max-content; }
  .nav-actions > .language-switcher { display:none; }
  .hero { padding:64px 0 58px; }
  .hero-layout { grid-template-columns:1fr; gap:46px; }
  .hero-copy { max-width:760px; }
  .hero h1 { font-size:clamp(44px,8vw,58px); }
  .portfolio-board { max-width:760px; }
  .board-feature { grid-template-columns:.85fr 1.15fr; }
  .board-ui { display:block; }
  .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-heading { grid-template-columns:1fr; gap:20px; }
  .section-heading p { max-width:680px; }
  .service-row { grid-template-columns:40px 1fr; gap:18px; padding:24px 0; }
  .service-row p { grid-column:2; }
  .process-header { align-items:flex-start; flex-direction:column; }
  .process-track { grid-template-columns:1fr 1fr; }
  .process-track article:nth-child(2) { border-right:0; }
  .process-track article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .about-layout { grid-template-columns:1fr; }
  .contact-shell { grid-template-columns:1fr; gap:38px; padding:36px; }
  .footer-top { grid-template-columns:1fr; gap:30px; }
  .footer-cta-compact { padding:24px 0 0; border-left:0;border-top:1px solid rgba(255,255,255,.1); }
}

@media (max-width: 620px) {
  .container { width:min(100% - 22px,var(--container)); }
  .section-pad { padding:62px 0; }
  .brand-copy small { display:none; }
  .hero { padding-top:48px; }
  .hero h1 { font-size:clamp(38px,11vw,50px); letter-spacing:-.06em; }
  .hero h1 .accent-line { white-space: normal; }
  .hero-lead { font-size:15px; line-height:1.7; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-facts { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .portfolio-board { box-shadow:var(--shadow-sm); }
  .board-feature { grid-template-columns:1fr; }
  .board-feature-copy { min-height:240px; }
  .board-ui { display:none; }
  .board-secondary { grid-template-columns:1fr; }
  .board-secondary a + a { border-left:0;border-top:1px solid var(--line); }
  .board-foot { overflow:auto; white-space:nowrap; }
  .section-heading h2,.process-header h2,.about-copy h2,.contact-copy h2 { font-size:36px; }
  .projects-grid { grid-template-columns:1fr; }
  .project-cover { height:230px; }
  .project-info { min-height:0; }
  .project-links { margin-top:28px; }
  .service-row { grid-template-columns:30px 1fr; }
  .service-row h3 { font-size:19px; }
  .process-track { grid-template-columns:1fr; }
  .process-track article,.process-track article+article { min-height:0;padding:26px 42px 28px 0;border-right:0;border-bottom:1px solid var(--line); }
  .process-track article:nth-child(2) { border-bottom:1px solid var(--line); }
  .process-track article h3 { margin-top:28px; }
  .console-main { grid-template-columns:1fr; }
  .console-main aside { display:none; }
  .console-content { padding:20px; }
  .code-lines { overflow:auto; }
  .console-status { grid-template-columns:1fr; }
  .about-proof { grid-template-columns:1fr; }
  .skills-bar { justify-content:flex-start; }
  .contact-shell { padding:28px 20px; }
  .contact-form { grid-template-columns:1fr; padding:20px; }
  .contact-form label,.contact-form .full { grid-column:1; }
  .footer-cta-compact { grid-template-columns:1fr; }
  .footer-links { grid-template-columns:1fr; gap:20px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
  .whatsapp-float { right:14px;bottom:14px;width:46px;height:46px; }
  .modal-panel { padding:28px 20px; }
  .modal-panel h2 { font-size:34px; }
  .modal-grid { grid-template-columns:1fr; }
  .modal-actions { flex-direction:column; }
}