body.gateway-open { overflow: hidden; }

.gateway {
  position: fixed;
  z-index: 100;
  inset: 0;
  min-height: 100dvh;
  overflow: auto;
  background: #050505;
  color: #fff;
  transition: opacity .7s ease, visibility .7s ease;
}
.gateway.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.gateway-shell { width: min(1240px, calc(100% - 40px)); min-height: 100dvh; margin: auto; display: flex; flex-direction: column; }
.gateway-head { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.14); }
.gateway-brand { display: flex; align-items: center; gap: 13px; font: 900 17px/1 "Arial Black", Impact, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.gateway-word { display: flex; align-items: baseline; }
.gateway-word span:last-child { color: transparent; -webkit-text-stroke: 1.2px white; transform: translate(2px,2px); }
.gateway-counter { color: #777; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.break-mark { width: 38px; height: 38px; overflow: visible; }
.break-mark path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: square; }
.break-mark .left { transform: translate(-2px,2px); transform-origin: center; }
.break-mark .right { transform: translate(2px,-2px); transform-origin: center; }
.break-mark .fragment { stroke-width: 2.1; }

.gateway-view { flex: 1; display: none; }
.gateway-view.active { display: grid; }
.gateway-intro { grid-template-columns: minmax(0,1.15fr) minmax(350px,.85fr); gap: clamp(40px,7vw,110px); align-items: center; padding: 55px 0 70px; }
.gateway-copy h2 { max-width: 780px; margin: 18px 0 22px; font: 900 clamp(55px,8.2vw,116px)/.84 "Arial Black", Impact, sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.gateway-copy h2 span { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.gateway-copy p { max-width: 570px; color: #999; font-size: 15px; line-height: 1.7; }
.gateway-eyebrow { color: #868686; font-size: 10px; font-weight: 900; letter-spacing: .21em; text-transform: uppercase; }
.gateway-actions { display: flex; align-items: center; gap: 15px; margin-top: 32px; }
.gateway-primary,.gateway-secondary { border: 1px solid #fff; border-radius: 999px; padding: 14px 20px; font-weight: 850; cursor: pointer; transition: .2s; }
.gateway-primary { background: #fff; color: #050505; }
.gateway-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,255,255,.14); }
.gateway-secondary { background: transparent; color: #aaa; border-color: #393939; }
.gateway-secondary:hover { color: white; border-color: white; }

.dna-stage { position: relative; display: grid; place-items: center; min-height: 540px; }
.gateway-dna { width: min(100%,440px); filter: drop-shadow(0 0 35px rgba(255,255,255,.07)); }
.gateway-dna .strand { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 7; animation: dnaFlow 8s linear infinite; }
.gateway-dna .strand.ghost { stroke: #454545; animation-direction: reverse; }
.gateway-dna .rung { stroke: #686868; stroke-width: 1; animation: dnaPulse 2.6s ease-in-out infinite; }
.gateway-dna .rung:nth-child(3n) { animation-delay: -.8s; }
.gateway-dna .core { fill: #fff; animation: corePulse 2.3s ease-in-out infinite; transform-origin: center; }
.dna-caption { position: absolute; bottom: 12%; left: 50%; width: max-content; transform: translateX(-50%); color: #777; font-size: 9px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
@keyframes dnaFlow { to { stroke-dashoffset: -120; } }
@keyframes dnaPulse { 50% { opacity: .22; } }
@keyframes corePulse { 50% { transform: scale(1.3); opacity: .65; } }

.gateway-builder { grid-template-columns: 250px minmax(0,1fr); gap: clamp(35px,7vw,100px); padding: 64px 0 75px; }
.builder-aside h3 { margin: 14px 0 12px; font: 900 34px/.95 "Arial Black",Impact,sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.builder-aside p { color: #777; font-size: 12px; line-height: 1.65; }
.progress-track { height: 2px; margin: 31px 0 15px; background: #292929; }
.progress-fill { width: 33.333%; height: 100%; background: #fff; transition: width .35s ease; }
.step-list { display: grid; gap: 10px; color: #555; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.step-list span.active { color: #fff; }
.builder-panel { align-self: center; max-width: 760px; }
.form-step { display: none; animation: stepIn .38s ease; }
.form-step.active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } }
.step-number { color: #666; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.form-step h3 { margin: 12px 0 8px; font: 900 clamp(37px,5vw,66px)/.93 "Arial Black",Impact,sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.form-step > p { margin: 0 0 30px; color: #858585; font-size: 13px; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dark-field { display: grid; gap: 8px; margin-bottom: 14px; }
.dark-field label { color: #777; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.dark-field input { width: 100%; border: 1px solid #303030; border-radius: 12px; padding: 15px 16px; outline: 0; background: #101010; color: #fff; }
.dark-field input:focus { border-color: #fff; }
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.dna-choice { min-height: 58px; border: 1px solid #303030; border-radius: 12px; padding: 12px; background: #0d0d0d; color: #888; text-align: left; cursor: pointer; transition: .18s; }
.dna-choice:hover { border-color: #777; color: #fff; }
.dna-choice.selected { border-color: #fff; background: #fff; color: #050505; }
.builder-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 31px; }
.builder-controls .gateway-secondary { visibility: hidden; }
.builder-controls .gateway-secondary.visible { visibility: visible; }
.build-status { display: none; align-items: center; gap: 12px; margin-top: 22px; color: #aaa; font-size: 11px; }
.build-status.active { display: flex; }
.build-status i { width: 14px; height: 14px; border: 2px solid #555; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media(max-width:800px){.gateway-intro{grid-template-columns:1fr;padding-top:50px}.dna-stage{min-height:360px;grid-row:1}.gateway-copy{grid-row:2}.gateway-builder{grid-template-columns:1fr;padding-top:40px}.builder-aside p{display:none}.progress-track{margin-top:20px}.gateway-copy h2{font-size:clamp(48px,14vw,78px)}.choice-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gateway-shell{width:calc(100% - 28px)}.gateway-head{height:70px}.gateway-counter{display:none}.dna-stage{min-height:300px}.gateway-copy h2{margin-top:13px}.gateway-actions{align-items:stretch;flex-direction:column}.gateway-primary,.gateway-secondary{width:100%}.field-row{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}.form-step h3{font-size:36px}}
/* Keep all typography on the black DNA experience crisp and fully white. */
.gateway-counter,
.gateway-copy p,
.gateway-eyebrow,
.gateway-secondary,
.dna-caption,
.builder-aside p,
.step-list,
.step-number,
.form-step > p,
.dark-field label,
.dna-choice,
.build-status {
  color: #fff;
}