:root {
  --ink: #11110f;
  --paper: #efeee8;
  --acid: #2f6bff;
  --line: rgba(239, 238, 232, 0.16);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --tech: "Audiowide", "Manrope", sans-serif;
}

@media (max-width: 760px) {
  .statement-section {
    min-height: auto;
    padding: 90px 20px 60px;
  }

  .statement-track {
    width: calc(100% + 40px);
    margin: 50px 0 40px -20px;
  }

  .statement-section h2 {
    font-size: clamp(39px, 11.5vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .statement-footer { margin-top: 55px; }
  .statement-orbit { width: 58px; height: 58px; }
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-launcher{position:fixed;right:24px;bottom:24px;z-index:1001;width:68px;height:68px;border:1px solid rgba(74,132,255,.7);border-radius:50%;background:rgba(8,10,15,.9);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 8px rgba(42,107,255,.06),0 0 38px rgba(42,107,255,.28);backdrop-filter:blur(16px);transition:transform .25s,border-color .25s}
.ai-launcher:hover{transform:translateY(-4px);border-color:#fff}
.ai-launcher-mark{font-family:"Audiowide",sans-serif;font-size:17px;letter-spacing:-.12em;margin-left:-2px}
.ai-launcher-label{position:absolute;right:54px;top:50%;transform:translateY(-50%);min-width:116px;padding:9px 17px 9px 11px;border:1px solid rgba(255,255,255,.13);border-right:0;background:rgba(8,10,15,.88);display:grid;gap:3px;text-align:left;box-shadow:-12px 0 28px rgba(0,0,0,.18);backdrop-filter:blur(12px);pointer-events:none;transition:opacity .2s,transform .2s}
.ai-launcher-label b{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.15em;color:#efeee8;white-space:nowrap}.ai-launcher-label small{font-family:"Manrope",sans-serif;font-size:8px;font-weight:500;color:rgba(239,238,232,.45);white-space:nowrap}.ai-launcher[aria-expanded="true"] .ai-launcher-label{opacity:0;transform:translate(8px,-50%)}
.ai-launcher i{position:absolute;right:6px;top:7px;width:8px;height:8px;border-radius:50%;background:#3478ff;box-shadow:0 0 12px #3478ff;animation:availabilityPulse 2.6s ease-in-out infinite}
.ai-chat{position:fixed;right:24px;bottom:105px;z-index:1000;width:min(390px,calc(100vw - 32px));height:min(610px,calc(100vh - 135px));border:1px solid rgba(255,255,255,.16);background:rgba(8,10,15,.97);color:#efeee8;box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 50px rgba(31,101,255,.13);backdrop-filter:blur(22px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom right;transition:opacity .25s,transform .25s,visibility .25s}
.ai-chat.is-open{opacity:1;visibility:visible;transform:none}
.ai-chat-head{min-height:78px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(105deg,rgba(33,100,255,.14),transparent 55%)}
.ai-chat-head>div{display:flex;align-items:center;gap:12px}.ai-chat-logo{width:42px;height:42px;border:1px solid #3478ff;display:grid;place-items:center;font-family:"Audiowide",sans-serif;font-size:12px;box-shadow:inset 0 0 18px rgba(52,120,255,.18)}
.ai-chat-head p{display:grid;gap:5px;margin:0}.ai-chat-head strong{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em}.ai-chat-head small{font-family:"DM Mono",monospace;font-size:8px;color:rgba(239,238,232,.55);text-transform:uppercase;letter-spacing:.12em}.ai-chat-head small i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#3478ff;box-shadow:0 0 8px #3478ff}
.ai-close{border:0;background:transparent;color:rgba(255,255,255,.65);font-size:26px;font-weight:200;cursor:pointer;padding:5px 8px}
.ai-messages{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#3478ff transparent}
.ai-message{max-width:86%;padding:12px 14px;font-family:"Manrope",sans-serif;font-size:13px;line-height:1.55;white-space:pre-wrap}.ai-message.is-bot,.ai-message.is-thinking{align-self:flex-start;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045)}.ai-message.is-user{align-self:flex-end;background:#2868ee;color:#fff}.ai-message.is-thinking{color:rgba(239,238,232,.5)}.ai-message.is-error{border-color:rgba(52,120,255,.35)}
.ai-suggestions{padding:0 16px 12px;display:flex;gap:7px;overflow-x:auto}.ai-suggestions.is-hidden{display:none}.ai-suggestions button{flex:0 0 auto;border:1px solid rgba(52,120,255,.35);background:transparent;color:rgba(239,238,232,.76);padding:8px 10px;font-family:"DM Mono",monospace;font-size:8px;cursor:pointer}.ai-suggestions button:hover{background:rgba(52,120,255,.12);color:#fff}
.ai-form{margin:0 16px;display:grid;grid-template-columns:1fr 44px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.ai-form input{min-width:0;border:0;background:transparent;color:#fff;padding:0 13px;font-family:"Manrope",sans-serif;font-size:13px;outline:0}.ai-form input::placeholder{color:rgba(239,238,232,.38)}.ai-form button{width:44px;height:44px;border:0;border-left:1px solid rgba(255,255,255,.13);background:#2868ee;color:#fff;font-size:19px;cursor:pointer}.ai-form.is-loading button{opacity:.45;pointer-events:none}
.ai-disclaimer{margin:10px 16px 12px;text-align:center;color:rgba(239,238,232,.32);font-family:"DM Mono",monospace;font-size:6px;letter-spacing:.05em}
@media(max-width:760px){.ai-launcher{right:16px;bottom:16px;width:60px;height:60px}.ai-launcher-label{right:48px;min-width:105px;padding:8px 14px 8px 10px}.ai-launcher-label small{font-size:7px}.ai-chat{right:16px;bottom:88px;width:calc(100vw - 32px);height:min(570px,calc(100dvh - 110px))}.ai-message{font-size:12px}}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 82px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
}

a {
  color: inherit;
  text-decoration: none;
}

.a-options.legacy-options { display: none; }

.statement-section {
  position: relative;
  min-height: 100vh;
  padding: 7vw 3vw 5vw;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(22, 140, 255, 0.5);
}

.statement-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(17, 17, 15, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 15, 0.08) 1px, transparent 1px);
  background-size: 25vw 100%, 100% 25vh;
}

.statement-kicker,
.statement-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 9px var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.statement-track {
  position: relative;
  z-index: 1;
  width: calc(100% + 6vw);
  margin: 6vw 0 4vw -3vw;
  display: flex;
  overflow: hidden;
  border-block: 1px solid rgba(17, 17, 15, 0.2);
  color: #168cff;
  font: 500 clamp(11px, 1.1vw, 17px) var(--mono);
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.statement-track span {
  flex: none;
  min-width: 100%;
  padding: 12px 0;
  animation: statement-scroll 18s linear infinite;
}

.statement-section h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--tech);
  font-size: clamp(48px, 8.4vw, 145px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.statement-section h2 > span { display: block; }

.statement-section h2 em {
  color: #168cff;
  font-style: normal;
  text-shadow: 0 0 22px rgba(22, 140, 255, 0.2);
}

.statement-section .statement-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(17, 17, 15, 0.72);
}

.statement-footer {
  margin-top: 5vw;
  padding-top: 24px;
  border-top: 1px solid rgba(17, 17, 15, 0.24);
}

.statement-footer p {
  width: min(430px, 70vw);
  margin: 0;
  font: 500 clamp(13px, 1.15vw, 18px)/1.55 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.statement-orbit {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 15, 0.35);
  border-radius: 50%;
  color: #168cff;
  font: 500 10px var(--tech);
}

.statement-orbit i {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -4px;
  border-radius: 50%;
  background: #168cff;
  box-shadow: 0 0 10px rgba(22, 140, 255, 0.7);
}

@keyframes statement-scroll { to { transform: translateX(-100%); } }

.selected-work {
  position: relative;
  padding: 9vw 3vw 8vw;
  overflow: hidden;
  background: #0b0c0d;
  color: var(--paper);
}

.work-heading {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: start;
  gap: 3vw;
  margin-bottom: 6vw;
}

.work-heading > span,
.project-meta {
  font: 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-heading > span:last-child { text-align: right; }

.work-heading h2 {
  margin: 0;
  font: 400 clamp(48px, 7.4vw, 126px)/0.9 var(--tech);
  letter-spacing: -0.045em;
}

.work-heading h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px #168cff;
  text-shadow: 0 0 22px rgba(22, 140, 255, 0.24);
}

.featured-project { border-top: 1px solid rgba(239, 238, 232, 0.22); }

.project-meta {
  display: grid;
  grid-template-columns: .83fr 1.17fr auto;
  gap: 20px;
  padding: 18px 0;
  color: rgba(239, 238, 232, 0.62);
}

.project-meta span:first-child { color: var(--paper); }

.project-stage {
  position: relative;
  min-height: 64vw;
  max-height: 900px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 55% 42%, rgba(22, 140, 255, 0.14), transparent 34%), #151718;
  border: 1px solid rgba(239, 238, 232, 0.12);
}

.project-number {
  position: absolute;
  left: -1vw;
  top: -3vw;
  color: transparent;
  font: 400 28vw/1 var(--tech);
  -webkit-text-stroke: 1px rgba(239, 238, 232, 0.06);
}

.browser-frame {
  position: relative;
  z-index: 1;
  width: min(76vw, 1180px);
  overflow: hidden;
  background: #121212;
  border: 1px solid rgba(239, 238, 232, 0.28);
  border-radius: 9px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(22, 140, 255, 0.08);
  transform: rotate(-2deg);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}

.project-stage:hover .browser-frame { transform: rotate(0deg) scale(1.015); }

.browser-bar {
  height: 34px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #202223;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.browser-bar i:first-child { background: #ff724f; }
.browser-bar span { margin-left: auto; margin-right: auto; color: rgba(255,255,255,.45); font: 7px var(--mono); letter-spacing: .1em; }

.rivera-preview {
  position: relative;
  min-height: 45vw;
  max-height: 650px;
  overflow: hidden;
  background: linear-gradient(115deg, rgba(0,0,0,.92) 0 38%, rgba(0,0,0,.25) 68%), linear-gradient(155deg, #26292a, #0c0d0d 65%);
}

.rivera-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 25% 100%, 100% 33.33%;
  pointer-events: none;
}

.rivera-nav {
  position: relative;
  z-index: 3;
  height: 64px;
  padding: 0 3.5%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-family: var(--sans);
}

.rivera-nav b { color: #e99430; font-size: clamp(12px, 1.4vw, 22px); letter-spacing: .08em; }
.rivera-nav span { margin-left: 6px; font-size: clamp(7px, .7vw, 11px); letter-spacing: .18em; }
.rivera-nav small { margin-left: auto; font: clamp(5px, .55vw, 9px) var(--mono); letter-spacing: .12em; }

.rivera-copy { position: relative; z-index: 2; padding: 8% 7%; }
.rivera-copy small { color: #e99430; font: clamp(5px, .65vw, 10px) var(--mono); letter-spacing: .16em; }
.rivera-copy strong { display: block; margin-top: 18px; font: 800 clamp(29px, 6.3vw, 98px)/.82 var(--sans); letter-spacing: -.075em; }
.rivera-copy strong em { color: #e99430; font-style: normal; }
.rivera-copy p { font-size: clamp(8px, 1vw, 16px); color: rgba(255,255,255,.65); }

.rivera-land { position: absolute; z-index: 1; right: -4%; bottom: -10%; width: 58%; height: 82%; transform: skewX(-12deg); background: linear-gradient(145deg, #454036, #171817 62%); clip-path: polygon(28% 0,100% 17%,100% 100%,0 100%); }
.rivera-land i { position: absolute; left: 12%; top: 28%; width: 42%; height: 30%; border: 12px solid #d48126; border-radius: 50% 50% 25% 25%; transform: rotate(-18deg); opacity: .75; }
.rivera-land b { position: absolute; left: 42%; top: 8%; width: 12px; height: 72%; background: #d48126; transform: rotate(27deg); }
.rivera-tag { position: absolute; z-index: 3; right: 3%; bottom: 4%; color: #e99430; font: 7px var(--mono); letter-spacing: .12em; }

.project-link {
  position: absolute;
  z-index: 3;
  right: 4vw;
  bottom: 4vw;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50%;
  background: #168cff;
  color: white;
  font: 9px var(--mono);
  text-transform: uppercase;
}

.project-link b { font-size: 18px; }

.project-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8vw;
  padding: 4vw 0 0 24vw;
}

.project-summary p { margin: 0; font: 500 clamp(18px, 2.1vw, 34px)/1.3 var(--sans); }
.project-summary div { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.project-summary span { padding: 12px 0; border-top: 1px solid rgba(239,238,232,.2); color: rgba(239,238,232,.6); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.expertise-section {
  position: relative;
  padding: 8vw 3vw 5vw;
  overflow: hidden;
  background: #101d36;
  color: var(--paper);
}

.expertise-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background: radial-gradient(circle at 72% 15%, rgba(39,216,242,.2), transparent 24%), linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,.08) 50%, transparent 50.05%);
}

.expertise-head,
.expertise-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font: 9px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.expertise-head p {
  width: min(380px, 40vw);
  margin: 0;
  color: rgba(239,238,232,.62);
  font: 500 clamp(13px, 1.1vw, 17px)/1.55 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.expertise-section > h2 {
  position: relative;
  z-index: 2;
  margin: 6vw 0 5vw;
  font: 400 clamp(58px, 11vw, 180px)/.82 var(--tech);
  letter-spacing: -.06em;
}

.expertise-section > h2 em {
  color: #27d8f2;
  font-style: normal;
  text-shadow: 0 0 30px rgba(39,216,242,.18);
}

.expertise-list { position: relative; z-index: 2; border-top: 1px solid rgba(239,238,232,.25); }

.expertise-row {
  position: relative;
  min-height: 150px;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 7vw minmax(280px, 1.35fr) minmax(250px, .65fr) 40px;
  align-items: center;
  gap: 2vw;
  overflow: hidden;
  border-bottom: 1px solid rgba(239,238,232,.25);
  transition: padding 450ms cubic-bezier(.2,.8,.2,1), color 300ms ease;
}

.expertise-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(102%);
  transition: transform 450ms cubic-bezier(.2,.8,.2,1);
}

.expertise-row:hover { padding-left: 2vw; padding-right: 2vw; color: #101d36; }
.expertise-row:hover::before { transform: translateY(0); }

.expertise-number,
.expertise-row h3,
.expertise-row p,
.expertise-arrow { position: relative; z-index: 2; }

.expertise-number { color: #27d8f2; font: 9px var(--mono); }
.expertise-row:hover .expertise-number { color: #168cff; }

.expertise-row h3 {
  margin: 0;
  font: 400 clamp(29px, 4.3vw, 72px)/1 var(--tech);
  letter-spacing: -.035em;
}

.expertise-row p { max-width: 440px; margin: 0; color: rgba(239,238,232,.58); font: 500 clamp(12px, 1vw, 16px)/1.55 var(--sans); }
.expertise-row:hover p { color: rgba(16,29,54,.68); }
.expertise-arrow { font-size: 26px; transition: transform 350ms ease; }
.expertise-arrow { width: 22px; height: 22px; }
.expertise-arrow::before,.expertise-arrow::after { content: ""; position: absolute; }
.expertise-arrow::before { left: 3px; bottom: 4px; width: 17px; height: 1.5px; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }
.expertise-arrow::after { right: 2px; top: 2px; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.expertise-row:hover .expertise-arrow { transform: rotate(45deg); color: #168cff; }

.expertise-visual {
  position: absolute;
  z-index: 1;
  right: 8%;
  top: 50%;
  width: 180px;
  height: 115px;
  opacity: 0;
  pointer-events: none;
  transform: translate(25px,-50%) rotate(8deg) scale(.85);
  transition: opacity 350ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}

.expertise-row:hover .expertise-visual { opacity: .18; transform: translate(0,-50%) rotate(-5deg) scale(1); }
.expertise-visual { border: 2px solid #168cff; }
.visual-design i { position: absolute; border: 1px solid #168cff; }
.visual-design i:first-child { inset: 12px 45px 45px 12px; }
.visual-design i:nth-child(2) { inset: 52px 12px 12px 72px; }
.visual-design b { position: absolute; right: 18px; top: 15px; color: #168cff; font: 18px var(--tech); }
.visual-code { display: grid; place-items: center; border-radius: 50%; }
.visual-code span { color: #168cff; font: 27px var(--mono); }
.visual-code i { position: absolute; inset: 14px; border: 1px dashed #168cff; border-radius: 50%; }
.visual-mobile { width: 70px; right: 14%; border-radius: 12px; display: grid; place-items: center; }
.visual-mobile i { position: absolute; top: 7px; width: 20px; height: 2px; background: #168cff; }
.visual-mobile b { color: #168cff; font: 16px var(--tech); }
.visual-growth { display: flex; align-items: end; gap: 9px; padding: 16px; border: 0; border-bottom: 2px solid #168cff; }
.visual-growth i { width: 22px; background: #168cff; }
.visual-growth i:nth-child(1) { height: 25%; }.visual-growth i:nth-child(2) { height: 48%; }.visual-growth i:nth-child(3) { height: 78%; }
.visual-growth b { position: absolute; right: 5px; top: 0; color: #168cff; font-size: 35px; }

.expertise-foot { margin-top: 4vw; padding-top: 20px; border-top: 1px solid rgba(239,238,232,.14); color: rgba(239,238,232,.48); }

.why-section {
  position: relative;
  padding: 8vw 3vw 0;
  overflow: hidden;
  background: #e9e8e2;
  color: var(--ink);
}

.why-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(17,17,15,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,15,.08) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
}

.why-label {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 25px;
  font: 8px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.why-label i { height: 1px; background: rgba(17,17,15,.24); }

.why-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.7fr .55fr;
  align-items: end;
  gap: 8vw;
  margin: 7vw 0 8vw;
}

.why-intro h2 {
  margin: 0;
  font: 400 clamp(57px, 10vw, 165px)/.86 var(--tech);
  letter-spacing: -.065em;
}

.why-intro h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px #168cff;
}

.why-note { padding-top: 18px; border-top: 1px solid rgba(17,17,15,.35); }
.why-note span { color: #168cff; font: 8px var(--mono); letter-spacing: .13em; }
.why-note p { margin: 20px 0 0; font: 500 clamp(14px, 1.2vw, 18px)/1.55 var(--sans); }

.why-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .8fr 1.4fr;
  gap: 9vw;
  padding-bottom: 7vw;
}

.why-monogram {
  position: sticky;
  top: 30px;
  align-self: start;
  min-height: 34vw;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101d36;
  border-radius: 2px;
  box-shadow: 20px 25px 0 rgba(22,140,255,.12);
}

.why-monogram::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border: 1px solid rgba(39,216,242,.25); border-radius: 50%; }
.why-monogram::after { content: ""; position: absolute; width: 58%; aspect-ratio: 1; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; animation: orbit-spin 18s linear infinite; }
.why-monogram img { position: relative; z-index: 1; width: 78%; filter: drop-shadow(0 0 24px rgba(22,140,255,.22)); }
.why-monogram span { position: absolute; left: 20px; bottom: 20px; color: rgba(255,255,255,.55); font: 7px/1.5 var(--mono); letter-spacing: .15em; }

.why-points { border-top: 1px solid rgba(17,17,15,.28); }
.why-points article { min-height: 150px; padding: 30px 0; display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid rgba(17,17,15,.28); transition: padding 300ms ease; }
.why-points article:hover { padding-left: 18px; }
.why-points article > span { color: #168cff; font: 9px var(--mono); }
.why-points h3 { margin: 0 0 14px; font: 400 clamp(22px, 2.5vw, 42px)/1 var(--tech); letter-spacing: -.03em; }
.why-points p { max-width: 580px; margin: 0; color: rgba(17,17,15,.65); font: 500 clamp(13px, 1vw, 16px)/1.6 var(--sans); }

.why-marquee { position: relative; z-index: 1; width: calc(100% + 6vw); margin-left: -3vw; display: flex; overflow: hidden; background: #168cff; color: white; font: 500 clamp(11px, 1vw, 15px) var(--mono); letter-spacing: .14em; white-space: nowrap; }
.why-marquee span { flex: none; min-width: 100%; padding: 15px 0; animation: statement-scroll 20s linear infinite reverse; }

.process-section {
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.3fr;
  gap: 8vw;
  padding: 9vw 3vw;
  overflow: hidden;
  background: #0b0c0d;
  color: var(--paper);
}

.process-section::before {
  content: "";
  position: absolute;
  left: 38%;
  top: -20%;
  width: 50vw;
  aspect-ratio: 1;
  border: 1px solid rgba(22,140,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(22,140,255,.06) inset;
}

.process-side {
  position: sticky;
  top: 60px;
  align-self: start;
}

.process-side > span { color: rgba(239,238,232,.58); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.process-side h2 { margin: 5vw 0 35px; font: 400 clamp(48px, 6.5vw, 108px)/.88 var(--tech); letter-spacing: -.055em; }
.process-side h2 em { color: #27d8f2; font-style: normal; text-shadow: 0 0 25px rgba(39,216,242,.2); }
.process-side > p { width: min(370px, 90%); color: rgba(239,238,232,.58); font: 500 clamp(13px, 1.1vw, 17px)/1.6 var(--sans); }

.process-status { margin-top: 5vw; display: flex; align-items: center; gap: 18px; color: rgba(239,238,232,.55); font: 8px/1.55 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.process-status i { position: relative; width: 58px; height: 58px; border: 1px solid rgba(239,238,232,.25); border-radius: 50%; }
.process-status i::before { content: ""; position: absolute; inset: 8px; border: 1px dashed #168cff; border-radius: 50%; animation: orbit-spin 8s linear infinite; }
.process-status i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #27d8f2; transform: translate(-50%,-50%); box-shadow: 0 0 10px #27d8f2; }

.process-steps { position: relative; border-top: 1px solid rgba(239,238,232,.22); }
.process-steps::before { content: ""; position: absolute; left: 37px; top: 0; bottom: 0; width: 1px; background: linear-gradient(#168cff, rgba(22,140,255,.06)); }

.process-step {
  position: relative;
  min-height: 290px;
  padding: 45px 28px 45px 105px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(239,238,232,.22);
  transition: background 400ms ease, padding 400ms cubic-bezier(.2,.8,.2,1);
}

.process-step::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,140,255,.17), transparent 72%); opacity: 0; transition: opacity 400ms ease; }
.process-step:hover { padding-left: 125px; }
.process-step:hover::before { opacity: 1; }

.step-number { position: absolute; z-index: 2; left: 24px; top: 46px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #0b0c0d; border: 1px solid #168cff; color: #27d8f2; font: 7px var(--mono); box-shadow: 0 0 0 7px #0b0c0d; }
.step-copy { position: relative; z-index: 1; }
.step-copy small { color: #27d8f2; font: 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.step-copy h3 { margin: 18px 0; font: 400 clamp(38px, 5.2vw, 88px)/.9 var(--tech); letter-spacing: -.045em; }
.step-copy p { max-width: 520px; margin: 0; color: rgba(239,238,232,.55); font: 500 clamp(12px, 1vw, 16px)/1.6 var(--sans); }
.step-symbol { position: relative; z-index: 1; color: transparent; font: 400 clamp(55px, 8vw, 130px)/1 var(--tech); -webkit-text-stroke: 1px rgba(39,216,242,.25); transition: color 350ms ease, transform 450ms ease; }
.process-step:hover .step-symbol { color: rgba(22,140,255,.12); transform: rotate(-8deg) scale(1.08); }

.contact-section {
  position: relative;
  min-height: 100vh;
  padding: 3vw 3vw 0;
  overflow: hidden;
  background: #168cff;
  color: #07101f;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 25vw 100%, 100% 25vh;
}

.contact-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(7,16,31,.3);
  font: 8px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.contact-top span:nth-child(2) { text-align: center; }.contact-top span:last-child { text-align: right; }

.contact-title-wrap { position: relative; z-index: 1; padding: 6vw 0 5vw; }
.contact-title-wrap h2 { margin: 0; font: 400 clamp(61px, 13vw, 215px)/.75 var(--tech); letter-spacing: -.075em; }
.contact-title-wrap h2 span { display: block; }
.contact-title-wrap h2 span:nth-child(2) { text-align: right; color: transparent; -webkit-text-stroke: 2px #07101f; }
.contact-title-wrap h2 .contact-together { font-size: 1em; line-height: .75; letter-spacing: -.075em; text-align: right; color: #e9e8e2; -webkit-text-stroke: 1px #07101f; }
.contact-title-wrap h2 em { color: #e9e8e2; font-style: normal; -webkit-text-stroke: 0; text-shadow: 0 0 25px rgba(255,255,255,.3); }

.contact-orbit { position: absolute; left: 45%; top: 31%; width: 9vw; min-width: 85px; max-width: 145px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(7,16,31,.45); border-radius: 50%; font: 13px var(--tech); }
.contact-orbit::before { content: ""; position: absolute; inset: 17%; border: 1px dashed rgba(7,16,31,.45); border-radius: 50%; animation: orbit-spin 12s linear infinite; }
.contact-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e9e8e2; box-shadow: 0 0 10px white; }
.contact-orbit i:first-child { top: -4px; }.contact-orbit i:nth-child(2) { bottom: 7%; right: 7%; }

.contact-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 10vw;
  padding: 5vw 0 7vw;
  border-top: 1px solid rgba(7,16,31,.3);
}

.contact-intro > span { font: 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.contact-intro > p { margin: 28px 0 55px; font: 500 clamp(19px, 2.2vw, 35px)/1.3 var(--sans); letter-spacing: -.02em; }
.contact-signal { display: flex; align-items: center; gap: 15px; font: 8px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.contact-signal i { width: 10px; height: 10px; border-radius: 50%; background: #e9e8e2; box-shadow: 0 0 0 6px rgba(233,232,226,.22), 0 0 15px white; animation: availability-blink 3.2s ease-in-out infinite; }

.contact-form { display: grid; }
.contact-form label { position: relative; display: grid; grid-template-columns: 190px 1fr; align-items: center; min-height: 84px; border-top: 1px solid rgba(7,16,31,.32); }
.contact-form label span { font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.contact-form input,.contact-form textarea { width: 100%; padding: 20px 0; resize: none; border: 0; outline: 0; background: transparent; color: #07101f; font: 500 clamp(17px,1.5vw,24px) var(--sans); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: rgba(7,16,31,.46); }
.contact-form label:focus-within { border-color: #e9e8e2; }

.send-project { justify-self: end; width: 150px; height: 150px; margin-top: 35px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 50%; background: #07101f; color: #e9e8e2; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform 300ms ease, background 300ms ease; }
.send-project:hover { transform: scale(1.06); background: #e9e8e2; color: #07101f; }
.send-project:disabled { cursor: wait; opacity: .72; transform: none; }
.send-project b { font-size: 21px; }
.form-note { justify-self: end; margin: 15px 0 0; font: 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

.form-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  min-width: 390px;
  padding: 22px 25px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #07101f;
  color: var(--paper);
  border: 1px solid rgba(39,216,242,.5);
  box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 24px rgba(39,216,242,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(25px);
  transition: opacity 350ms ease, transform 350ms cubic-bezier(.2,.8,.2,1);
}

.form-toast.is-visible { opacity: 1; transform: translateY(0); }
.form-toast i { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #168cff; color: white; font-style: normal; box-shadow: 0 0 12px rgba(39,216,242,.45); }
.form-toast div { display: grid; gap: 5px; }
.form-toast strong { color: #27d8f2; font: 500 9px var(--tech); letter-spacing: .12em; }
.form-toast span { color: rgba(239,238,232,.7); font: 9px var(--mono); }

.site-footer { position: relative; z-index: 2; min-height: 110px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; border-top: 1px solid rgba(7,16,31,.35); font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-footer > span { text-align: center; }.site-footer > a:last-child { text-align: right; }
.footer-brand { display: flex; align-items: center; gap: 10px; font: 400 10px var(--tech); }
.footer-brand img { width: 48px; height: 38px; object-fit: contain; }

.end-screen {
  position: relative;
  min-height: 58vh;
  padding: 68px 3vw 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #080a0d;
  color: var(--paper);
  border-top: 1px solid rgba(239,238,232,.18);
}

.end-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(22,140,255,.2), transparent 29%), linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,.08) 50%, transparent 50.05%);
}

.end-rail {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid rgba(239,238,232,.16);
  color: #27d8f2;
  font: 500 8px var(--mono);
  letter-spacing: .16em;
  white-space: nowrap;
}

.end-rail span { flex: none; min-width: 100%; padding: 12px 0; animation: statement-scroll 22s linear infinite; }

.end-meta,
.end-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font: 7px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.end-meta span:nth-child(2),.end-bottom span:nth-child(2) { text-align: center; }
.end-meta span:last-child,.end-bottom span:last-child { text-align: right; }

.end-center {
  position: relative;
  z-index: 1;
  width: min(760px, 72vw);
  margin: auto;
  display: grid;
  place-items: center;
  text-align: center;
}

.end-center img {
  position: relative;
  z-index: 2;
  width: min(17vw, 230px);
  filter: drop-shadow(0 0 35px rgba(22,140,255,.3));
}

.end-center h2 {
  position: relative;
  z-index: 2;
  margin: -1vw 0 14px;
  font: 400 clamp(34px, 4.4vw, 72px)/.88 var(--tech);
  letter-spacing: -.055em;
}

.end-center h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px #27d8f2; }
.end-center p { position: relative; z-index: 2; margin: 0; color: rgba(239,238,232,.55); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

.end-rings,.end-rings i { position: absolute; border: 1px solid rgba(22,140,255,.2); border-radius: 50%; }
.end-rings { width: min(34vw, 450px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: orbit-spin 36s linear infinite; }
.end-rings i:first-child { inset: 13%; border-style: dashed; }.end-rings i:nth-child(2) { inset: 29%; border-color: rgba(255,255,255,.16); }.end-rings i:nth-child(3) { width: 9px; height: 9px; left: 50%; top: -5px; background: #168cff; border: 0; box-shadow: 0 0 14px #27d8f2; }

.end-return {
  position: absolute;
  z-index: 3;
  right: 4vw;
  bottom: 105px;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(239,238,232,.35);
  border-radius: 50%;
  font: 8px var(--mono);
  text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease;
}
.end-return:hover { background: #168cff; color: white; border-color: #168cff; }
.end-return b { color: #27d8f2; font-size: 18px; }.end-return:hover b { color: white; }

.end-bottom { padding-top: 22px; border-top: 1px solid rgba(239,238,232,.16); color: rgba(239,238,232,.52); }
.end-bottom b { color: inherit; font: inherit; }
.end-bottom i { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #27d8f2; box-shadow: 0 0 8px #27d8f2; animation: availability-blink 3.2s ease-in-out infinite; }

.copyright-bottom {
  position: relative;
  z-index: 2;
  margin: 18px -3vw -24px;
  padding: 13px 3vw;
  border-top: 1px solid rgba(239,238,232,.1);
  background: #050608;
  color: rgba(239,238,232,.42);
  text-align: center;
  font: 7px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.copyright-bottom b { color: inherit; font: inherit; }

.compact-ending {
  min-height: 150px;
  padding: 28px 3vw;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr auto;
  align-items: center;
  gap: 3vw;
  background: #080a0d;
  color: rgba(239,238,232,.58);
  border-top: 1px solid rgba(239,238,232,.16);
  font: 7px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.compact-brand { display: flex; align-items: center; gap: 10px; color: var(--paper); font: 400 9px var(--tech); }
.compact-brand img { width: 52px; height: 42px; object-fit: contain; }
.compact-copyright { text-align: center; }
.compact-copyright b { color: inherit; font: inherit; }
.compact-status { text-align: right; }
.compact-status i { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #27d8f2; box-shadow: 0 0 8px #27d8f2; animation: availability-blink 3.2s ease-in-out infinite; }
.compact-return { padding: 14px 17px; border: 1px solid rgba(239,238,232,.25); color: var(--paper); white-space: nowrap; transition: background 250ms ease, border-color 250ms ease; }
.compact-return:hover { background: #168cff; border-color: #168cff; }
.compact-return b { margin-left: 8px; color: #27d8f2; font-size: 13px; }.compact-return:hover b { color: white; }

.noise {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  padding: 0 3vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: height 350ms ease, background 350ms ease, backdrop-filter 350ms ease;
}

.site-header.is-scrolled {
  height: 68px;
  background: rgba(11, 12, 13, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(239, 238, 232, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  gap: 3px;
}

.brand span {
  display: inline-block;
}

.site-header .brand .brand-amp {
  color: #2f6bff !important;
}

.brand .brand-a {
  transform: translateX(-5px);
}

.brand .brand-o {
  transform: translateX(5px);
}

.brand-logo-crop {
  width: 54px;
  height: 46px;
  display: grid !important;
  place-items: center;
  overflow: visible;
}

.brand-logo-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 132, 255, 0.2));
}

.real-logo-mark {
  width: min(32vw, 430px);
  height: min(38vh, 390px);
  margin: -5px auto 4px;
  overflow: visible;
  display: grid;
  place-items: center;
  transform: translateX(-74px);
}

.real-logo-mark img {
  width: 122%;
  max-width: none;
  filter: drop-shadow(0 0 28px rgba(0, 132, 255, 0.22));
}

.mini-circuit-a {
  width: 25px;
  height: 29px;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(47, 107, 255, 0.55));
}

.mini-a-outline,
.mini-a-main,
.mini-a-signal {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

.mini-a-outline { stroke: var(--paper); stroke-width: 27; }
.mini-a-main { stroke: var(--acid); stroke-width: 18; }
.mini-a-signal { stroke: #a9c3ff; stroke-width: 8; }

.mini-o {
  position: relative;
  z-index: 1;
  color: transparent;
  font-size: 32px;
  line-height: 1;
  -webkit-text-stroke: 1px var(--paper);
}

.mini-o::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 1px 2px;
  border-radius: 50%;
  background: rgba(239, 238, 232, 0.38);
  filter: blur(8px);
  animation: mini-o-pulse 4s ease-in-out infinite;
}

@keyframes mini-o-pulse {
  50% { opacity: 0.55; transform: scale(1.18); }
}

@keyframes circuit-pulse {
  to { stroke-dashoffset: -544; }
}

.brand-word {
  position: relative;
  margin-left: 9px;
  padding-bottom: 5px;
  display: inline-flex;
  gap: 3px;
  font: 400 11px var(--tech);
  letter-spacing: 0.08em;
}

.brand-word::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--acid) 0 42%, rgba(239, 238, 232, 0.35) 42% 100%);
}

.brand-word b {
  color: transparent;
  background: linear-gradient(115deg, #ffffff 0%, #27d8f2 50%, #168cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 400;
}

.brand-word i {
  color: transparent;
  background: linear-gradient(115deg, #27d8f2 0%, #168cff 55%, #2f6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
  font-weight: 400;
}

nav {
  display: flex;
  gap: 36px;
  font: 12px var(--mono);
  text-transform: uppercase;
}

nav a {
  transition: opacity 200ms ease;
}

nav a:hover {
  opacity: 0.55;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #27d8f2;
  outline-offset: 5px;
}

.js-ready .reveal-item {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1), transform 800ms cubic-bezier(.2,.8,.2,1);
}

.js-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .reveal-item:nth-child(2) { transition-delay: 70ms; }
.js-ready .reveal-item:nth-child(3) { transition-delay: 140ms; }
.js-ready .reveal-item:nth-child(4) { transition-delay: 210ms; }

.availability {
  justify-self: end;
  font: 11px var(--mono);
  text-transform: uppercase;
}

.availability i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #168cff;
  box-shadow: 0 0 0 5px rgba(22, 140, 255, 0.18);
  animation: availability-blink 3.2s ease-in-out infinite;
}

@keyframes availability-blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(22, 140, 255, 0.18), 0 0 10px rgba(39, 216, 242, 0.72);
  }
  50% {
    opacity: 0.22;
    box-shadow: 0 0 0 2px rgba(22, 140, 255, 0.05), 0 0 2px rgba(39, 216, 242, 0.16);
  }
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 120px 3vw 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent calc(25% - 0.5px), var(--line) 25%, transparent calc(25% + 0.5px)),
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to right, transparent calc(75% - 0.5px), var(--line) 75%, transparent calc(75% + 0.5px));
}

.signal-system {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(58vw, 790px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.signal-glow {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: rgba(47, 107, 255, 0.13);
  filter: blur(70px);
  animation: glow-pulse 5s ease-in-out infinite;
}

.orbit {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(47, 107, 255, 0.3);
  border-radius: 50%;
}

.orbit-one {
  animation: orbit-spin 18s linear infinite;
}

.orbit-two {
  inset: 19%;
  border-color: rgba(239, 238, 232, 0.17);
  animation: orbit-spin-reverse 13s linear infinite;
}

.orbit-three {
  inset: 33%;
  border-style: dashed;
  border-color: rgba(47, 107, 255, 0.4);
  animation: orbit-spin 24s linear infinite;
}

.orbit i {
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 18px var(--acid);
}

.orbit-two i {
  top: 13%;
  right: 14%;
  width: 5px;
  height: 5px;
  background: var(--paper);
  box-shadow: 0 0 12px var(--paper);
}

.scan-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, rgba(47, 107, 255, 0.75), transparent);
  opacity: 0.45;
  transform-origin: center;
  animation: scan 8s ease-in-out infinite;
}

.coordinate {
  position: absolute;
  z-index: 1;
  top: 50%;
  color: rgba(239, 238, 232, 0.38);
  font: 8px/1.7 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coordinate-left {
  left: 3vw;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left top;
}

.coordinate-right {
  right: 3vw;
  text-align: right;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right top;
}

.hero-index {
  position: absolute;
  z-index: 2;
  right: 3vw;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 8px var(--mono);
  transform: rotate(90deg) translateY(-50%);
  transform-origin: right top;
}

.hero-index i {
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(239, 238, 232, 0.35);
}

.hero-meta {
  position: relative;
  z-index: 1;
  width: 50%;
  display: flex;
  justify-content: space-between;
  font: 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-meta span:last-child {
  transform: translateX(30px);
}

.hero-title {
  position: relative;
  z-index: 1;
  width: 94vw;
  align-self: center;
  text-align: center;
  line-height: 0.73;
}

.title-mark {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.08em;
  margin-left: -0.06em;
  font-size: clamp(190px, 32vw, 520px);
  font-weight: 800;
  letter-spacing: -0.08em;
  transform: translateY(-18px);
}

.amp {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 48%;
  margin: 0;
  color: var(--acid);
  font-family: Georgia, serif;
  font-size: 0.38em;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 22px rgba(47, 107, 255, 0.72);
}

.title-mark .letter:last-child {
  position: relative;
  z-index: 1;
  margin-left: 0.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  text-shadow: 0 0 45px rgba(239, 238, 232, 0.08);
}

.title-mark .letter:last-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% 4% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.38) 0%, rgba(47, 107, 255, 0.16) 42%, transparent 72%);
  filter: blur(25px);
  transform: scale(1.15);
  animation: o-neon-pulse 4.5s ease-in-out infinite;
}

.hero-circuit-a {
  position: relative;
  width: 0.76em;
  height: 0.76em;
  flex: 0 0 0.76em;
}

.hero-circuit-a::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12% 2% 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.42) 0%, rgba(47, 107, 255, 0.18) 38%, transparent 72%);
  filter: blur(24px);
  transform: scale(1.18);
  animation: a-neon-pulse 4s ease-in-out infinite;
}

.hero-circuit-a svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-a-main {
  fill: none;
  stroke: var(--acid);
  stroke-width: 15;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  filter: drop-shadow(0 0 10px rgba(47, 107, 255, 0.72));
}

.hero-a-panel {
  fill: rgba(47, 107, 255, 0.14);
  stroke: rgba(125, 162, 255, 0.24);
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(47, 107, 255, 0.22));
}

.hero-a-color {
  display: none;
}

.hero-a-left {
  stroke: #65d5ff;
  filter: drop-shadow(0 0 7px rgba(101, 213, 255, 0.55));
}

.hero-a-right {
  stroke: #2f6bff;
  filter: drop-shadow(0 0 8px rgba(47, 107, 255, 0.7));
}

.hero-a-cross {
  stroke: #7557ff;
  filter: drop-shadow(0 0 7px rgba(117, 87, 255, 0.65));
}

.hero-a-pulse {
  display: none;
}

.hero-a-outline {
  display: initial;
  fill: none;
  stroke: var(--paper);
  stroke-width: 19;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

.hero-a-signal {
  display: none;
}

.hero-a-node {
  display: none;
}

.hero-a-star {
  fill: var(--paper);
  stroke: var(--acid);
  stroke-width: 2;
  filter: drop-shadow(0 0 7px var(--acid));
  transform-origin: 108px 128px;
  animation: hero-star-orbit 6s linear infinite;
}

.hero-a-star-trail {
  fill: none;
  stroke: #7da2ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 58 760;
  opacity: 0.68;
  filter: drop-shadow(0 0 6px rgba(47, 107, 255, 0.85));
  transform-origin: 108px 128px;
  animation: hero-star-orbit 6s linear infinite;
}

@keyframes hero-star-orbit {
  to { transform: rotate(360deg); }
}

.hero-a-secondary {
  display: none;
}

.hero-a-secondary-node {
  display: none;
}

.hero-a-chip {
  display: none;
}

.hero-a-chip-line {
  display: none;
}

@keyframes hero-signal-flow {
  to { stroke-dashoffset: -68; }
}

@keyframes hero-node-pulse {
  50% { opacity: 0.55; }
}

@keyframes hero-secondary-flow {
  to { stroke-dashoffset: -34; }
}

@keyframes hero-a-orbit-spin {
  from { transform: rotate(-18deg); stroke-dashoffset: 0; }
  to { transform: rotate(342deg); stroke-dashoffset: -92; }
}

.normal-a {
  position: relative;
  z-index: 1;
  color: transparent;
  background: none;
  filter: none;
}

.normal-a::after {
  content: none;
}

.a-letter-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 69%, transparent 69% 74.5%, #000 74.5% 100%);
  mask-image: linear-gradient(to bottom, #000 0 69%, transparent 69% 74.5%, #000 74.5% 100%);
}

.a-white-layer {
  color: var(--paper);
}

.a-blue-layer {
  color: var(--acid);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 24% 100%);
  transform: translate(7px, -7px);
  text-shadow: 0 0 25px rgba(47, 107, 255, 0.32);
}

.a-transparent-bar {
  position: absolute;
  z-index: 4;
  top: 68.5%;
  left: 32%;
  width: 65%;
  height: 0.06em;
  overflow: visible;
  background: transparent;
  border-top: 0.012em solid var(--paper);
  clip-path: none;
  transform: none;
  pointer-events: none;
}

.a-transparent-bar svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.a-transparent-bar path {
  fill: none;
  stroke: #6f9bff;
  stroke-width: 6;
  stroke-linecap: square;
  stroke-dasharray: 22 11;
  filter: drop-shadow(0 0 6px #2f6bff);
  animation: dash-through-a 1.1s linear infinite;
}


.next-placeholder {
  min-height: 30vh;
  padding: 80px 3vw;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--line);
  color: rgba(239, 238, 232, 0.45);
  font: 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tech-a {
  position: relative;
  width: 0.78em;
  height: 0.78em;
  flex: 0 0 0.78em;
}

.tech-a::before,
.tech-a::after {
  display: none;
}

.tech-a svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.a-blade-left { fill: var(--paper); }
.a-blade-right { fill: var(--acid); filter: url(#blue-glow); }
.a-core { fill: var(--ink); stroke: var(--paper); stroke-width: 5; }
.a-cut { fill: var(--ink); }
.a-pixel { fill: var(--acid); filter: url(#blue-glow); }
.pixel-one { animation: pixel-blink 1.8s steps(1) infinite; }
.pixel-two { animation: pixel-blink 1.8s steps(1) 0.9s infinite; }
.a-signal-path { fill: none; stroke: var(--acid); stroke-width: 3; stroke-dasharray: 12 7; animation: signal-flow 1.4s linear infinite; }
.a-signal-node { fill: var(--paper); stroke: var(--acid); stroke-width: 3; filter: url(#blue-glow); }

.tech-lockup {
  width: 82%;
  margin: 0.3em auto 0;
  padding: 0.06em 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(239, 238, 232, 0.5);
  border-bottom: 1px solid rgba(239, 238, 232, 0.5);
}

.techworks {
  font-family: var(--tech);
  font-size: clamp(34px, 7.5vw, 124px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.045em;
  text-align: center;
  color: transparent;
  background: linear-gradient(115deg, #ffffff 4%, #eaf8ff 26%, #27d8f2 48%, #168cff 67%, #2f6bff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(220, 243, 255, 0.32);
  filter: drop-shadow(0 0 10px rgba(31, 135, 255, 0.18));
}

.lockup-code {
  color: var(--acid);
  font: 8px/1.3 var(--mono);
  letter-spacing: 0.12em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.hero-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-bottom h1 {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.hero-bottom h1 span {
  color: var(--acid);
}

.explore-button {
  width: 110px;
  height: 110px;
  border: 1px solid rgba(239, 238, 232, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 11px var(--mono);
  text-transform: uppercase;
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease;
}

.explore-button:hover {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
}

.explore-button b {
  font-size: 18px;
}

.scroll-note {
  position: absolute;
  z-index: 1;
  bottom: 38px;
  left: 45.5%;
  transform: translateX(-50%);
  font: 9px var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.scroll-note span {
  margin-left: 12px;
}

.intro-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(80px);
  animation: letter-in 900ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.title-mark .intro-letter:nth-child(2) {
  animation-delay: 120ms;
}

.title-mark .amp.intro-letter {
  transform: translate(-50%, calc(-50% + 80px));
  animation-name: amp-in;
}

.title-mark .intro-letter:nth-child(3) {
  animation-delay: 200ms;
}

.tech-lockup.intro-letter {
  display: grid;
  animation-delay: 300ms;
}

.intro-fade {
  opacity: 0;
  transform: translateY(18px);
  animation: fade-in 700ms ease 650ms forwards;
}

.cursor-dot {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.a-options {
  padding: 90px 3vw 120px;
  background: #e9e8e2;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.options-heading {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  padding-bottom: 35px;
}

.options-heading p,
.options-heading span,
.option-number {
  margin: 0;
  font: 9px var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.options-heading h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 90px);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.options-heading span {
  justify-self: end;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(17, 17, 15, 0.3);
  border-bottom: 1px solid rgba(17, 17, 15, 0.3);
}

.new-options-grid {
  grid-template-columns: repeat(3, 1fr);
}

.tech-options-grid { grid-template-columns: repeat(4, 1fr); }
.dark-preview { padding: 24px; background: var(--ink); }
.preview-white { fill: none; stroke: var(--paper); stroke-width: 15; stroke-linecap: square; stroke-linejoin: bevel; }
.preview-blue { fill: none; stroke: var(--acid); stroke-width: 11; stroke-linecap: square; stroke-linejoin: bevel; }
.thin-preview { stroke-width: 6; }
.preview-node { fill: var(--acid); stroke: var(--paper); stroke-width: 2; }
.preview-blue-fill { fill: var(--acid); }
.preview-dark-fill { fill: var(--ink); }
.blade-white { fill: var(--paper); }
.blade-blue { fill: var(--acid); filter: drop-shadow(0 0 7px rgba(47,107,255,.55)); }
.preview-orbit { fill: none; stroke: var(--acid); stroke-width: 3; stroke-dasharray: 11 7; transform: rotate(-12deg); transform-origin: center; }
.prism-face-one { fill: var(--paper); }
.prism-face-two { fill: #2f6bff; filter: drop-shadow(0 0 8px rgba(47,107,255,.55)); }
.preview-white-fill { fill: var(--paper); }
.nexus-ring { fill: rgba(47,107,255,.18); stroke: var(--acid); stroke-width: 7; }
.slash-main { fill: var(--paper); }
.slash-cut { fill: var(--ink); }
.slash-accent { fill: var(--acid); filter: drop-shadow(0 0 7px rgba(47,107,255,.65)); }
.type-a { height: 280px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 220px; line-height: 1; }
.cyber-serif-a { font-family: Georgia, serif; font-weight: 700; color: transparent; -webkit-text-stroke: 3px var(--paper); text-shadow: 9px 0 0 var(--acid); }
.rounded-frame-a { fill: none; stroke: var(--paper); stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; }
.rounded-accent { fill: var(--acid); filter: drop-shadow(0 0 7px var(--acid)); }
.negative-a { fill: var(--acid); }
.negative-slot { fill: var(--ink); }
.pixel-a { fill: var(--paper); }
.pixel-accent { fill: var(--acid); }
.apex-left { fill: var(--paper); }
.apex-right { fill: var(--acid); filter: drop-shadow(0 0 8px rgba(47,107,255,.55)); }
.apex-bar { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.interlock-one { fill: none; stroke: var(--paper); stroke-width: 18; stroke-linejoin: bevel; }
.interlock-two { fill: none; stroke: var(--acid); stroke-width: 18; stroke-linejoin: bevel; }
.interlock-cut { fill: var(--ink); stroke: #789fff; stroke-width: 4; }
.core-a { fill: none; stroke: var(--paper); stroke-width: 16; stroke-linejoin: bevel; }
.core-ring { fill: var(--ink); stroke: var(--acid); stroke-width: 8; filter: drop-shadow(0 0 8px rgba(47,107,255,.7)); }
.core-dot { fill: var(--paper); }
.code-bracket { fill: none; stroke: var(--acid); stroke-width: 16; stroke-linecap: square; stroke-linejoin: bevel; }
.code-a { fill: none; stroke: var(--paper); stroke-width: 12; stroke-linecap: square; stroke-linejoin: bevel; }
.ribbon-light { fill: var(--paper); }
.ribbon-blue { fill: var(--acid); filter: drop-shadow(0 0 8px rgba(47,107,255,.55)); }
.ribbon-fold { fill: #162e70; }
.tower-a { fill: none; stroke: var(--paper); stroke-width: 15; stroke-linejoin: bevel; }
.tower-wave { fill: none; stroke: var(--acid); stroke-width: 7; stroke-linecap: round; }
.tower-dot { fill: var(--acid); filter: drop-shadow(0 0 7px var(--acid)); }
.split-top,.split-bottom { fill: none; stroke: var(--paper); stroke-width: 17; stroke-linecap: square; stroke-linejoin: bevel; }
.split-accent { fill: none; stroke: var(--acid); stroke-width: 17; stroke-linecap: square; filter: drop-shadow(0 0 6px rgba(47,107,255,.7)); }
.quantum-a { fill: none; stroke: var(--paper); stroke-width: 14; stroke-linejoin: bevel; }
.quantum-orbit { fill: none; stroke: var(--acid); stroke-width: 4; stroke-dasharray: 12 7; transform: rotate(-11deg); transform-origin: center; }
.quantum-node { fill: var(--acid); stroke: var(--paper); stroke-width: 2; }
.quantum-core { fill: var(--ink); stroke: var(--acid); stroke-width: 5; }
.iso-front { fill: var(--paper); }
.iso-side { fill: var(--acid); filter: drop-shadow(0 0 8px rgba(47,107,255,.5)); }
.iso-edge { fill: #9bb8ff; }
.neural-frame { fill: none; stroke: rgba(239,238,232,.48); stroke-width: 7; stroke-linejoin: bevel; }
.neural-link { fill: none; stroke: var(--paper); stroke-width: 6; }
.neural-node { fill: var(--acid); stroke: var(--paper); stroke-width: 3; filter: drop-shadow(0 0 6px var(--acid)); }
.shield-shell { fill: rgba(47,107,255,.16); stroke: var(--acid); stroke-width: 8; }
.shield-a { fill: none; stroke: var(--paper); stroke-width: 13; stroke-linejoin: bevel; }
.wire-a-one { fill: none; stroke: var(--paper); stroke-width: 6; }
.wire-a-two { fill: none; stroke: var(--acid); stroke-width: 3; }
.wire-join { fill: none; stroke: #85a8ff; stroke-width: 3; }
.old-a-grid { display: none; }
.logo-options-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(17,17,15,.3); }
.logo-option { padding: 20px; border-right: 1px solid rgba(17,17,15,.2); border-bottom: 1px solid rgba(17,17,15,.2); }
.logo-option:nth-child(2n) { border-right: 0; }
.logo-stage { min-height: 300px; margin-top: 18px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); }
.wordmark-logo { flex-direction: column; }
.wordmark-logo strong { font-size: 112px; line-height: .8; letter-spacing: -.12em; }
.wordmark-logo strong span { color: transparent; -webkit-text-stroke: 2px var(--paper); text-shadow: 0 0 30px rgba(47,107,255,.3); }
.wordmark-logo p { margin: 32px 0 8px; font: 25px var(--mono); letter-spacing: .22em; }
.wordmark-logo p b { color: var(--acid); }
.wordmark-logo i { color: rgba(239,238,232,.5); font: 7px var(--mono); letter-spacing: .22em; }
.full-logo-svg { width: 90%; max-height: 230px; overflow: visible; }
.full-logo-svg text { fill: var(--paper); font: 700 54px var(--sans); letter-spacing: -4px; }
.full-logo-svg .small-logo-text { fill: var(--acid); font: 500 16px var(--mono); letter-spacing: 4px; }
.lock-a { fill: none; stroke: var(--acid); stroke-width: 13; stroke-linejoin: bevel; }
.lock-o { fill: none; stroke: var(--paper); stroke-width: 9; }
.lock-cut { fill: var(--ink); stroke: #7da2ff; stroke-width: 3; }
.badge-shell { fill: rgba(47,107,255,.15); stroke: var(--acid); stroke-width: 6; }
.badge-a { fill: none; stroke: var(--paper); stroke-width: 10; }
.badge-o { fill: none; stroke: var(--acid); stroke-width: 6; }
.symbol-name-logo { gap: 28px; }
.symbol-box { position: relative; width: 115px; height: 115px; display: grid; place-items: center; border: 1px solid rgba(239,238,232,.35); }
.symbol-box span { color: var(--acid); font-size: 78px; font-weight: 800; }
.symbol-box i { position: absolute; right: -19px; color: transparent; font-size: 67px; font-style: normal; font-weight: 700; -webkit-text-stroke: 2px var(--paper); }
.symbol-copy { display: flex; flex-direction: column; }
.symbol-copy strong { font-size: 38px; line-height: 1; }
.symbol-copy b { color: var(--acid); font: 15px var(--mono); letter-spacing: .18em; }
.symbol-copy small { margin-top: 14px; color: rgba(239,238,232,.5); font: 6px var(--mono); letter-spacing: .18em; }
@media(max-width:760px){.logo-options-grid{grid-template-columns:1fr}.logo-option{border-right:0}.logo-stage{min-height:260px}.symbol-name-logo{gap:18px}.wordmark-logo strong{font-size:90px}}

.svg-a {
  display: block;
  width: min(86%, 240px);
  height: 280px;
  margin: 15px auto 0;
  overflow: visible;
}

.fill-ink { fill: var(--ink); }
.fill-blue { fill: var(--acid); }
.stroke-ink { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: square; stroke-linejoin: bevel; }
.stroke-blue { fill: none; stroke: var(--acid); stroke-width: 11; stroke-linecap: square; stroke-linejoin: bevel; }
.stroke-blue.thin { stroke-width: 5; }
.stroke-ink.chunky, .stroke-blue.chunky { stroke-width: 25; }
.stroke-ink.delta { stroke-width: 12; }
.stroke-ink.round, .stroke-blue.round { stroke-linecap: round; stroke-linejoin: round; }

.new-options-grid .option-card:nth-child(3) {
  border-right: 0;
}

.new-options-grid .option-card:nth-child(-n + 3) {
  border-bottom: 1px solid rgba(17, 17, 15, 0.2);
}

.new-a-clean {
  color: var(--ink);
}

.new-a-split {
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--acid) 50% 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.new-a-outline {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
}

.new-a-diagonal {
  color: transparent;
  background: linear-gradient(135deg, var(--ink) 0 49%, var(--acid) 49% 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.new-a-offset {
  color: var(--ink);
}

.new-a-offset::after {
  content: "A";
  position: absolute;
  color: var(--acid);
  transform: translate(10px, -8px);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 30% 100%);
}

.new-a-cut {
  color: var(--ink);
}

.new-a-cut::after {
  content: "";
  position: absolute;
  width: 68%;
  height: 13px;
  background: #e9e8e2;
  border-top: 4px solid var(--acid);
  border-bottom: 4px solid var(--acid);
  transform: rotate(-9deg);
}

.new-a-forward { color: var(--ink); font-style: italic; transform: skew(-8deg); text-shadow: 8px 0 0 var(--acid); }
.new-a-neon { color: transparent; -webkit-text-stroke: 3px var(--acid); filter: drop-shadow(0 0 7px rgba(47, 107, 255, 0.75)); }
.new-a-neon::after { content: "A"; position: absolute; color: transparent; -webkit-text-stroke: 1px var(--ink); transform: scale(0.88); }
.new-a-data { color: transparent; background: repeating-linear-gradient(to bottom, var(--ink) 0 7px, transparent 7px 17px); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 2px var(--acid); }
.new-a-double { color: transparent; -webkit-text-stroke: 3px var(--ink); }
.new-a-double::after { content: "A"; position: absolute; color: transparent; -webkit-text-stroke: 3px var(--acid); transform: translate(10px, -10px); }
.new-a-gradient { color: transparent; background: linear-gradient(to bottom, var(--acid), #7da2ff 48%, var(--ink) 49%); background-clip: text; -webkit-background-clip: text; }
.new-a-minimal { color: var(--ink); }
.new-a-minimal::after { content: ""; position: absolute; top: 48%; left: 31%; width: 39%; height: 20%; background: #e9e8e2; border-left: 8px solid var(--acid); transform: skew(-15deg); }

.option-diagonal {
  color: transparent;
  background: linear-gradient(135deg, var(--ink) 0 48%, var(--acid) 48% 52%, transparent 52% 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px var(--ink);
  filter: drop-shadow(-8px 8px 0 rgba(47, 107, 255, 0.16));
}

.option-geometric {
  position: relative;
  width: 190px;
  height: 210px;
  margin: 35px auto;
  display: block;
}

.option-geometric .geo-left,
.option-geometric .geo-right {
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 205px;
  background: linear-gradient(to bottom, var(--acid) 0 9%, var(--ink) 9% 100%);
}

.option-geometric .geo-left { left: 42px; transform: skew(-19deg); }
.option-geometric .geo-right { right: 42px; transform: skew(19deg); }
.option-geometric i { position: absolute; top: 130px; left: 48px; width: 95px; height: 19px; background: var(--acid); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 8% 50%); }
.option-geometric b { position: absolute; top: 134px; right: 34px; width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

.option-card {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(17, 17, 15, 0.2);
  overflow: hidden;
}

.option-card:last-child {
  border-right: 0;
}

.option-a {
  position: relative;
  height: 280px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: clamp(130px, 15vw, 240px);
  font-weight: 800;
  line-height: 1;
}

.option-layered::after {
  content: "A";
  position: absolute;
  color: var(--acid);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 24% 100%);
  transform: translate(5px, -5px);
}

.option-split {
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--acid) 50%);
  background-clip: text;
  -webkit-background-clip: text;
}

.option-split::after {
  content: "";
  position: absolute;
  width: 92%;
  height: 62%;
  border: 1px dashed var(--acid);
  border-radius: 50%;
  animation: option-orbit 8s linear infinite;
}

.option-lines {
  color: transparent;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 5px, transparent 5px 13px);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px var(--acid);
}

.option-cut {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.option-cut::after {
  content: "";
  position: absolute;
  width: 62%;
  height: 8px;
  background: var(--acid);
  box-shadow: 0 0 15px rgba(47, 107, 255, 0.5);
  transform: rotate(-11deg);
}

.option-solid {
  color: var(--acid);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: -7px 7px 0 rgba(17, 17, 15, 0.18);
}

@keyframes option-orbit {
  to { transform: rotate(360deg); }
}

@keyframes letter-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes amp-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes glow-pulse {
  50% {
    opacity: 0.45;
    transform: scale(1.18);
  }
}

@keyframes scan {
  0%, 100% {
    transform: rotate(-38deg) scaleY(0.72);
  }

  50% {
    transform: rotate(38deg) scaleY(1);
  }
}

@keyframes signal-flow {
  to { stroke-dashoffset: -38; }
}

@keyframes pixel-blink {
  50% { opacity: 0.2; }
}

@keyframes a-neon-pulse {
  50% { opacity: 0.62; transform: scale(1.28); }
}

@keyframes o-neon-pulse {
  50% { opacity: 0.65; transform: scale(1.24); }
}

@keyframes dash-through-a {
  to { stroke-dashoffset: -62; }
}



@media (max-width: 760px) {
  .site-header {
    height: 96px;
    padding: 0 20px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 60px 36px;
  }

  nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(25px, 10vw, 48px);
    padding: 9px 14px 10px;
    background: rgba(17, 17, 15, 0.64);
    border-top: 1px solid rgba(239, 238, 232, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 8px;
    letter-spacing: .1em;
  }

  .brand { grid-column: 1; grid-row: 1; transform: translateX(-13px); }
  .availability { grid-column: 2; grid-row: 1; }

  .site-header.is-scrolled {
    height: 96px;
    background: rgba(17, 17, 15, 0.88);
  }

  .availability {
    font-size: 8px;
  }

  .hero {
    padding: 124px 20px 22px;
  }

  .grid-lines {
    background-image: linear-gradient(to right, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px));
  }

  .signal-system {
    width: 92vw;
    opacity: 0.72;
    transform: translate(-47%, -50%);
  }

  .coordinate,
  .hero-index {
    display: none;
  }

  .hero-meta {
    width: 100%;
    font-size: 8px;
  }

  .hero-meta span:last-child {
    transform: translateX(8px);
  }

  .title-mark {
    font-size: 48vw;
    transform: translateY(-10px);
  }

  .real-logo-mark {
    width: 68vw;
    height: 36vh;
    margin: -5px auto 0;
    transform: translateX(-34px);
  }

  .real-logo-mark img {
    width: 125%;
  }

  .techworks {
    font-size: 9.2vw;
    letter-spacing: 0.06em;
  }

  .tech-lockup {
    width: 94%;
    gap: 8px;
  }

  .lockup-code {
    font-size: 6px;
  }

  .hero-bottom {
    align-items: center;
  }

  .hero-bottom h1 {
    font-size: 18px;
  }

  .explore-button {
    width: 78px;
    height: 78px;
    font-size: 9px;
  }

  .scroll-note {
    display: none;
  }

  .cursor-dot {
    display: none;
  }

  .a-options {
    padding: 70px 20px;
  }

  .options-heading {
    display: block;
  }

  .options-heading h2 {
    margin: 20px 0;
  }

  .options-heading span {
    display: block;
  }

  .options-grid {
    grid-template-columns: 1fr;
  }

  .new-options-grid .option-card:nth-child(3) {
    border-right: 0;
  }

  .tech-options-grid { grid-template-columns: 1fr; }

  .option-card {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 17, 15, 0.2);
  }

  .option-card:last-child {
    border-bottom: 0;
  }

  .option-a {
    height: 230px;
    font-size: 180px;
  }
}

.a-options {
  min-height: 30vh;
  padding: 80px 3vw;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-top: 1px solid var(--line);
  color: rgba(239, 238, 232, 0.45);
}

.a-options > * {
  display: none;
}

.a-options::after {
  content: "NEXT: THE STATEMENT SECTION";
  font: 10px var(--mono);
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-ready .reveal-item,
  .js-ready .reveal-item.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .statement-track span {
    animation: none;
  }

  .why-marquee span,
  .why-monogram::after,
  .process-status i::before,
  .contact-orbit::before,
  .contact-signal i {
    animation: none;
  }

  .end-rail span,
  .end-rings,
  .end-bottom i {
    animation: none;
  }

  .intro-letter,
  .intro-fade {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .orbit,
  .signal-glow,
  .scan-line,
  .a-pixel,
  .a-signal-path,
  .hero-a-signal,
  .hero-a-node,
  .hero-a-secondary,
  .hero-a-star,
  .hero-a-star-trail,
  .a-transparent-bar path,
  .hero-circuit-a::before,
  .title-mark .letter:last-child::before,
  .hero-a-pulse {
    animation: none;
  }

  .availability i {
    animation: none;
  }

  .amp.intro-letter {
    transform: translate(-50%, -50%);
  }

  .hero-a-star {
    display: none;
  }
}

@media (max-width: 760px) {
  .js-ready .reveal-item,
  .js-ready .reveal-item.is-visible {
    transition-duration: .65s;
  }

  .js-ready .reveal-item { opacity: 0; transform: translateY(18px); }
  .js-ready .reveal-item.is-visible { opacity: 1; transform: translateY(0); }

  .intro-letter,
  .intro-fade {
    animation-duration: .55s;
  }

  .statement-section { min-height: auto; padding: 90px 20px 60px; }
  .statement-track { width: calc(100% + 40px); margin: 50px 0 40px -20px; }
  .statement-section h2 { font-size: clamp(39px, 11.5vw, 68px); line-height: .95; letter-spacing: -.045em; }
  .statement-footer { margin-top: 55px; }
  .statement-orbit { width: 58px; height: 58px; }

  .selected-work { padding: 90px 20px 70px; }
  .work-heading { grid-template-columns: 1fr auto; margin-bottom: 55px; }
  .work-heading h2 { grid-column: 1 / -1; grid-row: 2; margin-top: 25px; font-size: 12vw; }
  .work-heading > span:last-child { grid-column: 2; }
  .project-meta { grid-template-columns: 1fr auto; font-size: 7px; }
  .project-meta span:nth-child(2) { display: none; }
  .project-stage { min-height: 110vw; }
  .browser-frame { width: 92vw; transform: rotate(-2deg) translateX(-2vw); }
  .rivera-preview { min-height: 68vw; }
  .rivera-nav { height: 42px; }
  .rivera-copy { padding: 10% 7%; }
  .project-link { right: 14px; bottom: 14px; width: 84px; height: 84px; font-size: 7px; }
  .project-summary { grid-template-columns: 1fr; gap: 36px; padding: 45px 0 0; }

  .expertise-section { padding: 90px 20px 55px; }
  .expertise-head p { width: 58vw; font-size: 12px; }
  .expertise-section > h2 { margin: 65px 0 45px; font-size: 16vw; line-height: .9; }
  .expertise-row { min-height: 0; padding: 27px 0; grid-template-columns: 28px 1fr 25px; gap: 10px; }
  .expertise-row:hover { padding-left: 10px; padding-right: 10px; }
  .expertise-row h3 { font-size: 7.4vw; }
  .expertise-row p { grid-column: 2 / 4; max-width: 90%; font-size: 11px; }
  .expertise-arrow { grid-column: 3; grid-row: 1; font-size: 20px; }
  .expertise-visual { display: none; }
  .expertise-foot { margin-top: 45px; font-size: 6px; }

  .why-section { padding: 85px 20px 0; }
  .why-label { grid-template-columns: auto 1fr; }
  .why-label span:last-child { display: none; }
  .why-intro { grid-template-columns: 1fr; gap: 45px; margin: 65px 0; }
  .why-intro h2 { font-size: 15vw; line-height: .9; }
  .why-note { width: 76%; margin-left: auto; }
  .why-body { grid-template-columns: 1fr; gap: 65px; padding-bottom: 70px; }
  .why-monogram { position: relative; top: auto; min-height: 92vw; }
  .why-points article { min-height: 0; grid-template-columns: 42px 1fr; padding: 25px 0; }
  .why-points h3 { font-size: 6.2vw; }
  .why-marquee { width: calc(100% + 40px); margin-left: -20px; }

  .process-section { grid-template-columns: 1fr; gap: 70px; padding: 90px 20px 70px; }
  .process-section::before { left: 15%; width: 100vw; }
  .process-side { position: relative; top: auto; }
  .process-side h2 { margin: 50px 0 30px; font-size: 14vw; }
  .process-status { margin-top: 40px; }
  .process-step { min-height: 245px; padding: 35px 0 35px 70px; grid-template-columns: 1fr; }
  .process-step:hover { padding-left: 76px; }
  .process-steps::before { left: 22px; }
  .step-number { left: 9px; top: 36px; }
  .step-copy h3 { font-size: 11vw; }
  .step-copy p { max-width: 92%; }
  .step-symbol { position: absolute; right: 0; top: 22px; font-size: 17vw; opacity: .55; }

  .contact-section { padding: 65px 20px 0; }
  .contact-top { grid-template-columns: 1fr 1fr; }
  .contact-top span:nth-child(2) { display: none; }
  .contact-title-wrap { overflow: visible; padding: 75px 5px 70px 0; }
  .contact-title-wrap h2 { overflow: visible; font-size: 14.5vw; line-height: .84; letter-spacing: -.06em; }
  .contact-title-wrap h2 span { overflow: visible; padding-right: 3px; }
  .contact-title-wrap h2 span:nth-child(2) { text-align: left; -webkit-text-stroke-width: 1px; }
  .contact-title-wrap h2 .contact-together { text-align: left; }
  .contact-orbit { left: auto; right: 0; top: 20%; width: 80px; min-width: 0; opacity: .45; }
  .contact-content { grid-template-columns: 1fr; gap: 70px; padding: 60px 0 75px; }
  .contact-intro > p { margin-bottom: 40px; font-size: 6.2vw; }
  .contact-form label { grid-template-columns: 1fr; gap: 5px; padding: 18px 0; }
  .contact-form input,.contact-form textarea { padding: 8px 0; font-size: 17px; }
  .send-project { width: 120px; height: 120px; }
  .site-footer { min-height: 150px; grid-template-columns: 1fr auto; }
  .site-footer > span { display: none; }
  .form-toast { left: 20px; right: 20px; bottom: 20px; min-width: 0; }

  .end-screen { min-height: 62vh; padding: 62px 20px 0; }
  .end-meta { grid-template-columns: 1fr 1fr; }
  .end-meta span:nth-child(2) { display: none; }
  .end-center { width: 100%; }
  .end-center img { width: 38vw; }
  .end-center h2 { margin-top: -7px; font-size: 9vw; line-height: .9; }
  .end-rings { width: 72vw; }
  .end-return { right: 20px; top: 92px; bottom: auto; width: 72px; height: 72px; font-size: 6px; }
  .end-bottom { grid-template-columns: 1fr; padding-right: 100px; line-height: 1.5; }
  .end-bottom span:nth-child(2) { display: none; }
  .end-bottom span:last-child { text-align: left; margin-top: 8px; }
  .copyright-bottom { margin: 16px -20px 0; padding: 13px 20px; font-size: 6px; }

  .compact-ending { min-height: 0; padding: 25px 20px 20px; grid-template-columns: 1fr auto; gap: 22px 15px; }
  .compact-brand img { width: 46px; height: 36px; }
  .compact-copyright { grid-column: 1 / -1; grid-row: 2; padding-top: 17px; border-top: 1px solid rgba(239,238,232,.12); text-align: left; font-size: 6px; }
  .compact-status { display: none; }
  .compact-return { justify-self: end; font-size: 6px; }
}