/* SeagullVPN landing page — no external libraries */
:root {
  --primary: #026ED1;
  --teal: #01CAC2;
  --teal-dark: #01AFA8;
  --navy: #04285C;
  --shadow-blue: #33506F;
  --title-blue: #183B5B;
  --secondary-text: #58708A;
  --tertiary-text: #6B8196;
  --line: #8CA4B8;
  --surface: #FFFFFF;
  --bg-a: #F5F9FF;
  --bg-b: #EAF9F7;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-a); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  color: var(--navy);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.scene {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.98) 0 6%, rgba(255,255,255,.36) 15%, transparent 33%),
    linear-gradient(135deg, var(--bg-a), var(--bg-b));
  isolation: isolate;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 53%, rgba(1,202,194,.045) 54% 61%, transparent 62%),
    radial-gradient(circle at 20% 15%, rgba(2,110,209,.08), transparent 31%);
  z-index: -2;
}
.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .32;
  pointer-events: none;
  z-index: -1;
}
.ambient-one {
  width: 34vw; height: 34vw;
  background: var(--primary);
  left: -19vw; top: -14vw;
}
.ambient-two {
  width: 30vw; height: 30vw;
  background: var(--teal);
  right: -12vw; top: 18vh;
  opacity: .18;
}

.topbar {
  position: relative;
  z-index: 30;
  height: 84px;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.025em;
}
.mini-brand-icon {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(2,110,209,.10));
}

.hero {
  position: relative;
  z-index: 4;
  width: min(1240px, calc(100% - 48px));
  min-height: calc(100svh - 142px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(430px, .92fr) minmax(490px, 1.08fr);
  align-items: center;
  gap: 20px;
  padding: 34px 0 132px;
}
.copy {
  position: relative;
  z-index: 25;
  align-self: center;
  max-width: 620px;
  padding-bottom: 4vh;
}
.logo-shell {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(140,164,184,.25);
  border-radius: 26px;
  box-shadow: 0 14px 38px rgba(51,80,111,.11);
  backdrop-filter: blur(14px);
}
.app-badge {
  width: 78px;
  height: 78px;
  display: block;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 7px 14px rgba(4,40,92,.12));
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .17em;
}
h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(64px, 7vw, 102px);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 850;
}
h1 span {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  max-width: 570px;
  margin: 26px 0 30px;
  color: var(--secondary-text);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.58;
}
.actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}
.download {
  min-width: 238px;
  height: 70px;
  display: grid;
  grid-template-columns: 48px 1fr 22px;
  align-items: center;
  gap: 12px;
  padding: 0 17px 0 11px;
  border-radius: 21px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  will-change: transform;
}
.download:hover { transform: translateY(-4px); }
.download:active { transform: translateY(-1px) scale(.992); }
.download.primary {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  box-shadow: 0 16px 30px rgba(4,40,92,.18), 0 8px 18px rgba(1,202,194,.12);
}
.download.primary:hover {
  box-shadow: 0 20px 34px rgba(4,40,92,.23), 0 10px 22px rgba(1,202,194,.18);
  filter: saturate(1.04);
}
.download.secondary {
  color: var(--navy);
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(140,164,184,.31);
  box-shadow: 0 12px 28px rgba(51,80,111,.09);
  backdrop-filter: blur(12px);
}
.download.secondary:hover {
  border-color: rgba(2,110,209,.28);
  box-shadow: 0 17px 32px rgba(51,80,111,.12);
}
.icon-box {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
}
.primary .icon-box { background: rgba(255,255,255,.14); }
.secondary .icon-box { background: linear-gradient(135deg, rgba(2,110,209,.09), rgba(1,202,194,.09)); }
.icon-box svg { width: 27px; height: 27px; fill: currentColor; }
.button-copy { display: block; min-width: 0; }
.button-copy small {
  display: block;
  margin-bottom: 1px;
  opacity: .73;
  font-size: 11px;
  line-height: 1;
}
.button-copy strong {
  display: block;
  font-size: 19px;
  line-height: 1.18;
}
.arrow {
  font-size: 22px;
  opacity: .82;
  line-height: 1;
}
.micro {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 20px;
  margin-top: 20px;
  color: var(--tertiary-text);
  font-size: 12px;
}
.micro span { display: inline-flex; align-items: center; gap: 7px; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(1,202,194,.10);
}

.world {
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100vw;
  height: min(80vh, 760px);
  transform: translateX(-50%);
  pointer-events: none;
}

.sun {
  position: absolute;
  right: 21%;
  top: 11%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,.5) 35%, rgba(1,202,194,.06) 67%, transparent 70%);
  filter: blur(.2px);
  opacity: .8;
}

.island {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 34%;
  width: 46%;
  height: 12%;
  opacity: .34;
  background: #7FADB7;
  clip-path: polygon(0 78%, 10% 68%, 16% 58%, 21% 61%, 28% 41%, 37% 50%, 45% 31%, 54% 55%, 62% 44%, 72% 57%, 80% 52%, 88% 65%, 100% 70%, 100% 100%, 0 100%);
  filter: blur(.3px);
}

.lighthouse-stage {
  position: absolute;
  z-index: 10;
  right: clamp(5vw, 9vw, 150px);
  bottom: 30.5%;
  width: 280px;
  height: 315px;
  transform: scale(.82);
  transform-origin: bottom center;
}
.lighthouse {
  position: absolute;
  z-index: 8;
  right: 62px;
  bottom: 40px;
  width: 75px;
  height: 235px;
  filter: drop-shadow(0 14px 12px rgba(4,40,92,.12));
}
.lighthouse-cap {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 5px;
  width: 65px;
  height: 28px;
  background: var(--navy);
  clip-path: polygon(50% 0, 100% 84%, 88% 100%, 12% 100%, 0 84%);
}
.lighthouse-room {
  position: absolute;
  z-index: 3;
  top: 25px;
  left: 9px;
  width: 57px;
  height: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  padding: 3px 6px;
  border: 4px solid var(--navy);
  background: rgba(255,255,255,.88);
  border-radius: 3px;
  overflow: visible;
}
.lighthouse-room i {
  width: 3px;
  height: 100%;
  display: block;
  background: rgba(4,40,92,.65);
}
.light {
  position: absolute;
  z-index: -1;
  width: 21px;
  height: 21px;
  left: 15px;
  top: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px 7px rgba(255,242,164,.72);
}
.lighthouse-gallery {
  position: absolute;
  top: 62px;
  left: 0;
  width: 75px;
  height: 9px;
  border-radius: 3px;
  background: var(--navy);
}
.tower {
  position: absolute;
  z-index: 1;
  top: 68px;
  left: 13px;
  width: 49px;
  height: 154px;
  overflow: hidden;
  background: linear-gradient(90deg, #EDF4F4, #FFFFFF 48%, #DDE9E8);
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}
.stripe {
  position: absolute;
  left: -7px;
  width: 65px;
  height: 23px;
  background: linear-gradient(90deg, #035FB5, #026ED1 54%, #035AA9);
  transform: rotate(-2deg);
}
.stripe-one { top: 42px; }
.stripe-two { top: 101px; }
.window {
  position: absolute;
  z-index: 3;
  left: 20px;
  width: 10px;
  height: 16px;
  border-radius: 8px 8px 2px 2px;
  background: var(--navy);
}
.window-one { top: 15px; }
.window-two { top: 78px; }
.door {
  position: absolute;
  z-index: 5;
  bottom: 13px;
  left: 31px;
  width: 17px;
  height: 27px;
  border-radius: 8px 8px 0 0;
  background: var(--navy);
}
.beam {
  position: absolute;
  z-index: 4;
  right: 123px;
  top: 38px;
  width: 385px;
  height: 110px;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent 0, rgba(255,248,190,.08) 35%, rgba(255,247,180,.35) 88%, rgba(255,255,255,.5));
  clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
  filter: blur(2px);
  animation: beamSweep 7s ease-in-out infinite alternate;
}
@keyframes beamSweep {
  0% { transform: rotate(-13deg); opacity: .18; }
  48% { opacity: .65; }
  100% { transform: rotate(12deg); opacity: .17; }
}
.rock {
  position: absolute;
  z-index: 6;
  bottom: 25px;
  background: linear-gradient(150deg, #6B8196, #33506F);
  box-shadow: inset 10px 8px 18px rgba(255,255,255,.08);
}
.rock-one {
  right: 20px; width: 170px; height: 72px;
  clip-path: polygon(4% 70%, 23% 42%, 36% 45%, 49% 12%, 67% 35%, 77% 26%, 100% 61%, 96% 100%, 0 100%);
}
.rock-two {
  right: 155px; width: 90px; height: 42px;
  clip-path: polygon(0 73%, 30% 31%, 55% 54%, 72% 20%, 100% 73%, 100% 100%, 0 100%);
  opacity: .84;
}
.rock-three {
  right: -20px; width: 85px; height: 37px;
  clip-path: polygon(0 70%, 39% 19%, 62% 49%, 100% 42%, 100% 100%, 0 100%);
}
.grass {
  position: absolute;
  z-index: 7;
  bottom: 80px;
  width: 60px;
  height: 28px;
  border-bottom: 4px solid #5E887C;
}
.grass::before, .grass::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 26px;
  background: #5E887C;
  transform-origin: bottom;
}
.grass::before { left: 21px; transform: rotate(-24deg); }
.grass::after { left: 34px; transform: rotate(22deg); }
.grass-one { right: 12px; }
.grass-two { right: 182px; bottom: 58px; transform: scale(.7); }

.sea {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 7.5%;
  height: 38%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(79,196,210,.62), rgba(2,110,209,.68) 56%, #0D5E9B 100%);
  box-shadow: inset 0 13px 35px rgba(255,255,255,.18);
}
.sea-gradient {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    radial-gradient(ellipse at 55% 1%, rgba(255,255,255,.48), transparent 32%),
    linear-gradient(130deg, rgba(1,202,194,.2), transparent 40%);
}
.wave {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 74%;
}
.wave path { fill: currentColor; }
.wave.back {
  top: -15%;
  color: rgba(130,224,222,.50);
  animation: waveA 8.5s ease-in-out infinite alternate;
}
.wave.middle {
  top: 4%;
  color: rgba(36,151,196,.58);
  animation: waveB 6.8s ease-in-out infinite alternate;
}
.wave.front {
  top: 23%;
  color: rgba(2,95,166,.65);
  animation: waveA 5.5s ease-in-out infinite alternate-reverse;
}
@keyframes waveA {
  from { transform: translateX(-2.2%) translateY(0) scaleX(1.01); }
  to { transform: translateX(2.6%) translateY(8px) scaleX(.99); }
}
@keyframes waveB {
  from { transform: translateX(1.9%) translateY(4px); }
  to { transform: translateX(-2.8%) translateY(-5px); }
}
.foam {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  filter: blur(.2px);
  animation: foamMove 5.3s ease-in-out infinite alternate;
}
.f1 { top: 30%; left: 29%; width: 14%; }
.f2 { top: 54%; left: 48%; width: 10%; animation-delay: -1.2s; }
.f3 { top: 39%; left: 69%; width: 16%; animation-delay: -2.4s; }
.f4 { top: 68%; left: 81%; width: 9%; animation-delay: -.6s; }
@keyframes foamMove {
  from { transform: translateX(-12px) scaleX(.78); opacity: .25; }
  to { transform: translateX(24px) scaleX(1.18); opacity: .7; }
}

.beach {
  position: absolute;
  z-index: 12;
  left: -4vw;
  right: -4vw;
  bottom: -7.5%;
  height: 28%;
  transform: rotate(-2deg);
  border-radius: 48% 52% 0 0 / 22% 20% 0 0;
  background:
    radial-gradient(ellipse at 57% 5%, rgba(255,255,255,.64), transparent 17%),
    linear-gradient(180deg, #F5E2BD 0%, #EFD3A4 44%, #DFB980 100%);
  box-shadow: 0 -7px 18px rgba(255,255,255,.25);
}
.shore {
  position: absolute;
  top: -6px;
  left: 15%;
  right: 1%;
  height: 18px;
  border-top: 4px solid rgba(255,255,255,.92);
  border-radius: 50%;
  filter: blur(.3px);
  animation: shorePulse 4.2s ease-in-out infinite alternate;
}
.shore-two {
  top: 3px;
  left: 33%;
  right: 7%;
  border-top-width: 2px;
  opacity: .46;
  animation-delay: -1.8s;
}
@keyframes shorePulse {
  from { transform: translateY(-4px) scaleY(.75); opacity: .42; }
  to { transform: translateY(5px) scaleY(1.08); opacity: .92; }
}
.pebble {
  position: absolute;
  border-radius: 50%;
  background: rgba(107,129,150,.28);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.45);
}
.p1 { width: 7px; height: 5px; left: 41%; top: 56%; }
.p2 { width: 4px; height: 3px; left: 53%; top: 69%; }
.p3 { width: 9px; height: 5px; left: 68%; top: 49%; }
.p4 { width: 5px; height: 4px; left: 78%; top: 72%; }

.bird {
  --scale: 1;
  position: absolute;
  z-index: 20;
  width: 32px;
  height: 16px;
  transform: scale(var(--scale));
  opacity: .78;
  animation: fly linear infinite;
}
.bird span {
  position: absolute;
  top: 5px;
  width: 18px;
  height: 8px;
  border-top: 2px solid var(--navy);
  border-radius: 50%;
  transform-origin: bottom center;
  animation: flap 1.35s ease-in-out infinite alternate;
}
.bird span:first-child { left: 0; transform: rotate(14deg); }
.bird span:last-child { right: 0; transform: rotate(-14deg); }
.bird-a { --scale: .9; top: 16%; left: 32%; animation-duration: 15s; }
.bird-b { --scale: .58; top: 27%; left: 48%; animation-duration: 19s; animation-delay: -8s; opacity: .5; }
.bird-c { --scale: .72; top: 12%; left: 62%; animation-duration: 17s; animation-delay: -4s; }
.bird-d { --scale: .48; top: 35%; left: 68%; animation-duration: 23s; animation-delay: -13s; opacity: .45; }
.bird-e { --scale: .62; top: 24%; left: 18%; animation-duration: 21s; animation-delay: -11s; opacity: .6; }
@keyframes flap {
  from { height: 5px; transform: rotate(8deg); }
  to { height: 11px; transform: rotate(23deg); }
}
@keyframes fly {
  0% { translate: -45px 5px; }
  45% { translate: 24px -10px; }
  100% { translate: 105px 2px; }
}

footer {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 48px));
  display: flex;
  justify-content: space-between;
  color: rgba(4,40,92,.46);
  font-size: 11px;
  pointer-events: none;
}

/* smaller desktops */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: calc(100svh - 118px);
    padding-bottom: 155px;
  }
  .copy {
    max-width: 600px;
    padding-bottom: 12vh;
  }
  .world {
    width: 100vw;
    height: min(72vh, 650px);
    opacity: .95;
  }
  .lighthouse-stage {
    right: 4vw;
    bottom: 28%;
    transform: scale(.68);
  }
}

/* phones / tablets */
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .scene {
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .topbar {
    width: calc(100% - 30px);
    height: 64px;
    margin: 0 auto;
  }
  .mini-brand {
    font-size: 14px;
    gap: 8px;
  }
  .mini-brand-icon { width: 32px; height: 32px; }

  .hero {
    width: calc(100% - 30px);
    min-height: calc(100svh - 64px);
    display: block;
    padding: clamp(24px, 5vh, 48px) 0 300px;
  }

  .copy {
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }
  .logo-shell {
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    border-radius: 22px;
  }
  .app-badge { width: 66px; height: 66px; }

  .eyebrow {
    margin-bottom: 11px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  h1 {
    font-size: clamp(52px, 16.8vw, 76px);
    line-height: .92;
    letter-spacing: -.065em;
  }
  .lead {
    max-width: 440px;
    margin: 18px auto 22px;
    padding: 0 4px;
    font-size: 15.5px;
    line-height: 1.5;
  }

  .actions {
    display: block;
    width: 100%;
  }
  .download {
    width: min(100%, 360px);
    height: 66px;
    margin: 0 auto;
    border-radius: 19px;
  }

  /* Mobile build is Android-only. */
  .download.secondary {
    display: none;
  }

  .micro {
    max-width: 360px;
    justify-content: center;
    gap: 9px 13px;
    margin: 16px auto 0;
    font-size: 10.5px;
  }

  .world {
    left: 50%;
    right: auto;
    width: 100vw;
    height: 350px;
    bottom: 0;
    transform: translateX(-50%);
  }
  .sun {
    right: 8%;
    top: 7%;
    width: 112px;
    height: 112px;
  }
  .far-island {
    right: -2%;
    bottom: 31%;
    width: 72%;
    height: 11%;
  }
  .lighthouse-stage {
    right: -22px;
    bottom: 23%;
    transform: scale(.48);
    transform-origin: bottom right;
  }
  .beam {
    opacity: .42;
  }

  .sea {
    left: 0;
    right: 0;
    width: 100%;
    height: 43%;
    bottom: 4%;
  }
  .beach {
    left: -8vw;
    right: -8vw;
    height: 28%;
    bottom: -8%;
  }

  .bird-a { --scale: .72; top: 13%; left: 18%; }
  .bird-b { --scale: .46; top: 24%; left: 47%; }
  .bird-c { --scale: .55; top: 10%; left: 62%; }
  .bird-d { display: none; }
  .bird-e { --scale: .48; top: 27%; left: 8%; }

  footer {
    width: calc(100% - 30px);
    bottom: 9px;
    font-size: 10px;
  }
}

/* very small phones */
@media (max-width: 420px) {
  .hero {
    padding-top: 18px;
    padding-bottom: 278px;
  }
  .logo-shell {
    width: 74px;
    height: 74px;
    margin-bottom: 12px;
  }
  .app-badge { width: 58px; height: 58px; }
  h1 { font-size: clamp(48px, 16vw, 66px); }
  .lead {
    margin-top: 16px;
    margin-bottom: 19px;
    font-size: 14px;
  }
  .download {
    height: 63px;
    grid-template-columns: 44px 1fr 20px;
    padding-left: 10px;
  }
  .icon-box {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .button-copy strong { font-size: 18px; }
  .micro {
    max-width: 320px;
    font-size: 9.8px;
  }
  .world { height: 325px; }
  .lighthouse-stage {
    right: -32px;
    transform: scale(.43);
  }
}

/* short landscape screens */
@media (max-height: 620px) and (min-width: 761px) {
  .topbar { height: 64px; }
  .hero {
    min-height: calc(100svh - 82px);
    padding-top: 12px;
    padding-bottom: 94px;
  }
  .copy { padding-bottom: 0; }
  .logo-shell { width: 74px; height: 74px; margin-bottom: 12px; }
  h1 { font-size: clamp(58px, 7vw, 84px); }
  .lead { margin: 16px 0 20px; font-size: 17px; }
  .download { height: 62px; }
  .world { height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* v4 image safety: prevents intrinsic-size blowouts even with layout changes */
.mini-brand-icon,
.app-badge {
  max-width: 100%;
  max-height: 100%;
}
.mini-brand-icon {
  flex: 0 0 38px;
}
.logo-shell {
  overflow: hidden;
}
.app-badge {
  object-fit: cover;
}


/* v6: distant Ro-Ro vessel on the horizon */
.roro-ship {
  position: absolute;
  z-index: 4;
  right: -220px;
  bottom: 34.5%;
  width: 220px;
  height: 72px;
  opacity: .82;
  animation: shipSail 36s linear infinite;
  filter: drop-shadow(0 3px 6px rgba(4,40,92,.10));
}
.ship-hull {
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 180px;
  height: 28px;
  background: linear-gradient(180deg, #6E88A3 0%, #48627E 100%);
  clip-path: polygon(0 58%, 10% 34%, 68% 34%, 82% 20%, 100% 21%, 95% 100%, 7% 100%);
  border-radius: 0 0 18px 18px;
}
.ship-deck {
  position: absolute;
  left: 42px;
  bottom: 29px;
  width: 108px;
  height: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(227,238,245,.92));
  border-radius: 4px 4px 0 0;
}
.ship-bridge {
  position: absolute;
  left: 131px;
  bottom: 35px;
  width: 32px;
  height: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EFF4 100%);
  border-radius: 4px 4px 0 0;
}
.ship-ramp {
  position: absolute;
  left: 12px;
  bottom: 16px;
  width: 26px;
  height: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(210,224,234,.92));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.ship-contour {
  position: absolute;
  left: 20px;
  bottom: 37px;
  width: 156px;
  height: 3px;
  background: rgba(4,40,92,.18);
  border-radius: 999px;
}
.ship-window {
  position: absolute;
  bottom: 40px;
  width: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgba(2,110,209,.55);
}
.w1 { left: 52px; }
.w2 { left: 64px; }
.w3 { left: 76px; }
.w4 { left: 139px; }
.w5 { left: 148px; }

.ship-wake {
  position: absolute;
  z-index: -1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.wake-main {
  left: 142px;
  bottom: 11px;
  width: 96px;
  filter: blur(.2px);
}
.wake-trail {
  left: 162px;
  bottom: 7px;
  width: 76px;
  opacity: .58;
  filter: blur(.5px);
}

@keyframes shipSail {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  6% { opacity: .82; }
  92% { opacity: .82; }
  100% {
    transform: translateX(-1120px);
    opacity: 0;
  }
}

/* v6: richer beach details */
.shell {
  position: absolute;
  width: 16px;
  height: 11px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.8), rgba(241,221,191,.95) 60%, rgba(214,179,132,.95));
  border-radius: 50% 50% 70% 70%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 1px rgba(107,129,150,.12);
}
.shell::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  top: 3px;
  background:
    linear-gradient(90deg, transparent 0, rgba(202,164,119,.38) 14%, transparent 18%, rgba(202,164,119,.38) 34%, transparent 38%, rgba(202,164,119,.38) 54%, transparent 58%, rgba(202,164,119,.38) 74%, transparent 78%);
  border-radius: inherit;
  opacity: .55;
}
.shell-a { left: 25%; top: 59%; transform: rotate(14deg) scale(.92); }
.shell-b { left: 59%; top: 65%; transform: rotate(-22deg) scale(.84); }
.shell-c { left: 73%; top: 57%; transform: rotate(10deg) scale(1); }
.shell-d { left: 83%; top: 69%; transform: rotate(-8deg) scale(.76); }

.starfish {
  position: absolute;
  left: 69%;
  top: 71%;
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #F0A473 0%, #E98357 100%);
  clip-path: polygon(50% 0%, 61% 32%, 96% 24%, 71% 49%, 88% 84%, 50% 63%, 12% 84%, 29% 49%, 4% 24%, 39% 32%);
  transform: rotate(18deg);
  box-shadow: 0 2px 3px rgba(107,129,150,.10);
}
.starfish::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  filter: blur(1px);
}

.p5 { width: 6px; height: 5px; left: 33%; top: 67%; }
.p6 { width: 5px; height: 4px; left: 47%; top: 54%; }
.p7 { width: 8px; height: 5px; left: 62%; top: 74%; }
.p8 { width: 4px; height: 3px; left: 86%; top: 60%; }

/* Keep contrast strong for footer and feature labels */
.micro {
  color: #183B5B;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}
footer {
  color: #33506F;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

/* ensure brand images stay well-behaved */
.mini-brand-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(4,40,92,.12);
}
.logo-shell {
  overflow: visible;
}
.app-badge {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 8px 16px rgba(4,40,92,.12));
}

@media (max-width: 760px) {
  .roro-ship {
    width: 150px;
    height: 50px;
    bottom: 35%;
    opacity: .72;
    animation-duration: 28s;
  }
  .ship-hull { width: 122px; height: 19px; left: 6px; bottom: 6px; }
  .ship-deck { width: 74px; height: 11px; left: 26px; bottom: 20px; }
  .ship-bridge { width: 22px; height: 12px; left: 95px; bottom: 25px; }
  .ship-ramp { width: 17px; height: 9px; left: 6px; bottom: 11px; }
  .ship-contour { width: 104px; left: 16px; bottom: 25px; }
  .ship-window { width: 4px; height: 3px; bottom: 28px; }
  .w1 { left: 36px; }
  .w2 { left: 45px; }
  .w3 { left: 54px; }
  .w4 { left: 101px; }
  .w5 { left: 109px; }
  .wake-main { width: 60px; left: 98px; bottom: 8px; }
  .wake-trail { width: 48px; left: 110px; bottom: 5px; }

  .shell { width: 12px; height: 8px; }
  .starfish {
    width: 21px;
    height: 21px;
    left: 67%;
    top: 72%;
  }
  .mini-brand-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
  }
  .app-badge {
    width: 74px;
    height: 74px;
  }
}

@media (max-width: 420px) {
  .roro-ship {
    width: 126px;
    bottom: 35.5%;
    animation-duration: 24s;
  }
  .starfish {
    width: 18px;
    height: 18px;
  }
  .app-badge {
    width: 66px;
    height: 66px;
  }
}


/* ===== Stable build: sea details ===== */

/* More realistic distant Ro-Ro / pure car carrier */
.roro-ship {
  position: absolute;
  z-index: 4;
  right: -270px;
  bottom: 34.7%;
  width: 250px;
  height: 90px;
  opacity: .82;
  animation: roroTravel 44s linear infinite;
  pointer-events: none;
}

.ship-bob {
  position: absolute;
  inset: 0;
  transform-origin: 55% 78%;
  animation: roroBob 6s ease-in-out infinite;
  filter: drop-shadow(0 3px 7px rgba(4,40,92,.12));
}

.carrier-hull {
  position: absolute;
  left: 15px;
  bottom: 8px;
  width: 211px;
  height: 29px;
  background: linear-gradient(180deg, #607B95 0%, #3E5873 100%);
  clip-path: polygon(0 47%, 8% 29%, 82% 29%, 95% 40%, 100% 57%, 93% 100%, 7% 100%);
}

.carrier-superstructure {
  position: absolute;
  left: 28px;
  bottom: 32px;
  width: 163px;
  height: 43px;
  border-radius: 3px 4px 1px 1px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF4F7 100%);
  box-shadow: inset 0 -6px 0 rgba(140,164,184,.12);
}

.carrier-bow {
  position: absolute;
  left: 180px;
  bottom: 32px;
  width: 38px;
  height: 43px;
  background: linear-gradient(180deg, #FFFFFF, #E8F0F4);
  clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%);
}

.carrier-stern {
  position: absolute;
  left: 21px;
  bottom: 32px;
  width: 18px;
  height: 43px;
  background: #E9F1F5;
  clip-path: polygon(22% 0,100% 0,100% 100%,0 100%,0 18%);
}

.carrier-bridge {
  position: absolute;
  left: 154px;
  bottom: 70px;
  width: 35px;
  height: 13px;
  border-radius: 3px 3px 0 0;
  background: #FAFCFD;
  box-shadow: inset 0 -3px 0 rgba(140,164,184,.15);
}

.carrier-funnel {
  position: absolute;
  left: 58px;
  bottom: 75px;
  width: 15px;
  height: 10px;
  background: #33506F;
  clip-path: polygon(13% 0,87% 0,100% 100%,0 100%);
}

.carrier-ramp {
  position: absolute;
  left: 17px;
  bottom: 14px;
  width: 32px;
  height: 16px;
  background: linear-gradient(135deg, #DCE8EE, #A9BECC);
  clip-path: polygon(0 100%,100% 0,100% 100%);
}

.carrier-blue-stripe {
  position: absolute;
  left: 29px;
  bottom: 40px;
  width: 188px;
  height: 6px;
  background: linear-gradient(90deg, #026ED1, #01CAC2);
  opacity: .38;
}

.deck-line {
  position: absolute;
  left: 42px;
  width: 132px;
  height: 2px;
  border-radius: 999px;
  background: rgba(51,80,111,.12);
}
.dl1 { bottom: 49px; }
.dl2 { bottom: 58px; }
.dl3 { bottom: 67px; }

.porthole {
  position: absolute;
  bottom: 73px;
  width: 5px;
  height: 3px;
  border-radius: 1px;
  background: rgba(2,110,209,.56);
}
.ph1 { left: 159px; }
.ph2 { left: 167px; }
.ph3 { left: 175px; }
.ph4 { left: 88px; bottom: 60px; }
.ph5 { left: 103px; bottom: 60px; }
.ph6 { left: 118px; bottom: 60px; }

.roro-ship .ship-wake {
  position: absolute;
  z-index: -1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
}
.roro-ship .wake-main {
  left: 157px;
  bottom: 10px;
  width: 108px;
}
.roro-ship .wake-trail {
  left: 177px;
  bottom: 5px;
  width: 86px;
  opacity: .52;
  filter: blur(.5px);
}

@keyframes roroTravel {
  0% { transform: translateX(0); opacity: 0; }
  5% { opacity: .82; }
  92% { opacity: .82; }
  100% { transform: translateX(-128vw); opacity: 0; }
}

@keyframes roroBob {
  0%,100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(3px) rotate(.45deg); }
}

/* Proper distant sailboats instead of three-stick decorations */
.grass,
.grass::before,
.grass::after {
  display: none !important;
}

.sailboat {
  position: absolute;
  z-index: 7;
  width: 62px;
  height: 52px;
  opacity: .76;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 2px rgba(4,40,92,.08));
  animation: sailboatRock 5.2s ease-in-out infinite;
}

.sailboat-one {
  right: 8px;
  bottom: 77px;
}

.sailboat-two {
  right: 177px;
  bottom: 55px;
  transform: scale(.72);
  opacity: .62;
  animation-delay: -2.4s;
}

.sailboat-hull {
  position: absolute;
  left: 7px;
  bottom: 1px;
  width: 48px;
  height: 9px;
  background: #456882;
  clip-path: polygon(0 0,100% 0,82% 100%,18% 100%);
  border-radius: 0 0 8px 8px;
}

.sailboat-mast {
  position: absolute;
  left: 31px;
  bottom: 9px;
  width: 2px;
  height: 39px;
  border-radius: 2px;
  background: #5E7484;
}

.sail {
  position: absolute;
  bottom: 12px;
  background: linear-gradient(145deg, #FFFFFF 0%, #F0F7FA 72%, #DCE9EF 100%);
  filter: drop-shadow(0 1px 1px rgba(51,80,111,.08));
}

.sail-main {
  left: 10px;
  width: 20px;
  height: 33px;
  clip-path: polygon(100% 0,100% 100%,0 82%);
}

.sail-jib {
  left: 34px;
  width: 17px;
  height: 27px;
  clip-path: polygon(0 7%,0 100%,100% 84%);
}

@keyframes sailboatRock {
  0%,100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(1.2deg) translateY(1px); }
}

/* Richer beach */
.shell-e { left: 19%; top: 72%; transform: rotate(-18deg) scale(.72); }
.shell-f { left: 38%; top: 78%; transform: rotate(21deg) scale(.66); }
.shell-g { left: 64%; top: 52%; transform: rotate(-9deg) scale(.78); }
.shell-h { left: 89%; top: 76%; transform: rotate(25deg) scale(.70); }

.p9  { width: 5px; height: 4px; left: 14%; top: 65%; }
.p10 { width: 8px; height: 5px; left: 29%; top: 73%; }
.p11 { width: 4px; height: 3px; left: 43%; top: 59%; }
.p12 { width: 7px; height: 4px; left: 52%; top: 81%; }
.p13 { width: 6px; height: 4px; left: 58%; top: 61%; }
.p14 { width: 9px; height: 5px; left: 74%; top: 79%; }
.p15 { width: 5px; height: 3px; left: 81%; top: 55%; }
.p16 { width: 7px; height: 4px; left: 93%; top: 67%; }

.tiny-stone {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(107,129,150,.27);
}
.s1 { left: 23%; top: 51%; }
.s2 { left: 35%; top: 66%; }
.s3 { left: 49%; top: 73%; }
.s4 { left: 70%; top: 63%; }
.s5 { left: 77%; top: 83%; }
.s6 { left: 87%; top: 58%; }

/* Keep labels readable over the sea and sand */
.micro {
  color: #183B5B;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
footer {
  color: #33506F;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

@media (max-width: 760px) {
  .roro-ship {
    width: 165px;
    height: 62px;
    bottom: 35%;
    animation-duration: 31s;
  }
  .ship-bob { transform-origin: 55% 78%; }
  .carrier-hull { left: 10px; bottom: 5px; width: 139px; height: 19px; }
  .carrier-superstructure { left: 19px; bottom: 21px; width: 108px; height: 29px; }
  .carrier-bow { left: 120px; bottom: 21px; width: 25px; height: 29px; }
  .carrier-stern { left: 14px; bottom: 21px; width: 13px; height: 29px; }
  .carrier-bridge { left: 103px; bottom: 47px; width: 24px; height: 9px; }
  .carrier-funnel { left: 39px; bottom: 50px; width: 10px; height: 7px; }
  .carrier-ramp { left: 11px; bottom: 9px; width: 22px; height: 11px; }
  .carrier-blue-stripe { left: 20px; bottom: 27px; width: 124px; height: 4px; }
  .deck-line { left: 28px; width: 89px; height: 1px; }
  .dl1 { bottom: 33px; }
  .dl2 { bottom: 39px; }
  .dl3 { bottom: 45px; }
  .porthole { display: none; }
  .roro-ship .wake-main { left: 104px; bottom: 7px; width: 70px; }
  .roro-ship .wake-trail { left: 119px; bottom: 4px; width: 55px; }

  .sailboat-one {
    right: -3px;
    bottom: 67px;
    transform: scale(.72);
  }
  .sailboat-two {
    right: 124px;
    bottom: 49px;
    transform: scale(.55);
  }
}

@media (max-width: 420px) {
  .sailboat-one { transform: scale(.62); }
  .sailboat-two { transform: scale(.48); }
}


/* ===== Fixes after visual review ===== */

/* 1) Remove the visible background card behind the flying seagull in hero. */
.logo-shell {
  width: auto !important;
  height: auto !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  justify-content: flex-start;
}
.app-badge {
  width: 130px !important;
  height: 130px !important;
  display: block;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 6px 12px rgba(4,40,92,.08)) !important;
}

@media (max-width: 760px) {
  .logo-shell {
    margin: 0 auto 12px !important;
    justify-content: center;
  }
  .app-badge {
    width: 112px !important;
    height: 112px !important;
  }
}

@media (max-width: 420px) {
  .app-badge {
    width: 96px !important;
    height: 96px !important;
  }
}

/* 2) Move the Ro-Ro farther away, higher on the horizon, and fully out of the water. */
.roro-ship {
  right: -220px !important;
  bottom: 41.6% !important;
  width: 175px !important;
  height: 56px !important;
  opacity: .72 !important;
  z-index: 3 !important;
  animation: roroTravelFar 56s linear infinite !important;
}
.ship-bob {
  animation: roroBobFar 7.4s ease-in-out infinite !important;
}

.carrier-hull {
  left: 10px !important;
  bottom: 4px !important;
  width: 146px !important;
  height: 16px !important;
  background: linear-gradient(180deg, #637E98 0%, #45617B 100%) !important;
}
.carrier-superstructure {
  left: 18px !important;
  bottom: 18px !important;
  width: 113px !important;
  height: 23px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(235,243,247,.96)) !important;
  box-shadow: inset 0 -3px 0 rgba(140,164,184,.14) !important;
}
.carrier-bow {
  left: 123px !important;
  bottom: 18px !important;
  width: 28px !important;
  height: 23px !important;
}
.carrier-stern {
  left: 14px !important;
  bottom: 18px !important;
  width: 12px !important;
  height: 23px !important;
}
.carrier-bridge {
  left: 104px !important;
  bottom: 39px !important;
  width: 24px !important;
  height: 8px !important;
}
.carrier-funnel {
  left: 46px !important;
  bottom: 40px !important;
  width: 10px !important;
  height: 8px !important;
}
.carrier-ramp {
  left: 11px !important;
  bottom: 7px !important;
  width: 19px !important;
  height: 8px !important;
}
.carrier-blue-stripe {
  left: 19px !important;
  bottom: 23px !important;
  width: 126px !important;
  height: 3px !important;
  opacity: .28 !important;
}
.deck-line {
  left: 28px !important;
  width: 84px !important;
  height: 1px !important;
}
.dl1 { bottom: 27px !important; }
.dl2 { bottom: 31px !important; }
.dl3 { bottom: 35px !important; }

.porthole {
  width: 4px !important;
  height: 2px !important;
}
.ph1 { left: 107px !important; bottom: 41px !important; }
.ph2 { left: 114px !important; bottom: 41px !important; }
.ph3 { left: 121px !important; bottom: 41px !important; }
.ph4 { left: 62px !important; bottom: 33px !important; }
.ph5 { left: 73px !important; bottom: 33px !important; }
.ph6 { left: 84px !important; bottom: 33px !important; }

.roro-ship .wake-main {
  left: 110px !important;
  bottom: 2px !important;
  width: 84px !important;
  height: 2px !important;
  opacity: .5 !important;
}
.roro-ship .wake-trail {
  left: 126px !important;
  bottom: 0 !important;
  width: 68px !important;
  height: 2px !important;
  opacity: .38 !important;
}

@keyframes roroTravelFar {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: .72; }
  92% { opacity: .72; }
  100% { transform: translateX(-138vw); opacity: 0; }
}
@keyframes roroBobFar {
  0%,100% { transform: translateY(0) rotate(-.25deg); }
  50% { transform: translateY(1.5px) rotate(.32deg); }
}

@media (max-width: 760px) {
  .roro-ship {
    bottom: 42.4% !important;
    width: 126px !important;
    height: 42px !important;
    right: -150px !important;
    opacity: .67 !important;
    animation-duration: 42s !important;
  }
  .carrier-hull { left: 8px !important; bottom: 3px !important; width: 104px !important; height: 12px !important; }
  .carrier-superstructure { left: 14px !important; bottom: 14px !important; width: 80px !important; height: 17px !important; }
  .carrier-bow { left: 88px !important; bottom: 14px !important; width: 20px !important; height: 17px !important; }
  .carrier-stern { left: 11px !important; bottom: 14px !important; width: 9px !important; height: 17px !important; }
  .carrier-bridge { left: 74px !important; bottom: 30px !important; width: 17px !important; height: 6px !important; }
  .carrier-funnel { left: 33px !important; bottom: 31px !important; width: 7px !important; height: 6px !important; }
  .carrier-ramp { left: 8px !important; bottom: 6px !important; width: 14px !important; height: 6px !important; }
  .carrier-blue-stripe { left: 15px !important; bottom: 18px !important; width: 91px !important; height: 2px !important; }
  .deck-line, .porthole { display: none !important; }
  .roro-ship .wake-main { left: 79px !important; width: 58px !important; }
  .roro-ship .wake-trail { left: 89px !important; width: 48px !important; }
}

/* 3) Make the sailboats crisper and more visible. */
.sailboat {
  width: 78px !important;
  height: 62px !important;
  opacity: .96 !important;
  z-index: 9 !important;
  filter: drop-shadow(0 2px 2px rgba(4,40,92,.10)) !important;
  animation: sailboatRockClear 5.4s ease-in-out infinite !important;
}
.sailboat-one {
  right: -3px !important;
  bottom: 86px !important;
}
.sailboat-two {
  right: 172px !important;
  bottom: 66px !important;
  transform: scale(.84) !important;
  opacity: .90 !important;
}

.sailboat-hull {
  left: 8px !important;
  bottom: 3px !important;
  width: 58px !important;
  height: 11px !important;
  background: #5A7189 !important;
  clip-path: polygon(0 0,100% 0,84% 100%,16% 100%) !important;
  border-radius: 0 0 8px 8px !important;
}
.sailboat-mast {
  left: 36px !important;
  bottom: 13px !important;
  width: 2px !important;
  height: 42px !important;
  background: #607585 !important;
}
.sail {
  bottom: 13px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(245,250,252,.98) 65%, rgba(221,233,239,.98) 100%) !important;
  filter: drop-shadow(0 1px 1px rgba(51,80,111,.10)) !important;
  outline: 1px solid rgba(107,129,150,.16);
}
.sail-main {
  left: 12px !important;
  width: 23px !important;
  height: 37px !important;
}
.sail-jib {
  left: 39px !important;
  width: 20px !important;
  height: 31px !important;
}
@keyframes sailboatRockClear {
  0%,100% { transform: rotate(-.9deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(1px); }
}

@media (max-width: 760px) {
  .sailboat {
    width: 66px !important;
    height: 52px !important;
    opacity: .95 !important;
  }
  .sailboat-one {
    right: -4px !important;
    bottom: 74px !important;
    transform: scale(.82) !important;
  }
  .sailboat-two {
    right: 118px !important;
    bottom: 58px !important;
    transform: scale(.66) !important;
  }
}


/* ===== Ship layer fix =====
   Ro-Ro must render IN FRONT of the sea layer, not behind it.
*/
.roro-ship {
  z-index: 11 !important;
}

/* The whole ship, including hull, stays above the water surface. */
.roro-ship .ship-bob,
.roro-ship .carrier-hull,
.roro-ship .carrier-superstructure,
.roro-ship .carrier-bow,
.roro-ship .carrier-stern,
.roro-ship .carrier-bridge,
.roro-ship .carrier-funnel,
.roro-ship .carrier-ramp,
.roro-ship .carrier-blue-stripe,
.roro-ship .deck-line,
.roro-ship .porthole {
  z-index: 2;
}

/* Wake is still visually on the water, but no longer pushes the hull behind it. */
.roro-ship .ship-wake {
  z-index: 1 !important;
}


/* ===== Ro-Ro visual correction =====
   sea = z-index 5
   ship = z-index 8
   lighthouse-stage = z-index 10
   => ship is above water, but passes behind the lighthouse.
*/
.roro-ship {
  z-index: 8 !important;
  opacity: .96 !important;
  animation-duration: 92s !important;
  filter: none !important;
}

/* Sharper vessel rendering */
.roro-ship .ship-bob {
  filter: drop-shadow(0 1px 1px rgba(4,40,92,.10)) !important;
}

.roro-ship .carrier-hull {
  background: #4D6882 !important;
}

.roro-ship .carrier-superstructure,
.roro-ship .carrier-bow,
.roro-ship .carrier-stern,
.roro-ship .carrier-bridge {
  background: #F8FBFD !important;
}

.roro-ship .carrier-blue-stripe {
  opacity: .62 !important;
}

.roro-ship .deck-line {
  background: rgba(51,80,111,.24) !important;
}

.roro-ship .porthole {
  background: #5A9BE0 !important;
  opacity: 1 !important;
}

/* Keep the rocking subtle so it does not look smeared. */
.roro-ship .ship-bob {
  animation: roroBobSharp 8.5s ease-in-out infinite !important;
}

@keyframes roroBobSharp {
  0%,100% { transform: translateY(0) rotate(-.12deg); }
  50% { transform: translateY(1px) rotate(.14deg); }
}

@media (max-width: 760px) {
  .roro-ship {
    opacity: .94 !important;
    animation-duration: 76s !important;
  }
}


/* ===== STRUCTURE/LAYER CORRECTION ===== */

.sea { z-index: 5 !important; }

/* Independent boat layers mirror lighthouse positioning but have their
   own stacking contexts, so the ship can really pass between them. */
.sailboat-layer {
  position: absolute;
  right: clamp(5vw, 9vw, 150px);
  bottom: 30.5%;
  width: 280px;
  height: 315px;
  transform: scale(.82);
  transform-origin: bottom center;
  pointer-events: none;
}

.right-boat-layer { z-index: 7; }
.roro-ship        { z-index: 8 !important; }
.left-boat-layer  { z-index: 9; }
.lighthouse-stage { z-index: 10 !important; }

/* Clean bird: no white card, entire bird visible. */
.logo-shell {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  justify-content: flex-start !important;
}

.app-badge {
  width: 138px !important;
  height: 118px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 6px 12px rgba(4,40,92,.08)) !important;
}

/* Crisp distant car carrier. */
.roro-ship {
  right: -190px !important;
  bottom: 41.8% !important;
  width: 184px !important;
  height: 58px !important;
  opacity: .98 !important;
  filter: none !important;
  animation: roroTravelFinal 98s linear infinite !important;
  pointer-events: none;
}

.roro-ship .ship-bob {
  position: absolute;
  inset: 0;
  transform-origin: 50% 82%;
  filter: none !important;
  animation: roroBobFinal 9s ease-in-out infinite !important;
}

.cc-hull {
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 158px;
  height: 15px;
  background: #46637D;
  border-radius: 2px 7px 9px 9px;
  transform: skewX(-5deg);
}

.cc-body {
  position: absolute;
  left: 18px;
  bottom: 19px;
  width: 128px;
  height: 28px;
  background: #F7FAFC;
  border: 1px solid rgba(140,164,184,.25);
  border-radius: 3px 3px 1px 1px;
}

.cc-bow {
  position: absolute;
  left: 143px;
  bottom: 19px;
  width: 25px;
  height: 28px;
  background: #F7FAFC;
  border: 1px solid rgba(140,164,184,.20);
  border-left: 0;
  clip-path: polygon(0 0, 64% 0, 100% 38%, 100% 100%, 0 100%);
}

.cc-bridge {
  position: absolute;
  left: 119px;
  bottom: 45px;
  width: 29px;
  height: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(140,164,184,.22);
  border-radius: 3px 3px 0 0;
}

.cc-funnel {
  position: absolute;
  left: 42px;
  bottom: 47px;
  width: 12px;
  height: 8px;
  background: #58708A;
  border-radius: 1px 1px 0 0;
}

.cc-ramp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 21px;
  height: 10px;
  background: #AFC2CF;
  clip-path: polygon(0 100%, 100% 18%, 100% 100%);
}

.cc-waterline {
  position: absolute;
  left: 17px;
  bottom: 18px;
  width: 146px;
  height: 2px;
  background: linear-gradient(90deg, #026ED1, #01CAC2);
  opacity: .42;
}

.cc-deck {
  position: absolute;
  left: 13px;
  width: 88px;
  height: 1px;
  background: rgba(88,112,138,.23);
}
.deck-a { top: 8px; }
.deck-b { top: 14px; }
.deck-c { top: 20px; }

.cc-window {
  position: absolute;
  top: 2px;
  width: 5px;
  height: 3px;
  border-radius: 1px;
  background: #78AEE5;
}
.cw1 { right: 17px; }
.cw2 { right: 10px; }
.cw3 { right: 3px; }

.roro-ship .ship-wake {
  position: absolute;
  z-index: 0 !important;
  height: 2px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.62) !important;
  filter: none !important;
}
.roro-ship .wake-main {
  left: 128px !important;
  bottom: 3px !important;
  width: 68px !important;
  opacity: .58 !important;
}
.roro-ship .wake-trail {
  left: 140px !important;
  bottom: 0 !important;
  width: 55px !important;
  opacity: .34 !important;
}

@keyframes roroTravelFinal {
  0%   { transform: translateX(0); opacity: 0; }
  5%   { opacity: .98; }
  94%  { opacity: .98; }
  100% { transform: translateX(-140vw); opacity: 0; }
}

@keyframes roroBobFinal {
  0%,100% { transform: translateY(0) rotate(-.08deg); }
  50%     { transform: translateY(1px) rotate(.10deg); }
}

/* Crisp white sailboats. */
.sailboat {
  position: absolute;
  width: 78px !important;
  height: 62px !important;
  opacity: .98 !important;
  filter: drop-shadow(0 2px 2px rgba(4,40,92,.10)) !important;
  transform-origin: 50% 90%;
  animation: sailboatRockFinal 5.4s ease-in-out infinite !important;
}

.sailboat-one {
  right: -3px !important;
  bottom: 86px !important;
}

.sailboat-two {
  right: 172px !important;
  bottom: 66px !important;
  transform: scale(.84) !important;
}

.sailboat-hull {
  position: absolute;
  left: 8px !important;
  bottom: 3px !important;
  width: 58px !important;
  height: 11px !important;
  background: #536F88 !important;
  clip-path: polygon(0 0,100% 0,84% 100%,16% 100%) !important;
  border-radius: 0 0 8px 8px !important;
}

.sailboat-mast {
  position: absolute;
  left: 36px !important;
  bottom: 13px !important;
  width: 2px !important;
  height: 42px !important;
  background: #607585 !important;
}

.sail {
  position: absolute;
  bottom: 13px !important;
  background: #FFFFFF !important;
  filter: drop-shadow(0 1px 1px rgba(51,80,111,.13)) !important;
  outline: 1px solid rgba(107,129,150,.20);
}

.sail-main {
  left: 12px !important;
  width: 23px !important;
  height: 37px !important;
  clip-path: polygon(100% 0,100% 100%,0 82%) !important;
}

.sail-jib {
  left: 39px !important;
  width: 20px !important;
  height: 31px !important;
  clip-path: polygon(0 7%,0 100%,100% 84%) !important;
}

@keyframes sailboatRockFinal {
  0%,100% { rotate: -.9deg; translate: 0 0; }
  50%     { rotate: 1deg; translate: 0 1px; }
}

@media (max-width: 1080px) {
  .sailboat-layer {
    right: 4vw;
    bottom: 28%;
    transform: scale(.68);
  }
}

@media (max-width: 760px) {
  .logo-shell {
    margin: 0 auto 12px !important;
    justify-content: center !important;
  }

  .app-badge {
    width: 118px !important;
    height: 101px !important;
  }

  .sailboat-layer {
    right: -22px;
    bottom: 23%;
    transform: scale(.48);
    transform-origin: bottom right;
  }

  .roro-ship {
    width: 132px !important;
    height: 44px !important;
    right: -145px !important;
    bottom: 42.5% !important;
    animation-duration: 82s !important;
  }

  .cc-hull {
    left: 5px;
    bottom: 4px;
    width: 113px;
    height: 11px;
  }
  .cc-body {
    left: 13px;
    bottom: 14px;
    width: 91px;
    height: 20px;
  }
  .cc-bow {
    left: 102px;
    bottom: 14px;
    width: 18px;
    height: 20px;
  }
  .cc-bridge {
    left: 84px;
    bottom: 33px;
    width: 22px;
    height: 6px;
  }
  .cc-funnel {
    left: 30px;
    bottom: 34px;
    width: 9px;
    height: 6px;
  }
  .cc-ramp {
    left: 6px;
    bottom: 6px;
    width: 15px;
    height: 7px;
  }
  .cc-waterline {
    left: 12px;
    bottom: 13px;
    width: 105px;
  }
  .cc-deck { display: none; }
  .cc-window {
    width: 4px;
    height: 2px;
  }
}

@media (max-width: 420px) {
  .app-badge {
    width: 103px !important;
    height: 88px !important;
  }
}


/* Mobile only: Ro-Ro sails LEFT -> RIGHT.
   Desktop keeps the existing RIGHT -> LEFT animation. */
@media (max-width: 760px) {
  .roro-ship {
    left: -155px !important;
    right: auto !important;
    animation-name: roroTravelMobileLTR !important;
    animation-duration: 82s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}

@keyframes roroTravelMobileLTR {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  5% {
    opacity: .98;
  }
  94% {
    opacity: .98;
  }
  100% {
    transform: translateX(calc(100vw + 310px));
    opacity: 0;
  }
}