:root {
  --footer-h: 64px;
}
html, body {
  overflow-x: hidden;
}
body {
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  margin: 0;
}
.intro {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: top 850ms cubic-bezier(.2,.9,.25,1), transform 850ms cubic-bezier(.2,.9,.25,1);
  z-index: 3;
  width: calc(100% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 700ms cubic-bezier(.2,.9,.25,1), opacity 700ms cubic-bezier(.2,.9,.25,1);
  will-change: transform, opacity;
}
body.layer-open .intro {
  top: 0;
  transform: translate(-50%, 0);
}
body.layer-open .intro-text {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}
.logo-container {
  background: rgba(15, 23, 42, 0.72);
  width: 100%;      
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  height: 120px;
}
.gorbit-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  display: flex;
  gap: 0.1em;
  text-decoration: none;
  cursor: pointer;
}
.gorbit-logo:focus-visible {
  outline: 2px solid rgba(241, 245, 249, 0.55);
  outline-offset: 10px;
  border-radius: 12px;
}
.gorbit-logo span {
  opacity: 0;
  transform: translateY(40px) scale(0.8) rotate(-10deg);
  display: inline-block;
  transition: all 0.5s cubic-bezier(.68,-0.55,.27,1.55);
  height: 85px;
  line-height: 85px;
}
.gorbit-logo span.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}
.orbit-container {
  position: absolute;
  left: -8px;
  top: 19px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: l16 1s infinite linear;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
}
.loader.visible {
  opacity: 1;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before {
  border-color: #f03355 #0000;
  animation: inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.loader::after {
  margin: 8px;
}
@keyframes l16 { 
  100%{transform: rotate(1turn)}
}
.subtitle {
  margin-top: 32px;
  text-align: center;
  font-size: 1.25rem;
  color: #f1f5f9;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  min-height: 2.5em;
  display: flex;
  justify-content: center;
  gap: 0.05em;
  font-size: clamp(1rem, 3vw, 2rem);
}
.subtitle span {
  opacity: 0;
  transform: translateY(24px) scale(0.95) skewY(8deg);
  display: inline-block;
  transition: all 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
.subtitle span.visible {
  opacity: 1;
  transform: translateY(0) scale(1) skewY(0deg);
}
.arrow-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
}
.arrow-wrap.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation:
    arrowReveal 650ms cubic-bezier(.68,-0.55,.27,1.55) both,
    arrowBounce 1400ms ease-in-out 850ms infinite;
}
.arrow {
  width: 18px;
  height: 18px;
  border-right: 3px solid #f1f5f9;
  border-bottom: 3px solid #f1f5f9;
  transform: rotate(45deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
@keyframes arrowReveal {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.7);
  }
  65% {
    opacity: 1;
    transform: translateY(6px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(6px) scale(1);
  }
}

.content-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #0f172a;
  border-top: 1px solid rgba(241, 245, 249, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 233px 0 calc(48px + var(--footer-h));
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  pointer-events: none;
  transform: translate3d(60px, 0, 0);
  transition: transform 700ms cubic-bezier(.2,.9,.25,1), opacity 700ms cubic-bezier(.2,.9,.25,1);
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  .content-layer {
    padding: 180px 0 calc(48px + var(--footer-h));
  }
}

/* Main layer: keep the original first reveal (bottom -> top) when the arrow opens layers. */
#mainLayer {
  transform: translate3d(0, 100%, 0);
  transition: transform 850ms cubic-bezier(.2,.9,.25,1), opacity 700ms cubic-bezier(.2,.9,.25,1);
}
body.layer-open .content-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
body.layer-open #mainLayer.is-active {
  transform: translate3d(0, 0, 0);
}
/* When switching away from main while layers are open, it should still slide out to the right. */
body.layer-open #mainLayer:not(.is-active) {
  transform: translate3d(60px, 0, 0);
}
.layer-inner {
  width: min(980px, 92vw);
  margin: 0;
  color: #f1f5f9;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.01em;
  position: relative;
}

.panel-visual {
  position: absolute;
  inset: -28px -28px -28px -28px;
  background-repeat: no-repeat;
  background-position: right 10px top 0;
  background-size: min(560px, 86vw) auto;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  background-blend-mode: soft-light, soft-light, normal;
  filter: saturate(1.08) contrast(1.06);
}

@media (max-width: 640px) {
  .panel-visual {
    background-position: right 10px top 120px;
  }
}
.layer-inner > *:not(.panel-visual) {
  position: relative;
  z-index: 1;
}

.panel-visual--main {
  background-image:
    radial-gradient(620px 360px at 18% 18%, rgba(240, 51, 85, 0.26), rgba(240, 51, 85, 0) 62%),
    radial-gradient(520px 320px at 78% 10%, rgba(241, 245, 249, 0.16), rgba(241, 245, 249, 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23f1f5f9' stroke-opacity='0.28'%3E%3Crect x='54' y='88' width='340' height='220' rx='18'/%3E%3Cpath d='M54 128h340'/%3E%3Ccircle cx='88' cy='110' r='6'/%3E%3Ccircle cx='112' cy='110' r='6'/%3E%3Ccircle cx='136' cy='110' r='6'/%3E%3Crect x='102' y='156' width='244' height='20' rx='10'/%3E%3Crect x='102' y='192' width='196' height='14' rx='7'/%3E%3Crect x='102' y='214' width='212' height='14' rx='7'/%3E%3Crect x='434' y='140' width='232' height='160' rx='18'/%3E%3Cpath d='M434 176h232'/%3E%3Crect x='468' y='206' width='164' height='18' rx='9'/%3E%3Crect x='468' y='234' width='132' height='12' rx='6'/%3E%3Crect x='434' y='320' width='294' height='56' rx='18'/%3E%3Cpath d='M468 348h226'/%3E%3C/g%3E%3Cg fill='%23f03355' fill-opacity='0.14'%3E%3Crect x='78' y='250' width='124' height='36' rx='18'/%3E%3Crect x='458' y='332' width='108' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E");
}
.panel-visual--responsive {
  background-image:
    radial-gradient(660px 380px at 20% 22%, rgba(241, 245, 249, 0.16), rgba(241, 245, 249, 0) 60%),
    radial-gradient(720px 420px at 78% 14%, rgba(240, 51, 85, 0.24), rgba(240, 51, 85, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23f1f5f9' stroke-opacity='0.30'%3E%3Crect x='64' y='88' width='440' height='260' rx='20'/%3E%3Cpath d='M64 128h440'/%3E%3Ccircle cx='94' cy='110' r='6'/%3E%3Ccircle cx='118' cy='110' r='6'/%3E%3Ccircle cx='142' cy='110' r='6'/%3E%3Crect x='110' y='168' width='220' height='18' rx='9'/%3E%3Crect x='110' y='198' width='304' height='14' rx='7'/%3E%3Crect x='110' y='222' width='276' height='14' rx='7'/%3E%3Crect x='110' y='246' width='248' height='14' rx='7'/%3E%3Crect x='520' y='148' width='150' height='260' rx='26'/%3E%3Crect x='542' y='186' width='106' height='170' rx='16'/%3E%3Ccircle cx='595' cy='372' r='10'/%3E%3C/g%3E%3Cg fill='%23f03355' fill-opacity='0.14'%3E%3Crect x='110' y='286' width='140' height='38' rx='19'/%3E%3Crect x='542' y='206' width='86' height='22' rx='11'/%3E%3C/g%3E%3C/svg%3E");
}
.panel-visual--ecommerce {
  background-image:
    radial-gradient(740px 420px at 24% 16%, rgba(240, 51, 85, 0.24), rgba(240, 51, 85, 0) 62%),
    radial-gradient(520px 340px at 76% 14%, rgba(241, 245, 249, 0.16), rgba(241, 245, 249, 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23f1f5f9' stroke-opacity='0.30'%3E%3Crect x='72' y='96' width='520' height='280' rx='20'/%3E%3Cpath d='M72 136h520'/%3E%3Ccircle cx='104' cy='118' r='6'/%3E%3Ccircle cx='128' cy='118' r='6'/%3E%3Ccircle cx='152' cy='118' r='6'/%3E%3Cg%3E%3Crect x='116' y='170' width='132' height='92' rx='16'/%3E%3Crect x='264' y='170' width='132' height='92' rx='16'/%3E%3Crect x='412' y='170' width='132' height='92' rx='16'/%3E%3Crect x='116' y='278' width='132' height='78' rx='16'/%3E%3Crect x='264' y='278' width='132' height='78' rx='16'/%3E%3Crect x='412' y='278' width='132' height='78' rx='16'/%3E%3C/g%3E%3Cpath d='M632 180h44l-8 40h-44z'/%3E%3Cpath d='M636 180l-6-18h-16'/%3E%3Ccircle cx='642' cy='232' r='8'/%3E%3Ccircle cx='668' cy='232' r='8'/%3E%3C/g%3E%3Cg fill='%23f03355' fill-opacity='0.14'%3E%3Crect x='606' y='106' width='90' height='44' rx='22'/%3E%3C/g%3E%3C/svg%3E");
}
.panel-visual--cms {
  background-image:
    radial-gradient(640px 380px at 22% 16%, rgba(241, 245, 249, 0.16), rgba(241, 245, 249, 0) 58%),
    radial-gradient(760px 440px at 74% 18%, rgba(240, 51, 85, 0.24), rgba(240, 51, 85, 0) 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23f1f5f9' stroke-opacity='0.30'%3E%3Crect x='72' y='92' width='560' height='300' rx='20'/%3E%3Cpath d='M72 132h560'/%3E%3Ccircle cx='104' cy='114' r='6'/%3E%3Ccircle cx='128' cy='114' r='6'/%3E%3Ccircle cx='152' cy='114' r='6'/%3E%3Crect x='96' y='156' width='150' height='212' rx='18'/%3E%3Crect x='270' y='156' width='336' height='70' rx='18'/%3E%3Crect x='270' y='242' width='160' height='126' rx='18'/%3E%3Crect x='446' y='242' width='160' height='126' rx='18'/%3E%3Cpath d='M122 192h98'/%3E%3Cpath d='M122 222h86'/%3E%3Cpath d='M122 252h92'/%3E%3Cpath d='M294 190h188'/%3E%3Cpath d='M294 278h96'/%3E%3Cpath d='M470 278h96'/%3E%3C/g%3E%3Cg fill='%23f03355' fill-opacity='0.14'%3E%3Crect x='294' y='202' width='128' height='18' rx='9'/%3E%3Crect x='122' y='280' width='84' height='18' rx='9'/%3E%3C/g%3E%3C/svg%3E");
}
.panel-visual--about {
  background-image:
    radial-gradient(680px 420px at 22% 18%, rgba(240, 51, 85, 0.24), rgba(240, 51, 85, 0) 62%),
    radial-gradient(560px 360px at 74% 14%, rgba(241, 245, 249, 0.16), rgba(241, 245, 249, 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23f1f5f9' stroke-opacity='0.30'%3E%3Cpath d='M110 316c84-40 160-60 238-60s154 20 238 60'/%3E%3Cpath d='M138 292c74-34 142-50 210-50s136 16 210 50'/%3E%3Crect x='128' y='112' width='464' height='236' rx='20'/%3E%3Cpath d='M128 150h464'/%3E%3Ccircle cx='160' cy='130' r='6'/%3E%3Ccircle cx='184' cy='130' r='6'/%3E%3Ccircle cx='208' cy='130' r='6'/%3E%3Cpath d='M244 214h232'/%3E%3Cpath d='M244 242h188'/%3E%3Cpath d='M244 270h210'/%3E%3Cpath d='M512 214h38'/%3E%3Cpath d='M512 242h38'/%3E%3Cpath d='M512 270h38'/%3E%3Cpath d='M360 170c-18 0-32 14-32 32 0 28 32 60 32 60s32-32 32-60c0-18-14-32-32-32z'/%3E%3Ccircle cx='360' cy='202' r='10'/%3E%3C/g%3E%3Cg fill='%23f03355' fill-opacity='0.14'%3E%3Crect x='244' y='298' width='160' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E");
}

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border-top: 1px solid rgba(241, 245, 249, 0.12);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 650ms cubic-bezier(.2,.9,.25,1), opacity 650ms cubic-bezier(.2,.9,.25,1);
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  pointer-events: none;
}
body.layer-open .site-footer {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.o-accent{
  color: #f03355;
}
.footer-brand{
  color: rgba(241, 245, 249, 0.92);
  text-decoration: none;
  font-weight: 300;
}
.footer-inner {
  width: min(980px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  font-family: 'Montserrat', sans-serif;
  color: rgba(241, 245, 249, 0.92);
  letter-spacing: 0.01em;
  font-size: clamp(0.78rem, 1.4vw, 0.8rem);
}
.footer-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer-nav a {
  color: rgba(241, 245, 249, 0.92);
  text-decoration: none;
  font-weight: 300;
  opacity: 0.9;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}
@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 28px;
  }
}
.about-lead {
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  max-width: 70ch;
}
.about-contact {
  margin-top: 26px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(241, 245, 249, 0.12);
  background: rgba(2, 6, 23, 0.22);
  display: grid;
  gap: 10px;
  max-width: 70ch;
}
.contact-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
  font-size: clamp(0.82rem, 1.6vw, 0.84rem);
  line-height: 1.6;
  font-weight: 300;
  opacity: 0.95;
}
.contact-label {
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.01em;
}
.contact-email {
  color: rgba(241, 245, 249, 0.95);
  text-decoration: none;
  font-weight: 300;
}
.contact-email:hover,
.contact-email:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-card {
  border: 1px solid rgba(241, 245, 249, 0.14);
  border-radius: 16px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.35);
}
.contact-title {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 2.1vw, 1.15rem);
}
.contact-note {
  margin: 0 0 12px;
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  line-height: 1.6;
  opacity: 0.92;
  font-weight: 300;
}
.contact-form {
  display: grid;
  gap: 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-h) + 18px);
  transform: translate(-50%, 12px);
  z-index: 999;
  width: min(520px, calc(100% - 24px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.9,.25,1), transform 220ms cubic-bezier(.2,.9,.25,1);
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toast__inner {
  border: 1px solid rgba(241, 245, 249, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #f1f5f9;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  line-height: 1.5;
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: clamp(0.78rem, 1.4vw, 0.88rem);
  opacity: 0.9;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.field input,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(241, 245, 249, 0.16);
  background: rgba(2, 6, 23, 0.35);
  color: #f1f5f9;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  outline: none;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: rgba(241, 245, 249, 0.45);
  box-shadow: 0 0 0 4px rgba(241, 245, 249, 0.08);
}
.form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}
.btn {
  border: 1px solid rgba(241, 245, 249, 0.18);
  background: rgba(241, 245, 249, 0.08);
  color: #f1f5f9;
  border-radius: 999px;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.btn:hover,
.btn:focus-visible {
  background: rgba(241, 245, 249, 0.12);
}
.layer-text {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  font-weight: 300;
  line-height: 1.65;
  margin: 0 0 36px;
}
.service-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-links a {
  color: #f1f5f9;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  letter-spacing: 0.02em;
  opacity: 0.95;
}
.service-links a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(241, 245, 249, 0.85);
  border-bottom: 2px solid rgba(241, 245, 249, 0.85);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}
.service-links a:hover,
.service-links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.layer-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f1f5f9;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  opacity: 0.9;
  margin: 0 0 14px;
}
.back-link::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid rgba(241, 245, 249, 0.85);
  border-bottom: 2px solid rgba(241, 245, 249, 0.85);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.back-link:hover,
.back-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro-text,
  .content-layer {
    transition: none;
  }
  .arrow-wrap.visible {
    animation: none;
  }
  .site-footer {
    transition: none;
  }
}