:root {
  --bg: #060a0d;
  --bg-soft: #0a1014;
  --surface: #0c1318;
  --text: #f3f7f7;
  --muted: #9ca9ae;
  --line: rgba(221, 239, 240, .14);
  --cyan: #00e5ff;
  --lime: #b9ff36;
  --danger: #ff6b79;
  --shell: min(1180px, calc(100vw - 64px));
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { color: #061014; background: var(--cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 12px 16px; color: #071013; background: var(--lime); transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(32px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.site-header.is-scrolled { background: rgba(6, 10, 13, .86); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { justify-self: start; font-size: 19px; font-weight: 850; letter-spacing: -.08em; }
.brand span { color: var(--cyan); }
.site-nav { display: flex; gap: 32px; align-items: center; color: #bdc7ca; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.site-nav a { position: relative; padding: 8px 0; transition: color .2s; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--cyan); transition: width .2s; }
.site-nav a:hover, .site-nav a:focus-visible { color: white; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; }
.site-nav .lang-link { color: var(--lime); }
.header-cta { justify-self: end; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; transition: color .2s, background .2s, transform .2s; }
.header-cta:hover { color: #061014; background: var(--lime); transform: rotate(45deg); }
.header-cta svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 56px) max(32px, calc((100vw - 1180px) / 2)) 90px;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}
.hero-art { position: absolute; z-index: -2; inset: 0 0 0 37%; background: linear-gradient(90deg, var(--bg) 0%, transparent 38%), linear-gradient(0deg, var(--bg) 0%, transparent 24%), url("/assets/neural-flow.webp") 60% center / cover no-repeat; opacity: .92; }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(90deg, black, transparent 70%); }
.hero-content { width: min(760px, 66vw); }
.hero h1 { margin: 0; max-width: 800px; font-size: clamp(58px, 7.1vw, 108px); line-height: .88; letter-spacing: -.072em; font-weight: 790; text-wrap: balance; }
.hero h1 span { color: var(--cyan); }
.hero-content > p { width: min(560px, 90%); margin: 34px 0 0; color: #bac5c8; font-size: clamp(17px, 1.4vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; gap: 28px; align-items: center; justify-content: space-between; min-width: 212px; padding: 15px 18px; border: 1px solid var(--line); font-size: 13px; font-weight: 720; text-transform: uppercase; letter-spacing: .09em; transition: color .2s, background .2s, border-color .2s; }
.button-primary { color: #061014; background: var(--cyan); border-color: var(--cyan); }
.button-primary:hover { background: var(--lime); border-color: var(--lime); }
.button-secondary:hover { color: #061014; background: white; border-color: white; }
.scroll-hint { position: absolute; left: max(32px, calc((100vw - 1180px) / 2)); bottom: 28px; display: flex; align-items: center; gap: 12px; color: #77878c; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.scroll-hint span { width: 34px; height: 1px; background: var(--lime); animation: pulse-line 1.8s ease-in-out infinite; transform-origin: left; }

.section-shell { width: var(--shell); margin-inline: auto; }
.intro-section { display: grid; grid-template-columns: 80px 1.2fr 1fr; gap: 32px; align-items: start; padding-block: 116px; }
.section-index { color: var(--cyan); font: 600 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.intro-section h2, .section-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 74px); line-height: .95; letter-spacing: -.05em; }
.intro-section p, .section-heading p { margin: 5px 0 0; color: var(--muted); max-width: 500px; font-size: 18px; }

.expertise { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.expertise-item { position: relative; min-height: 530px; padding: 44px max(32px, calc((100vw - 1180px) / 6)); border-right: 1px solid var(--line); overflow: hidden; }
.expertise-item:last-child { border-right: 0; }
.expertise-number { position: absolute; top: 24px; right: 24px; color: #68767b; font: 11px ui-monospace, monospace; }
.expertise h3 { margin: 54px 0 14px; font-size: 31px; letter-spacing: -.04em; }
.expertise p { color: var(--muted); max-width: 360px; }
.tech-illustration { position: relative; height: 220px; border-bottom: 1px solid var(--line); }
.tech-illustration::before, .tech-illustration::after, .tech-illustration span { content: ""; position: absolute; display: block; }
.tech-llm::before { inset: 38px 18% 36px; border: 1px solid rgba(0,229,255,.45); border-radius: 50%; box-shadow: inset 0 0 30px rgba(0,229,255,.06); }
.tech-llm::after { width: 16px; height: 16px; border: 1px solid var(--lime); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 24px rgba(185,255,54,.25); }
.tech-llm span { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; }
.tech-llm span:nth-child(1) { left: 28%; top: 36%; }.tech-llm span:nth-child(2) { left: 68%; top: 62%; }.tech-llm span:nth-child(3) { left: 57%; top: 23%; background: var(--lime); }
.tech-doc::before { width: 128px; height: 162px; left: 50%; top: 18px; transform: translateX(-50%) rotate(-5deg); border: 1px solid rgba(255,255,255,.3); background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.11) 18px 19px); }
.tech-doc::after { width: 88px; height: 124px; left: calc(50% + 18px); top: 49px; border: 1px solid var(--cyan); transform: rotate(8deg); }
.tech-doc span { left: calc(50% - 48px); width: 55px; height: 2px; background: var(--lime); box-shadow: 0 12px 0 rgba(185,255,54,.45); }
.tech-doc span:nth-child(1){top:72px}.tech-doc span:nth-child(2){top:116px;width:83px}.tech-doc span:nth-child(3){top:160px;width:38px}
.tech-infra::before { width: 162px; height: 162px; left: 50%; top: 18px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgba(0,229,255,.4); }
.tech-infra::after { width: 74px; height: 74px; left: 50%; top: 62px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--lime); background: rgba(185,255,54,.03); }
.tech-infra span { width: 8px; height: 8px; border: 1px solid white; }
.tech-infra span:nth-child(1){left:22%;top:36px}.tech-infra span:nth-child(2){right:22%;top:120px}.tech-infra span:nth-child(3){left:30%;top:180px;border-color:var(--cyan)}

.projects { padding: 120px 0 0; }
.section-heading { display: grid; grid-template-columns: 80px 1fr auto; gap: 32px; align-items: end; padding-bottom: 54px; }
.section-heading p { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.project-list { border-top: 1px solid var(--line); }
.project-row { position: relative; display: grid; grid-template-columns: 80px minmax(300px, 1fr) 330px 120px; gap: 32px; align-items: center; padding: 42px max(32px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); transition: background .25s; outline: none; overflow: hidden; }
.project-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,229,255,.06), transparent 55%); opacity: 0; transition: opacity .25s; }
.project-row:hover::before, .project-row:focus-visible::before { opacity: 1; }
.project-number { align-self: start; color: var(--cyan); font: 11px ui-monospace, monospace; }
.project-main { position: relative; }
.project-main h3 { margin: 0 0 9px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.project-main p { margin: 0; max-width: 670px; color: var(--muted); }
.tech-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tech-list li { padding: 7px 10px; color: #b6c0c3; border: 1px solid var(--line); font: 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.project-signal { position: relative; height: 50px; }
.project-signal i { position: absolute; top: 50%; width: 7px; height: 7px; border: 1px solid #647278; border-radius: 50%; transform: translateY(-50%); transition: border-color .25s, background .25s; }
.project-signal i:nth-child(1){left:0}.project-signal i:nth-child(2){left:42%}.project-signal i:nth-child(3){right:0}
.project-signal::before { content:""; position:absolute; left:7px; right:7px; top:50%; height:1px; background:var(--line); }
.project-signal b { position:absolute; left:0; top:50%; width:12px; height:1px; background:var(--lime); transition:width .45s; }
.project-row:hover .project-signal b, .project-row:focus-visible .project-signal b { width:100%; }
.project-row:hover .project-signal i, .project-row:focus-visible .project-signal i { border-color:var(--lime); background:var(--bg); }

.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 760px; margin-top: 120px; border-top: 1px solid var(--line); }
.contact-copy, .form-wrap { min-width: 0; padding: clamp(70px, 6vw, 104px) clamp(32px, 5vw, 88px); }
.contact-copy { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.contact-code { color: var(--cyan); font: 11px ui-monospace, monospace; letter-spacing: .16em; }
.contact h2 { margin: 80px 0 25px; font-size: clamp(54px, 7vw, 104px); line-height: .88; letter-spacing: -.065em; }
.contact h2 span { color: var(--lime); }
.contact-copy > p { color: var(--muted); max-width: 460px; font-size: 19px; }
.contact-diagram { position:absolute; right:8%; bottom:70px; width:250px; height:130px; border:1px solid var(--line); transform:skewX(-14deg); opacity:.75; }
.contact-diagram::before { content:""; position:absolute; inset:18px; border:1px solid rgba(0,229,255,.3); }
.contact-diagram i { position:absolute; width:8px; height:8px; background:var(--cyan); }
.contact-diagram i:nth-child(1){left:-4px;top:-4px}.contact-diagram i:nth-child(2){right:-4px;top:50%}.contact-diagram i:nth-child(3){left:40%;bottom:-4px;background:var(--lime)}
.contact-diagram span { position:absolute; right:30px; bottom:25px; color:var(--lime); font:18px monospace; transform:skewX(14deg); }
.form-wrap { display: flex; align-items: center; background: var(--bg-soft); }
.contact-form { width: min(540px, 100%); margin-inline: auto; }
.field { margin-bottom: 25px; }
.field label { display: block; margin-bottom: 9px; color: #9caaae; font: 11px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; }
.field input, .field textarea { width: 100%; padding: 14px 0; color: white; background: transparent; border: 0; border-bottom: 1px solid #334047; border-radius: 0; outline: 0; resize: vertical; transition: border-color .2s; }
.field input::placeholder, .field textarea::placeholder { color: #526168; }
.field input:focus, .field textarea:focus { border-color: var(--cyan); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.submit-button { width: 100%; display:flex; align-items:center; justify-content:space-between; margin-top: 35px; padding: 18px 20px; color:#061014; background:var(--lime); border:0; cursor:pointer; font-size:12px; font-weight:780; text-transform:uppercase; letter-spacing:.1em; transition:background .2s, opacity .2s; }
.submit-button:hover { background: var(--cyan); }
.submit-button:disabled { opacity:.58; cursor:wait; }
.submit-arrow { font-size:21px; transition:transform .2s; }.submit-button:hover .submit-arrow{transform:translateX(5px)}
.protection-note { color:#65757a; font:10px ui-monospace, monospace; text-transform:uppercase; letter-spacing:.06em; text-align:center; }
.protection-note span { color:var(--cyan); }
.form-status { min-height: 48px; margin-top: 18px; color:var(--muted); font-size:14px; }
.form-status.is-success { color:var(--lime); }.form-status.is-error{color:var(--danger)}
.honey-field { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

.site-footer { min-height:100px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 max(32px, calc((100vw - 1180px) / 2)); border-top:1px solid var(--line); color:#7d8b90; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.site-footer a { color:var(--cyan); }.site-footer p:last-child{text-align:right}
.noscript { position:fixed; z-index:99; left:0; right:0; bottom:0; padding:12px; color:#061014; background:var(--lime); text-align:center; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes pulse-line { 0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1} }

@media (max-width: 980px) {
  :root { --shell: min(100% - 40px, 760px); }
  .site-header { grid-template-columns: 1fr auto; padding-inline:20px; }
  .site-nav { position:fixed; inset:var(--header-h) 0 auto; display:none; flex-direction:column; align-items:flex-start; gap:5px; padding:24px 20px 30px; background:rgba(6,10,13,.98); border-bottom:1px solid var(--line); }
  .site-nav.is-open { display:flex; }
  .site-nav a { width:100%; padding:13px 0; }
  .header-cta { display:none; }
  .menu-toggle { justify-self:end; display:block; width:42px; height:42px; padding:11px; border:1px solid var(--line); background:transparent; cursor:pointer; }
  .menu-toggle > span:not(.sr-only) { display:block; width:100%; height:1px; margin:5px 0; background:white; }
  .hero { padding-inline:20px; min-height:820px; }
  .hero-art { inset:0 0 10% 25%; opacity:.62; background-position:58% center; }
  .hero-content { width:100%; }
  .hero h1 { font-size:clamp(51px, 11vw, 84px); }
  .scroll-hint { left:20px; }
  .intro-section { grid-template-columns:46px 1fr; padding-block:90px; }
  .intro-section p { grid-column:2; }
  .expertise { grid-template-columns:1fr; }
  .expertise-item { min-height:430px; padding:40px 20px; border-right:0; border-bottom:1px solid var(--line); }
  .expertise-item:last-child{border-bottom:0}.tech-illustration{height:180px}
  .section-heading { grid-template-columns:46px 1fr; }.section-heading p{grid-column:2}
  .project-row { grid-template-columns:46px 1fr 100px; padding-inline:20px; }
  .tech-list { grid-column:2; }.project-signal{grid-column:3;grid-row:1 / span 2}
  .contact { grid-template-columns:1fr; }
  .contact-copy { min-height:630px; border-right:0; border-bottom:1px solid var(--line); }
  .contact-copy, .form-wrap { padding:70px 20px; }
  .form-wrap { min-height:700px; }
}

@media (max-width: 600px) {
  .hero { min-height:760px; padding-top:110px; }
  .hero-art { inset: 3% -40% 20% 18%; opacity:.44; }
  .hero-grid { background-size:56px 56px; }
  .hero h1 { font-size:clamp(46px, 15vw, 65px); }
  .hero-content > p { width:100%; margin-top:26px; font-size:16px; }
  .button { width:100%; }
  .intro-section h2, .section-heading h2 { font-size:42px; }
  .intro-section, .section-heading { grid-template-columns:1fr; gap:15px; }.intro-section p,.section-heading p{grid-column:1}
  .expertise-item{min-height:400px}.expertise h3{margin-top:38px}
  .projects { padding-top:90px; }
  .section-heading { padding-bottom:35px; }
  .project-row { grid-template-columns:34px 1fr; gap:18px; padding-block:34px; }
  .project-main h3 { font-size:25px; }
  .tech-list { grid-column:2; }.project-signal{display:none}
  .contact{margin-top:90px}.contact-copy{min-height:550px}.contact h2{margin-top:62px;font-size:58px}.contact-diagram{right:-70px;bottom:45px}
  .site-footer { grid-template-columns:1fr; gap:7px; padding-block:28px; }.site-footer p{margin:0}.site-footer p:last-child{text-align:left}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}
