/* ===== Homepage hero: layered "holographic" plane =====
   Replaces the old cargo-ship photo. Everything here is drawn in code
   (no stock photo), so it stays sharp on any screen. The stacked layers
   drift by different amounts with the pointer - see scripts/hero.js. */
.hero{
  --mx: 0; --my: 0;
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1160px; margin: 24px auto 0;
  min-height: 460px; aspect-ratio: 1160 / 560;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(90% 80% at 78% 30%, #2E97A2 0%, rgba(31,111,121,0) 60%),
    radial-gradient(70% 90% at 0% 100%, #0B3B41 0%, rgba(11,59,65,0) 70%),
    linear-gradient(135deg, #1F6F79 0%, #145058 55%, #0A3237 100%);
  color: #fff;
}
.hero-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.hero-layer{
  position: absolute; inset: -40px; pointer-events: none;
  transform: translate3d(calc(var(--mx) * var(--d, 0) * 18px), calc(var(--my) * var(--d, 0) * 12px), 0);
  transition: transform .25s ease-out;
}
.hero-dots{
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 75%);
}
.hero-contours{ width: calc(100% + 80px); height: calc(100% + 80px); opacity: .35; }
.hero-boxes{
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M30 44 60 32 90 44 60 56Z'/%3E%3Cpath d='M30 44v34l30 12V56M90 44v34L60 90'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 100%);
}

/* Translucent glass sheets with an iridescent edge - the "layers". */
.hero-sheet{
  inset: auto; border-radius: 32px;
  background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 60%);
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
}
.hero-sheet::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg, #8FF6FF, #C9A8FF 35%, #FFD9A0 65%, #8CFFCF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
.hero-sheet-1{ width: 46%; height: 62%; right: 6%; top: 10%; rotate: -8deg; }
.hero-sheet-2{ width: 36%; height: 48%; right: 22%; top: 34%; rotate: 6deg; opacity: .8; }

.hero-route{ width: calc(100% + 80px); height: calc(100% + 80px); }

/* Slow rainbow foil sweep over the whole card. */
.hero-sheen{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg,
    transparent 20%, rgba(143,246,255,.16) 35%, rgba(201,168,255,.16) 45%,
    rgba(255,217,160,.14) 55%, rgba(140,255,207,.14) 65%, transparent 80%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: hero-sheen 9s ease-in-out infinite alternate;
}
@keyframes hero-sheen{ from{ background-position: 100% 0; } to{ background-position: 0% 0; } }

.hero-copy{
  position: relative; z-index: 3;
  max-width: 470px; padding: 64px 0 56px 56px;
}
.hero-eyebrow{
  display: inline-block; margin: 0 0 18px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
.hero-title{
  margin: 0 0 16px; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06;
  font-weight: 700; letter-spacing: -.02em;
}
.hero-sub{ margin: 0 0 28px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.84); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.hero-btn:hover{ transform: translateY(-1px); }
.hero-btn-primary{ background: #fff; color: var(--brand-600); }
.hero-btn-primary:hover{ background: #E6F4F6; }
.hero-btn-ghost{ color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.hero-btn-ghost:hover{ background: rgba(255,255,255,.1); }

.hero-plane-wrap{
  position: absolute; z-index: 2; pointer-events: none;
  width: 62%; right: 0; top: 9%;
  transform: translate3d(calc(var(--mx) * var(--d, 0) * 18px), calc(var(--my) * var(--d, 0) * 12px), 0);
  transition: transform .25s ease-out;
}
.hero-plane{
  display: block; width: 100%; height: auto; overflow: visible;
  rotate: -10deg;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.28));
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float{ 50%{ translate: 0 -10px; } }
.hero-plane-word{ font: 700 30px 'Inter', system-ui, sans-serif; fill: #17565E; letter-spacing: -.01em; }
.hero-plane-shine{ mix-blend-mode: soft-light; }

@media (max-width: 900px){
  .hero{ aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column-reverse; }
  .hero-copy{ max-width: none; padding: 0 24px 32px; }
  .hero-plane-wrap{ position: relative; width: 98%; right: auto; top: auto; margin: 36px 0 12px -4%; }
  .hero-sheet-1{ width: 80%; height: 40%; right: -6%; top: 4%; }
  .hero-sheet-2{ width: 60%; height: 30%; right: 30%; top: 16%; }
  .hero-route{ display: none; }
}
@media (max-width: 480px){
  .hero{ margin-top: 16px; border-radius: 20px; }
  .hero-sub{ font-size: 15px; }
  .hero-btn{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  .hero-sheen, .hero-plane{ animation: none; }
  .hero-layer, .hero-plane-wrap{ transition: none; }
}

/* ===== Homepage sections: How it works / What you get / About ===== */
.home-section{ max-width: 1200px; margin: 0 auto; padding: 72px 20px 0; scroll-margin-top: 80px; }
.home-head{ text-align: center; max-width: 640px; margin: 0 auto 8px; }
.home-head h2{ margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.02em; color: var(--text-900); }
.home-head p{ margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-600); }
#services .row-container{ align-items: stretch; }
.home-link{ font-weight: 600; margin-top: 4px; }
.home-note{ text-align: center; margin: 28px auto 0; max-width: 640px; font-size: 14px; color: var(--text-600); }

.steps{
  list-style: none; margin: 32px auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  counter-reset: none;
}
.step{
  position: relative; padding: 24px 22px 22px;
  background: #fff; border: 1px solid #E3EEF0; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.step-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-500); color: #fff; font-weight: 700;
}
.step h3{ margin: 16px 0 8px; font-size: 18px; color: var(--text-900); }
.step p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-600); }
@media (max-width: 1000px){ .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

.about{ padding-bottom: 72px; }
.about-inner{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  padding: 48px; border-radius: var(--radius-lg);
  background: #E6F4F6; border: 1px solid #CFE7EA;
}
.about-text h2{ margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.02em; color: var(--text-900); }
.about-text p{ margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--text-800); }
.about-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.about-points li{ background: #fff; border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.about-points h3{ margin: 0 0 4px; font-size: 17px; color: #0F5A63; }
.about-points p{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-600); }
@media (max-width: 900px){
  .about-inner{ grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
}
#services .row-container{ padding-left: 0; padding-right: 0; }
#services .box{ width: min(540px, 100%); }
.footer-contact a{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.footer-contact a:hover{ border-bottom-color: #fff; }