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

/* Google Fonts now loaded via <link> + preconnect in each page's <head>
   instead of @import, which blocks CSS parsing until the import resolves. */

: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; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

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; }

.gateway__lang{
  position:fixed;
  top: 1.6rem;
  right: 1.6rem;
  z-index:6;
  padding:.5em 1em;
  border:1px solid rgba(244,247,245,.5);
  border-radius:999px;
  color:#F4F7F5;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  background: rgba(20,24,26,.35);
  backdrop-filter: blur(4px);
}
.gateway__lang:hover{ background: rgba(20,24,26,.55); }

/* ==========================================================================
   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; }
}

/* Compact mobile gateway: show both destinations in the first viewport. */
@media (max-width: 600px){
  .gateway{
    height:100vh;
    height:100svh;
    min-height:0;
    flex-direction:column;
  }
  .gateway__side{
    width:100% !important;
    height:50%;
    min-height:0;
    flex:1 1 50%;
    padding:3.5rem 6vw 1rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:0;
  }
  .gateway__desc,
  .gateway__features,
  .gateway__side > div:not(.gateway__bg):not(.gateway__scrim){
    display:none;
  }
  .gateway__eyebrow{
    justify-content:center;
    font-size:.62rem;
    letter-spacing:.16em;
  }
  .gateway__title{
    font-size:clamp(2rem, 9.2vw, 3rem);
    line-height:1.04;
    margin:.35em 0 .55em;
    text-align:center;
  }
  .gateway__cta{
    align-self:center;
    justify-content:space-between;
    width:min(100%, 300px);
    margin:0;
    padding:.82em 1.1em;
    max-width:none;
    font-size:.82rem;
  }
  .gateway__logo{top:.8rem;}
  .gateway__logo img{width:clamp(105px, 28vw, 145px);}
  .gateway__lang{top:.8rem; right:.8rem; padding:.4em .75em; font-size:.72rem;}
  .gateway__side--water{text-align:center;}
  .gateway__side--water .gateway__eyebrow{justify-content:center; flex-direction:row;}
  .gateway__side--water .gateway__title{text-align:center;}
  .gateway__side--water .gateway__cta{margin-left:0;}
  .gateway:has(.gateway__side--land:hover) .gateway__side--land,
  .gateway:has(.gateway__side--water:hover) .gateway__side--water{width:100% !important;}
}

@media (max-width: 600px) and (max-height: 650px){
  .gateway__side{padding-top:3.2rem; padding-bottom:.7rem;}
  .gateway__title{font-size:clamp(1.8rem, 8.5vw, 2.5rem);}
  .gateway__cta{padding:.7em 1em;}
}


/* SBalance mobile homepage refinement — stronger hierarchy and optical centering */
@media (max-width: 600px){
  .gateway{
    overflow:hidden;
    min-height:100svh;
    height:100svh;
    gap:0;
  }
  .gateway__side{
    box-sizing:border-box;
    flex:0 0 50%;
    height:50%;
    min-height:0;
    padding:clamp(3.6rem, 9vh, 5rem) 7vw 1.4rem;
    justify-content:center;
    gap:.15rem;
    isolation:isolate;
  }
  /* Keep the imagery atmospheric while making the headings read immediately. */
  .gateway__side::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(8,13,15,.12), rgba(8,13,15,.28));
  }
  .gateway__eyebrow{
    font-size:clamp(.62rem, 2.2vw, .75rem);
    letter-spacing:.2em;
    margin:0 0 .55rem;
  }
  .gateway__title{
    font-size:clamp(2.35rem, 11.5vw, 3.6rem);
    line-height:.98;
    letter-spacing:-.045em;
    margin:.05em 0 .42em;
    max-width:100%;
    text-wrap:balance;
    text-shadow:0 3px 18px rgba(0,0,0,.28);
  }
  .gateway__cta{
    width:min(100%, 320px);
    min-height:3.35rem;
    box-sizing:border-box;
    padding:.85rem 1.15rem;
    border-radius:999px;
    font-size:.88rem;
    letter-spacing:.025em;
    margin-top:.25rem;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .gateway__cta-arrow{font-size:1.25rem;}
  .gateway__logo{top:.7rem;}
  .gateway__logo img{width:clamp(112px, 30vw, 148px);}
  .gateway__lang{top:.7rem; right:.7rem;}
  .gateway__side--water .gateway__title{max-width:11ch; margin-left:auto; margin-right:auto;}
}
@media (max-width: 600px) and (max-height: 700px){
  .gateway__side{padding-top:3.25rem; padding-bottom:.8rem;}
  .gateway__title{font-size:clamp(2.05rem, 10vw, 3rem);}
  .gateway__cta{min-height:3rem; padding:.72rem 1rem;}
}
@media (max-width: 360px){
  .gateway__title{font-size:clamp(1.9rem, 10.5vw, 2.5rem);}
  .gateway__cta{width:100%; font-size:.78rem;}
}