body { margin: 0; background: #02050C; }
a { color: #E7C98E; text-decoration: none; }
a:hover { color: #F8E8C6; }
@keyframes hra-breathe { 0%,100% { opacity:.62; filter:brightness(1);} 50% { opacity:1; filter:brightness(1.3);} }
@keyframes hra-lamp    { 0%,100% { opacity:.45; transform:translate(-50%,-50%) scale(.82);} 50% { opacity:1; transform:translate(-50%,-50%) scale(1.3);} }
@keyframes hra-optic   { 0% { transform:rotate(-9deg); opacity:.2;} 50% { transform:rotate(7deg); opacity:.42;} 100% { transform:rotate(-9deg); opacity:.2;} }
@keyframes hra-drift-a { from { transform:translateX(0);} to { transform:translateX(-50%);} }
@keyframes hra-drift-b { from { transform:translateX(-50%);} to { transform:translateX(0);} }
@keyframes hra-glim-a  { 0%,100% { opacity:.2; transform:scaleX(.7);}  50% { opacity:.8; transform:scaleX(1.15);} }
@keyframes hra-glim-b  { 0%,100% { opacity:.55;transform:scaleX(1.1);} 50% { opacity:.16;transform:scaleX(.72);} }
@keyframes hra-glim-c  { 0%,100% { opacity:.3; transform:scaleX(.88);} 50% { opacity:.7; transform:scaleX(1.22);} }
@keyframes hra-twinkle { 0%,100% { opacity:.2;} 50% { opacity:.85;} }
@keyframes hra-navlamp { 0%,100% { opacity:.5; box-shadow:0 0 6px 2px rgba(255,244,222,.5);} 50% { opacity:1; box-shadow:0 0 14px 5px rgba(255,244,222,.95), 0 0 34px 12px rgba(231,201,142,.4);} }
@keyframes hra-navbeam { 0%,100% { opacity:0; width:10px;} 45% { opacity:.9; width:40px;} 60% { opacity:0; width:52px;} }
@keyframes hra-travel  { 0% { left:0%; } 100% { left:100%; } }
@keyframes hra-scan    { 0% { transform:translateX(-30%);} 100% { transform:translateX(130%);} }
.hra-beam     { animation: hra-breathe 7s ease-in-out infinite; }
.hra-lamp     { animation: hra-lamp 7s ease-in-out infinite; }
.hra-optic    { animation: hra-optic 15s ease-in-out infinite; }
.hra-clouds-a { animation: hra-drift-a 150s linear infinite; }
.hra-clouds-b { animation: hra-drift-b 240s linear infinite; }
.ga { animation: hra-glim-a 5.4s ease-in-out infinite; }
.gb { animation: hra-glim-b 7.1s ease-in-out infinite; }
.gc { animation: hra-glim-c 6.2s ease-in-out infinite; }
.tw { animation: hra-twinkle 6s ease-in-out infinite; }
.navlamp  { animation: hra-navlamp 4.5s ease-in-out infinite; }
.navbeam  { animation: hra-navbeam 4.5s ease-in-out infinite; }
.traveller{ animation: hra-travel 9s ease-in-out infinite alternate; }
.scanline { animation: hra-scan 11s linear infinite; }
.svc {
  position: relative; overflow: hidden;
  border: 1px solid #16233A; padding: 34px 30px 36px 30px;
  transition: border-color .45s ease, transform .45s ease, background-color .45s ease;
}
.svc::after {
  content: ""; position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(231,201,142,0) 0%, rgba(255,240,208,0.16) 50%, rgba(231,201,142,0) 100%);
  transform: skewX(-18deg); opacity: 0;
  transition: left .85s cubic-bezier(.22,.7,.3,1), opacity .35s ease;
}
.svc:hover { border-color: #4C3E24; transform: translateY(-4px); background-color: #070D18; }
.svc:hover::after { left: 125%; opacity: 1; }
.svc:focus-within { border-color: #4C3E24; }
.tog {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em;
  padding: 12px 20px; cursor: pointer; background: transparent;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
@media (max-width: 820px) {
  .markwrap { left: -19% !important; right: -81% !important; }
}
@media (max-width: 520px) {
  .markwrap { left: -26% !important; right: -114% !important; }
  .svc { padding: 26px 22px 28px 22px; }
  .tog { padding: 11px 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hra-beam,.hra-lamp,.hra-optic,.hra-clouds-a,.hra-clouds-b,
  .ga,.gb,.gc,.tw,.navlamp,.navbeam,.traveller,.scanline { animation: none; }
  .svc, .svc::after { transition: none; }
}
@keyframes hra-ribbon  { 0% { transform: translateX(-28%) rotate(10deg);} 100% { transform: translateX(128%) rotate(10deg);} }
@keyframes hra-mark    { 0%,100% { opacity:.4;} 50% { opacity:.95;} }
.ribbon  { animation: hra-ribbon 17s linear infinite; }
.pip     { animation: hra-mark 4.5s ease-in-out infinite; }
.row {
  position: relative; overflow: hidden;
  border-top: 1px solid #16233A;
  padding: 44px 0;
  transition: background-color .5s ease;
}
.row::after {
  content: ""; position: absolute; top: 0; left: -70%;
  width: 42%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(231,201,142,0) 0%, rgba(255,240,208,.13) 50%, rgba(231,201,142,0) 100%);
  transform: skewX(-18deg); opacity: 0;
  transition: left .9s cubic-bezier(.22,.7,.3,1), opacity .35s ease;
}
.row:hover { background-color: #060D18; }
.row:hover::after { left: 128%; opacity: 1; }
.row:hover .num { color: #E7C98E; }
.num { transition: color .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .navlamp,.navbeam,.ribbon,.pip { animation: none; }
  .row, .row::after, .num { transition: none; }
}
@keyframes hra-descend { 0% { top:0%; opacity:0;} 8% { opacity:1;} 92% { opacity:1;} 100% { top:100%; opacity:0;} }
@keyframes hra-glowpulse { 0%,100% { opacity:.5;} 50% { opacity:1;} }
.descend { animation: hra-descend 13s ease-in-out infinite; }
.glowpulse { animation: hra-glowpulse 7s ease-in-out infinite; }
.stop { transition: border-color .4s ease, background-color .4s ease; }
.stop:hover { background-color: #060D18; }
.stop:hover .dot { background: #FFF6E4; box-shadow: 0 0 12px 4px rgba(255,244,222,.75); }
.dot { transition: background .4s ease, box-shadow .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .navlamp,.navbeam,.descend,.glowpulse { animation: none; }
  .stop,.dot { transition: none; }
}
@keyframes hra-harbor  { 0%,100% { opacity:.42; transform: scale(1);} 50% { opacity:.85; transform: scale(1.06);} }
@keyframes hra-sweepin { 0% { transform: rotate(-7deg); opacity:.18;} 50% { transform: rotate(5deg); opacity:.4;} 100% { transform: rotate(-7deg); opacity:.18;} }
.harbor  { animation: hra-harbor 8s ease-in-out infinite; }
.sweepin { animation: hra-sweepin 16s ease-in-out infinite; }
.fld {
  width: 100%; box-sizing: border-box;
  background: #070E1A; border: 1px solid #1C2B40; color: #EAF0F7;
  font-family: Inter, system-ui, sans-serif; font-size: 15.5px;
  padding: 15px 16px; border-radius: 0;
  transition: border-color .3s ease, background-color .3s ease;
}
.fld::placeholder { color: #7591A8; }
.fld:focus { outline: none; border-color: #E7C98E; background: #09111F; }
.lbl {
  display: block; margin-bottom: 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; color: #8DA1B5;
}
.sub {
  position: relative; overflow: hidden;
  width: 100%; border: 0; cursor: pointer;
  background: #E7C98E; color: #04070E;
  font-family: Inter, system-ui, sans-serif; font-size: 15.5px; font-weight: 500;
  padding: 19px 30px;
  transition: background-color .3s ease;
}
.sub::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); opacity: 0;
  transition: left .8s cubic-bezier(.22,.7,.3,1), opacity .3s ease;
}
.sub:hover { background-color: #F3DAA6; }
.sub:hover::after { left: 125%; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .navlamp,.navbeam,.harbor,.sweepin { animation: none; }
  .fld,.sub,.sub::after { transition: none; }
}
.doc h2 {
  margin: 44px 0 0 0; font-family: Fraunces, Georgia, serif; font-weight: 400;
  font-size: 25px; line-height: 1.26; color: #FFFFFF;
}
.doc p { margin: 14px 0 0 0; font-size: 16.5px; line-height: 1.78; color: #A9BCD0; }
.doc ul { margin: 14px 0 0 0; padding-left: 20px; }
.doc li { margin: 9px 0 0 0; font-size: 16.5px; line-height: 1.74; color: #A9BCD0; }
.doc strong { color: #D8E3EE; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .navlamp,.navbeam { animation: none; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub[disabled] { opacity: .55; cursor: default; }
.sub[disabled]:hover { background-color: #E7C98E; }
.sub[disabled]:hover::after { left: -60%; opacity: 0; }
.fstatus { margin: 0; font-size: 14px; line-height: 1.6; color: #9FB3C7; min-height: 1.2em; }
.fstatus.err { color: #F3BCAA; }
.fdone { padding: 16px 0 10px 0; }
.fdone-h { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.2; color: #E7C98E; }
.fdone p { margin: 14px 0 0 0; font-size: 15.5px; line-height: 1.72; color: #A9BCD0; }