/* ==========================================================================
   Sbalance — Gateway Landing
   Two brands, one origin. Segway (land) / Water (lake & river).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --ink:        #0D1012;
  --land-bg:    #14181A;
  --water-bg:   #071A26;
  --land:       #C6FF4D;
  --land-dim:   #9FCE3D;
  --water:      #2BE7D6;
  --water-dim:  #22B8AC;
  --paper:      #F4F7F5;
  --mist:       #AEB8B6;

  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

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

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }

/* Skip link / focus visibility */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

/* ==========================================================================
   Gateway hero — full height split
   ========================================================================== */

.gateway{
  position:relative;
  height:100vh;
  min-height:640px;
  width:100%;
  display:flex;
  overflow:hidden;
}

.gateway__side{
  position:relative;
  width:50%;
  height:100%;
  display:grid;
  grid-template-rows:
    auto            /* eyebrow            */
    auto            /* headline           */
    minmax(3.6em,auto) /* description     */
    1fr             /* flexible spacer    */
    auto            /* features           */
    auto;           /* CTA                */
  padding: clamp(9.5rem, 20vh, 13rem) 4.2vw 5.5vh;
  transition: width .65s cubic-bezier(.16,.84,.44,1), padding .65s cubic-bezier(.16,.84,.44,1);
  z-index:1;
}

.gateway:has(.gateway__side--land:hover) .gateway__side--land,
.gateway:has(.gateway__side--water:hover) .gateway__side--water{
  width:56%;
}
.gateway:has(.gateway__side--land:hover) .gateway__side--water,
.gateway:has(.gateway__side--water:hover) .gateway__side--land{
  width:44%;
}

.gateway__side--land{ background: var(--land-bg); }
.gateway__side--water{ background: var(--water-bg); }

.gateway__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  z-index:-2;
}
.gateway__side--land .gateway__bg{ background-image:url('../images/segway-hero-v2.jpg'); }
.gateway__side--water .gateway__bg{ background-image:url('../images/water-hero-v2.jpg'); }

.gateway__scrim{
  position:absolute; inset:0;
  z-index:-1;
}
.gateway__side--land .gateway__scrim{
  background: linear-gradient(180deg, rgba(20,24,26,.55) 0%, rgba(20,24,26,.72) 45%, rgba(20,24,26,.94) 100%);
}
.gateway__side--water .gateway__scrim{
  background: linear-gradient(180deg, rgba(7,26,38,.55) 0%, rgba(7,26,38,.72) 45%, rgba(7,26,38,.94) 100%);
}

/* Eyebrow */
.gateway__eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  display:flex;
  align-items:center;
  gap:.6em;
  width:100%;
}
.gateway__side--land .gateway__eyebrow{ color: var(--land); }
.gateway__side--water .gateway__eyebrow{ color: var(--water); }
.gateway__eyebrow::before{
  content:'';
  width:.5em; height:.5em;
  border-radius:50%;
  background: currentColor;
  box-shadow: 0 0 .8em currentColor;
}

/* Headline */
.gateway__title{
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.12;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  letter-spacing: -.01em;
  margin-top: .85em;
}
.gateway__title span{ display:block; }
.gateway__title span + span{ margin-top: .06em; }
.gateway__side--land .gateway__title span:last-child{ color: var(--land); }
.gateway__side--water .gateway__title span:last-child{ color: var(--water); }

/* Description */
.gateway__desc{
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mist);
  max-width: 30ch;
  margin-top: .9em;
  align-self:start;
}

/* Features — mirrored row, identical height both sides */
.gateway__features{
  display:flex;
  flex-direction:column;
  gap: 1rem;
  border-top: 1px solid rgba(244,247,245,.16);
  padding-top: 1.5rem;
  width:100%;
}
.gateway__feature{
  display:flex;
  align-items:center;
  gap:.9em;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
}
.gateway__feature-dot{
  width:.5em; height:.5em;
  flex:0 0 auto;
  border-radius:50%;
  background: currentColor;
  box-shadow: 0 0 .6em currentColor;
}
.gateway__side--land .gateway__feature-dot{ color: var(--land); }
.gateway__side--water .gateway__feature-dot{ color: var(--water); }

/* CTA */
.gateway__cta{
  margin-top: 1.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.2em;
  width:100%;
  max-width: 320px;
  padding: 1em 1.3em;
  font-family: var(--font-body);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  border-radius: 999px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.gateway__side--land .gateway__cta{ background: var(--land); color: var(--land-bg); }
.gateway__side--water .gateway__cta{ background: var(--water); color: var(--water-bg); }
.gateway__cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.gateway__cta-arrow{ font-size:1.1em; transition: transform .3s ease; }
.gateway__cta:hover .gateway__cta-arrow{ transform: translateX(4px); }

/* ==========================================================================
   Water side — mirrored to the right edge
   ========================================================================== */
.gateway__side--water{
  text-align: right;
}
.gateway__side--water .gateway__eyebrow{
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.gateway__side--water .gateway__desc{
  margin-left: auto;
  margin-right: 0;
}
.gateway__side--water .gateway__feature{
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.gateway__side--water .gateway__cta{
  margin-left: auto;
}

/* Center logo — no seam behind it anymore, so it needs its own presence */
.gateway__logo{
  position:absolute;
  top: 3.4vh;
  left:50%;
  transform: translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
.gateway__logo img{ width: clamp(180px, 17vw, 320px); }

/* Center mark — sits at the seam, reinforces "one brand, two paths" */
.gateway__mark{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:4;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.3rem;
  padding: 3.2rem 2.2rem;
  transition: left .65s cubic-bezier(.16,.84,.44,1);
}
.gateway:has(.gateway__side--land:hover) .gateway__mark{ left:56%; }
.gateway:has(.gateway__side--water:hover) .gateway__mark{ left:44%; }
.gateway__mark::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(closest-side, rgba(5,8,9,.68) 0%, rgba(5,8,9,.4) 55%, transparent 78%);
  z-index:-1;
}
.gateway__mark svg{
  width: 62px; height: 62px;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.gateway__mark-land{ stroke: var(--land); }
.gateway__mark-water{ stroke: var(--water); }
.gateway__mark-text{
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 1.15vw, 1.05rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  text-align:center;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.gateway__mark-text span{ display:block; }
.gateway__mark-text span:first-child{ font-weight:700; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .gateway__side, .gateway__cta, .gateway__cta-arrow, .gateway__mark{ transition:none; }
}

/* ==========================================================================
   Responsive — stack vertically
   ========================================================================== */
@media (max-width: 880px){
  .gateway{ flex-direction:column; height:auto; min-height:100vh; }
  .gateway__side{
    width:100% !important;
    height:auto;
    min-height:56vh;
    padding: 10.5rem 6vw 3rem;
  }
  .gateway:has(.gateway__side--land:hover) .gateway__side--land,
  .gateway:has(.gateway__side--water:hover) .gateway__side--water{ width:100% !important; }
  .gateway__logo{ top:1.8rem; }
  .gateway__logo img{ width: clamp(140px, 34vw, 220px); }
  .gateway__title{ font-size: clamp(2rem, 9vw, 2.8rem); }
  .gateway__desc{ max-width:42ch; }
  .gateway__mark{ display:none; }
  .gateway__side--water{ text-align:left; }
  .gateway__side--water .gateway__eyebrow,
  .gateway__side--water .gateway__feature{
    justify-content:flex-start;
    flex-direction:row;
  }
  .gateway__side--water .gateway__desc{ margin-left:0; }
  .gateway__side--water .gateway__cta{ margin-left:0; }
}