:root {
  --bg: #05070a;
  --bg-soft: #090c11;
  --panel: #0c1016;
  --text: #f3f6f8;
  --muted: #8f98a5;
  --blue: #54b9ff;
  --blue-soft: #2a83bd;
  --line: rgba(255,255,255,.08);
  --max: 1400px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  text-align: left;
  background: linear-gradient(180deg, #040608 0%, #06090d 54%, #040608 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .015em;
  overflow-x: hidden;
  position: relative;
}

/* Fixed page artwork: uses assets/background.png while the header keeps assets/logo.svg.
*/
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  top: 82px;
  right: 0;
  bottom: 0;
  width: 50vw;
  pointer-events: none;
  background-image: url("assets/background.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% auto;
  opacity: .95;
}

/* Subtle fixed geometric line field behind the page. */
body::after {
  content: "";
  position: fixed;
  z-index: -3;
  inset: 82px 0 0 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(135deg, transparent 49.88%, rgba(119,155,184,.13) 50%, transparent 50.12%),
    linear-gradient(45deg, transparent 49.88%, rgba(119,155,184,.055) 50%, transparent 50.12%);
  background-size: 320px 320px, 420px 420px;
  mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 92%, transparent);
}
a { color: inherit; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 82px;
  padding: 0 max(28px, calc((100vw - var(--max))/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(3,5,8,.78);
  border-bottom: 1px solid rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}
.brand img { width: 86px; display:block; }
.main-nav { display:flex; gap: 38px; align-items:center; }
.main-nav a {
  position:relative;
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#c2c7cd;
  padding: 31px 0 27px;
}
.main-nav a::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:16px;
  height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transition:.25s ease;
}
.main-nav a:hover, .main-nav a.active { color:var(--blue); }
.main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); }
.menu-toggle { display:none; border:0; background:none; padding:10px; }
.menu-toggle span { display:block; width:24px; height:1px; background:#fff; margin:6px 0; }
.section { width:min(var(--max), calc(100% - 56px)); margin-inline:auto; }
.hero {
  min-height: 760px;
  padding-top: 170px;
  display:grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items:center;
  position:relative;
  isolation:isolate;
}
.hero-copy { max-width: 560px; position: relative; z-index: 1; }
.eyebrow { color:var(--blue); text-transform:uppercase; font-size:12px; letter-spacing:.22em; margin:0 0 18px; }
.hero h1 {
  margin:0;
  font-size: clamp(58px, 7vw, 100px);
  line-height:.92;
  font-weight:300;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.hero h1 span { font-size:.55em; vertical-align: .15em; letter-spacing:.1em; }
.hero-tagline {
  color:var(--blue);
  text-transform:uppercase;
  font-size: clamp(17px, 1.45vw, 24px);
  line-height:1.55;
  letter-spacing:.16em;
  margin: 30px 0 0;
}
.rule { width:350px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.12), transparent); margin:25px 0 22px; }
.hero-intro { color:var(--blue); text-transform:uppercase; letter-spacing:.18em; font-size:12px; line-height:1.7; }
.hero-intro span { color:#7c8ea0; }
.cta {
  display:inline-flex;
  align-items:center;
  gap:20px;
  margin-top:27px;
  padding:16px 22px;
  min-width:250px;
  justify-content:center;
  border:1px solid var(--blue);
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  transition:.25s ease;
  box-shadow: inset 0 0 0 0 rgba(84,185,255,.08), 0 0 0 rgba(84,185,255,0);
}
.cta:hover { background:rgba(84,185,255,.08); box-shadow:0 0 28px rgba(84,185,255,.09); transform:translateY(-2px); }
.cta span { color:var(--blue); }
.split-section, .work-section, .stack-section { padding:120px 0; border-top:1px solid var(--line); background:rgba(4,6,8,.46); }
.split-section { display:grid; grid-template-columns: 1fr 2fr; gap:80px; }
.section-kicker { color:var(--blue); text-transform:uppercase; letter-spacing:.17em; font-size:12px; }
.split-copy { max-width:800px; }
.split-copy h2, .work-card h2, .contact-inner h2 { font-weight:300; font-size:clamp(42px,5vw,76px); line-height:1; margin:0 0 30px; text-transform:uppercase; letter-spacing:.035em; }
.split-copy p, .work-card p, .contact-inner p { max-width:650px; color:#9aa3ad; font-size:16px; line-height:1.8; }
.work-card { margin-top:45px; min-height:420px; border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.006)); padding:60px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; overflow:hidden; position:relative; }
.work-label { color:var(--blue); text-transform:uppercase; font-size:11px; letter-spacing:.2em; }
.work-card h2 { font-size:clamp(38px,4.4vw,68px); margin-top:18px; }
.work-orb { width:280px; height:280px; border-radius:50%; border:1px solid rgba(84,185,255,.5); box-shadow: inset 0 0 70px rgba(84,185,255,.08), 0 0 80px rgba(84,185,255,.08); justify-self:center; position:relative; }
.work-orb::before, .work-orb::after { content:""; position:absolute; inset:20%; border:1px solid rgba(255,255,255,.22); transform:rotate(45deg); }
.work-orb::after { inset:35%; transform:rotate(0); border-color:rgba(84,185,255,.55); }
.stack-list { margin-top:45px; display:flex; flex-wrap:wrap; gap:14px; }
.stack-list span { border:1px solid var(--line); padding:13px 18px; color:#c6ccd3; font-size:13px; letter-spacing:.08em; background:rgba(255,255,255,.015); }
.contact-section { min-height:620px; display:flex; align-items:center; justify-content:flex-start; text-align:left; border-top:1px solid var(--line); background:rgba(4,6,8,.56); backdrop-filter: blur(2px); }
.contact-inner h2 span { color:var(--blue); }
.contact-inner p { margin:0; }
.contact-inner .cta { text-transform:none; letter-spacing:.08em; }
footer { text-align:left; border-top:1px solid var(--line); padding:30px max(28px, calc((100vw - var(--max))/2)) 36px; background:rgba(4,6,8,.70); }
footer p { color:var(--blue); text-transform:uppercase; letter-spacing:.18em; font-size:12px; }
footer p span { color:#7c8ea0; }
footer small { color:#68717c; font-size:11px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width: 980px) {
  .main-nav { position:fixed; inset:82px 0 auto 0; background:rgba(3,5,8,.98); padding:28px; flex-direction:column; align-items:flex-start; gap:0; transform:translateY(-130%); transition:.3s ease; border-bottom:1px solid var(--line); }
  .main-nav.open { transform:none; }
  .main-nav a { width:100%; padding:14px 0; }
  .main-nav a::after { bottom:8px; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; padding-top:145px; padding-bottom:70px; }
  body::before {
    width: 62vw;
    background-position: right center;
    background-size: contain;
    opacity: .24;
  }
  body::after { opacity: .16; }
  .split-section { grid-template-columns:1fr; gap:35px; }
  .work-card { grid-template-columns:1fr; gap:50px; }
}
@media (max-width: 620px) {
  .site-header { height:72px; padding:0 20px; }
  .brand img { width:70px; }
  .main-nav { top:72px; }
  .section { width:min(100% - 36px, var(--max)); }
  .hero { min-height:auto; padding-top:130px; }
  .hero h1 { font-size:clamp(49px,16vw,72px); }
  .hero h1 span { display:inline-block; }
  .hero-tagline { font-size:15px; letter-spacing:.11em; }
  .hero-intro br { display:none; }
  .rule { width:100%; }
  .split-section, .work-section, .stack-section { padding:85px 0; }
  .work-card { padding:30px; }
  .work-orb { width:210px; height:210px; }
  .contact-section { min-height:540px; }
  .contact-inner .cta { width:100%; min-width:0; word-break:break-word; font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}