:root {
  color-scheme: dark;
  --ink: #f7ead0;
  --paper-ink: #17202a;
  --muted: rgba(247, 234, 208, 0.72);
  --paper-muted: #5d6470;
  --faint: rgba(247, 234, 208, 0.46);
  --line: rgba(212, 176, 120, 0.2);
  --night: #06101b;
  --deep: #0a1927;
  --navy: #091522;
  --paper: #f7f4ed;
  --paper-soft: #fffdf8;
  --panel: rgba(7, 17, 28, 0.78);
  --panel-strong: rgba(7, 16, 27, 0.92);
  --gold: #d8b378;
  --champagne: #f1d7a5;
  --aqua: #8dcad7;
  --blue: #5f84a6;
  --rose: #c98a69;
  --green: #8cae8f;
  --shadow: 0 30px 90px rgba(5, 13, 21, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans SC", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(216, 179, 120, 0.08), transparent 26%),
    linear-gradient(rgba(216, 179, 120, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 179, 120, 0.018) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 68%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 16, 27, 0.08), transparent 34%);
  opacity: 0.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 22px clamp(28px, 5.8vw, 102px);
  border-bottom: 1px solid rgba(216, 179, 120, 0.22);
  background: rgba(5, 15, 25, 0.86);
  box-shadow: 0 18px 70px rgba(3, 8, 14, 0.28);
  backdrop-filter: blur(18px) saturate(128%);
  border-radius: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(216, 179, 120, 0.88);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(216, 179, 120, 0.85) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(216, 179, 120, 0.85) 50%, transparent 51%),
    radial-gradient(circle, transparent 0 29%, rgba(216, 179, 120, 0.7) 30% 31%, transparent 32%);
  box-shadow: 0 0 28px rgba(216, 179, 120, 0.16), inset 0 0 0 6px rgba(216, 179, 120, 0.04);
}

.brand-mark span {
  position: absolute;
  inset: 8px;
  background: linear-gradient(135deg, transparent 42%, rgba(216, 179, 120, 0.98) 43% 57%, transparent 58%);
  transform: rotate(45deg);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: compassGlow 5s ease-in-out infinite;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(216, 179, 120, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 179, 120, 0.9) 0 2px, transparent 3px);
  clip-path: none;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(216, 179, 120, 0.22);
  border-radius: 50%;
}

.brand-copy {
  min-width: 0;
}

.brand strong {
  display: block;
  color: #f6dfb4;
  font-family: "Times New Roman", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.brand small {
  display: block;
  margin-top: 6px;
  color: rgba(247, 234, 208, 0.68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: inline-flex;
  align-items: center;
  gap: clamp(13px, 1.7vw, 25px);
  color: rgba(247, 234, 208, 0.86);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  transition: transform 200ms ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-action,
.primary-button,
.secondary-button,
.contact-actions a {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  color: #07111b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(135deg, #e6c792, var(--gold) 58%, #b99055);
  box-shadow: 0 12px 30px rgba(216, 179, 120, 0.18);
}

.language-switch {
  display: inline-flex;
  justify-self: end;
  border: 0;
  background: transparent;
}

.language-switch button {
  min-width: 34px;
  height: 32px;
  border: 0;
  color: rgba(247, 234, 208, 0.76);
  font: 800 11px Inter, "Noto Sans SC", sans-serif;
  background: transparent;
  cursor: pointer;
}

.language-switch button.active {
  color: var(--champagne);
  background: rgba(216, 179, 120, 0.12);
}

.nav-action:hover,
.primary-button:hover,
.secondary-button:hover,
.contact-actions a:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  display: grid;
  min-height: 92svh;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: clamp(28px, 5vw, 74px);
  overflow: hidden;
  padding: 178px clamp(28px, 6.6vw, 116px) 76px;
  background:
    linear-gradient(90deg, rgba(5, 15, 25, 0.96) 0%, rgba(5, 15, 25, 0.76) 33%, rgba(5, 15, 25, 0.28) 68%, rgba(5, 15, 25, 0.12) 100%),
    radial-gradient(circle at 79% 44%, rgba(255, 219, 153, 0.9), rgba(216, 179, 120, 0.26) 13%, transparent 30%),
    linear-gradient(180deg, #0a1724 0%, #182a37 42%, #092036 43%, #06111e 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 11% 0 33%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 84% 52%, rgba(255, 220, 158, 0.3), transparent 24%),
    linear-gradient(12deg, transparent 0 57%, rgba(19, 26, 33, 0.78) 58% 71%, transparent 72%),
    linear-gradient(-8deg, transparent 0 68%, rgba(42, 43, 43, 0.72) 69% 76%, transparent 77%),
    radial-gradient(ellipse at 52% 78%, rgba(22, 30, 37, 0.78), transparent 36%);
  filter: saturate(0.9);
  opacity: 0.9;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 42%;
  background:
    linear-gradient(180deg, rgba(8, 24, 38, 0.2), rgba(3, 10, 18, 0.96)),
    repeating-radial-gradient(ellipse at 72% 0%, rgba(246, 209, 145, 0.28) 0 1px, transparent 2px 13px),
    repeating-linear-gradient(172deg, rgba(241, 215, 165, 0.16) 0 2px, transparent 3px 20px),
    linear-gradient(180deg, #0a2a43, #06101b 78%);
  background-size: auto, 170px 24px, auto, auto;
  transform-origin: center bottom;
  animation: seaBreath 7s ease-in-out infinite;
}

#strategyCanvas,
.aurora,
.hero-lighthouse {
  position: absolute;
  inset: 0;
}

#strategyCanvas {
  z-index: 0;
  width: 100%;
  height: 100%;
}

.aurora {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 44%, rgba(248, 219, 165, 0.42), transparent 18%),
    linear-gradient(90deg, rgba(6, 16, 27, 0.98), rgba(6, 16, 27, 0.44) 46%, rgba(6, 16, 27, 0.08)),
    linear-gradient(0deg, rgba(6, 16, 27, 0.94), rgba(6, 16, 27, 0.08) 46%, rgba(6, 16, 27, 0.42));
}

.hero-content,
.hero-dashboard {
  position: relative;
  z-index: 6;
}

.hero-content {
  max-width: 760px;
}

.eyebrow,
.section-heading span,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before,
.section-heading span::before,
.section-label::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
}

.hero .eyebrow {
  color: var(--champagne);
}

.hero h1 {
  margin: 20px 0 22px;
  max-width: 760px;
  color: var(--champagne);
  font-family: "Times New Roman", "Noto Serif SC", serif;
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.04em;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  animation: none;
}

.hero-subtitle {
  max-width: 590px;
  margin: 0;
  color: rgba(247, 234, 208, 0.82);
  font-size: clamp(14px, 1.06vw, 17px);
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.primary-button,
.secondary-button,
.contact-actions a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-weight: 900;
}

.primary-button {
  color: #07111b;
  background: linear-gradient(135deg, #e8c994, var(--gold), #ad854d);
  box-shadow: 0 18px 44px rgba(216, 179, 120, 0.2);
}

.secondary-button,
.contact-actions a {
  border: 1px solid rgba(216, 179, 120, 0.36);
  color: var(--champagne);
  background: rgba(255, 255, 255, 0.03);
}

.capital-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 46px;
  border-top: 1px solid rgba(216, 179, 120, 0.22);
  max-width: 980px;
}

.capital-strip span {
  border-right: 1px solid rgba(216, 179, 120, 0.22);
  padding: 17px 28px 0 0;
  margin-right: 28px;
  color: rgba(247, 234, 208, 0.78);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
}

.hero-dashboard {
  align-self: center;
  border: 1px solid rgba(216, 179, 120, 0.28);
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(216, 179, 120, 0.12), transparent 38%),
    rgba(7, 17, 28, 0.62);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.dashboard-head {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.dashboard-head span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-head strong {
  font-size: 25px;
  line-height: 1.1;
}

.dashboard-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dashboard-grid div {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  min-height: 56px;
  border: 1px solid rgba(251, 247, 235, 0.1);
  background: linear-gradient(90deg, rgba(103, 240, 226, 0.08), rgba(255, 255, 255, 0.03));
}

.dashboard-grid b {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--aqua);
  border-right: 1px solid rgba(251, 247, 235, 0.08);
}

.dashboard-grid span {
  padding: 0 12px;
  color: rgba(251, 247, 235, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.hero-lighthouse {
  z-index: 4;
  pointer-events: none;
  opacity: 0.42;
}

.hero-beam {
  position: absolute;
  right: clamp(56px, 12vw, 190px);
  bottom: clamp(325px, 43vh, 440px);
  width: min(62vw, 880px);
  height: 190px;
  transform-origin: right center;
  transform: rotate(-9deg);
  background: linear-gradient(90deg, transparent, rgba(255, 231, 173, 0.08) 38%, rgba(255, 231, 173, 0.4));
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 58%);
  filter: blur(0.2px);
  animation: beaconSweep 7s ease-in-out infinite;
}

.hero-beam.second {
  height: 92px;
  transform: rotate(8deg);
  opacity: 0.55;
  animation-delay: -3.2s;
}

.hero-lighthouse .lantern {
  position: absolute;
  right: clamp(40px, 10vw, 150px);
  bottom: clamp(332px, 43vh, 430px);
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 231, 173, 0.7);
  background: radial-gradient(circle, #fff8d4, #f7c86a 48%, rgba(247, 200, 106, 0.14) 70%);
  box-shadow: 0 0 42px rgba(247, 200, 106, 0.9);
}

.hero-lighthouse .tower {
  position: absolute;
  right: clamp(52px, 10.7vw, 162px);
  bottom: clamp(142px, 22vh, 210px);
  width: 44px;
  height: 190px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, rgba(255, 244, 199, 0.86), rgba(138, 89, 40, 0.92));
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.hero-lighthouse .rocks {
  position: absolute;
  right: clamp(14px, 8vw, 132px);
  bottom: clamp(102px, 16vh, 170px);
  width: 150px;
  height: 58px;
  background: linear-gradient(135deg, rgba(90, 87, 81, 0.94), rgba(20, 26, 30, 0.98));
  clip-path: polygon(0 100%, 10% 45%, 22% 70%, 35% 18%, 52% 58%, 66% 20%, 82% 64%, 100% 100%);
}

.hero-yacht {
  position: absolute;
  right: clamp(118px, 20vw, 360px);
  bottom: clamp(112px, 19vh, 188px);
  z-index: 5;
  width: clamp(210px, 24vw, 420px);
  height: clamp(210px, 25vw, 430px);
  transform-origin: 54% 92%;
  filter: drop-shadow(0 28px 46px rgba(0, 0, 0, 0.48));
  animation: yachtSail 6.8s ease-in-out infinite;
}

.yacht-mast,
.yacht-sail,
.yacht-hull,
.yacht-wake {
  position: absolute;
  display: block;
}

.yacht-mast {
  left: 51%;
  bottom: 18%;
  width: 2px;
  height: 72%;
  background: linear-gradient(180deg, rgba(252, 237, 201, 0.86), rgba(143, 104, 65, 0.92));
  box-shadow: 0 0 10px rgba(216, 179, 120, 0.25);
}

.yacht-sail {
  bottom: 28%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(216, 179, 120, 0.5)),
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(6, 16, 27, 0.08) 19% 20%, transparent 21% 40%);
  border: 1px solid rgba(245, 228, 190, 0.34);
  transform-origin: bottom center;
  animation: sailShiver 5.8s ease-in-out infinite;
}

.yacht-sail.main {
  left: 52%;
  width: 34%;
  height: 66%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.yacht-sail.front {
  left: 27%;
  width: 25%;
  height: 52%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.88;
  animation-delay: -1.7s;
}

.yacht-hull {
  left: 26%;
  bottom: 13%;
  width: 58%;
  height: 11%;
  background:
    linear-gradient(180deg, #e5dcc9 0 35%, #293746 36% 68%, #101925 69%),
    linear-gradient(90deg, transparent, rgba(216, 179, 120, 0.22));
  clip-path: polygon(0 18%, 82% 18%, 100% 0, 86% 76%, 18% 100%);
  box-shadow: inset 0 -9px 0 rgba(6, 16, 27, 0.36);
}

.yacht-wake {
  left: 14%;
  right: 4%;
  bottom: 6%;
  height: 10%;
  background:
    radial-gradient(ellipse at 52% 42%, rgba(255, 255, 255, 0.68), transparent 18%),
    repeating-linear-gradient(172deg, rgba(247, 234, 208, 0.45) 0 2px, transparent 3px 18px);
  opacity: 0.58;
  filter: blur(0.6px);
  transform: skewX(-14deg);
  animation: yachtWake 3.4s ease-in-out infinite;
}

.section,
.voyage-intro,
.media-wall,
.arrival,
.contact {
  position: relative;
  z-index: 5;
  padding: clamp(74px, 9vw, 132px) clamp(20px, 5vw, 78px);
  color: var(--paper-ink);
  background: var(--paper);
}

.section-heading {
  max-width: 850px;
  margin-bottom: 34px;
}

.section-heading.compact {
  max-width: 980px;
}

.section-heading h2,
.membership-copy h2,
.events h2,
.enterprise h2,
.arrival h2,
.contact h2 {
  margin: 13px 0 0;
  color: var(--paper-ink);
  font-family: "Times New Roman", "Noto Serif SC", serif;
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.03em;
}

.voyage-cards,
.platform-grid,
.topic-grid,
.membership-grid,
.enterprise-list {
  display: grid;
  gap: 16px;
}

.voyage-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voyage-cards article,
.platform-grid article,
.topic-grid article,
.membership-grid article,
.event-card,
.enterprise-list,
.entry-copy,
.glass-map,
.channel-grid article,
.ai-services article,
.contact-card {
  border: 1px solid rgba(27, 40, 53, 0.12);
  background:
    linear-gradient(145deg, rgba(216, 179, 120, 0.08), transparent 34%),
    rgba(255, 253, 248, 0.92);
  box-shadow: 0 20px 60px rgba(12, 24, 36, 0.08);
  backdrop-filter: none;
}

.voyage-cards article {
  min-height: 190px;
  padding: 26px;
}

.voyage-cards strong,
.topic-grid span,
.platform-grid strong,
.membership-grid span,
.channel-grid strong,
.ai-services h3,
.enterprise-list strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
}

.voyage-cards p,
.entry-copy p,
.event-card p,
.membership-copy p,
.membership-grid p,
.topic-grid p,
.ai-services p,
.large-channel p,
.arrival p,
.contact p,
.enterprise-list p {
  color: var(--paper-muted);
  line-height: 1.68;
}

.media-wall {
  display: grid;
  grid-template-columns: 1.15fr 0.92fr 0.92fr;
  min-height: 640px;
  gap: 16px;
  padding-top: 22px;
}

.media-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: end;
  padding: 30px;
  border: 1px solid rgba(255, 231, 173, 0.18);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.media-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
  transition: transform 700ms ease;
}

.media-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 5, 10, 0.05), rgba(2, 5, 10, 0.72)),
    radial-gradient(circle at 68% 22%, rgba(247, 200, 106, 0.2), transparent 38%);
}

.media-tile:hover::before {
  transform: scale(1.09);
}

.singapore-photo::before {
  background-image: url("https://images.unsplash.com/photo-1525625293386-3f8f99389edd?auto=format&fit=crop&w=1600&q=80");
}

.japan-photo::before {
  background-image: url("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&w=1600&q=80");
}

.specialist-photo::before {
  background-image:
    linear-gradient(120deg, rgba(4, 10, 16, 0.06), rgba(4, 10, 16, 0.16)),
    url("https://images.unsplash.com/photo-1587854692152-cbe660dbde88?auto=format&fit=crop&w=1600&q=80");
}

.media-tile span {
  color: var(--champagne);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.media-tile h2 {
  max-width: 560px;
  margin: 12px 0 0;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.08;
}

.entry-layout,
.ai-command,
.events,
.enterprise {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(20px, 4vw, 58px);
  align-items: stretch;
}

.entry-copy {
  padding: clamp(24px, 4vw, 46px);
}

.signal-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.signal-list li {
  position: relative;
  padding-left: 24px;
  color: #303b47;
}

.signal-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--gold), var(--aqua));
}

.glass-map {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(103, 240, 226, 0.12), rgba(247, 200, 106, 0.08)),
    radial-gradient(circle at 72% 38%, rgba(247, 200, 106, 0.24), transparent 28%),
    rgba(8, 16, 25, 0.74);
}

.glass-map::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(103, 240, 226, 0.14);
  background:
    linear-gradient(rgba(103, 240, 226, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 240, 226, 0.08) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(700px) rotateX(58deg) rotateZ(-16deg);
}

.glass-map strong {
  position: absolute;
  left: 28px;
  bottom: 24px;
  max-width: 260px;
  font-size: 34px;
  line-height: 1;
}

.map-dot {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 231, 173, 0.32);
  color: #08121b;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff3c5, var(--gold));
  box-shadow: 0 0 36px rgba(247, 200, 106, 0.34);
}

.sg { left: 48%; top: 55%; }
.jp { left: 72%; top: 22%; }
.hk { left: 42%; top: 38%; }
.my { left: 34%; top: 68%; }

.map-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(103, 240, 226, 0.05), rgba(103, 240, 226, 0.7), rgba(247, 200, 106, 0.8));
}

.line-one { left: 49%; top: 58%; width: 170px; transform: rotate(-34deg); }
.line-two { left: 45%; top: 42%; width: 120px; transform: rotate(35deg); }
.line-three { left: 38%; top: 70%; width: 130px; transform: rotate(-24deg); }

.distribution {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(103, 240, 226, 0.05));
}

.channel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 0.75fr));
  gap: 16px;
}

.channel-grid article {
  min-height: 180px;
  padding: 24px;
}

.channel-grid .large-channel {
  grid-row: span 2;
  min-height: 376px;
}

.large-channel h3 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.08;
}

.large-channel b {
  display: inline-flex;
  margin-top: 22px;
  color: var(--champagne);
  font-size: 20px;
}

.channel-grid article:not(.large-channel) span {
  color: var(--aqua);
  font-size: 13px;
  font-weight: 900;
}

.ai-section {
  overflow: hidden;
}

.ai-command {
  align-items: center;
}

.ai-orb {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(103, 240, 226, 0.2);
  background:
    radial-gradient(circle at 50% 45%, rgba(103, 240, 226, 0.26), transparent 31%),
    radial-gradient(circle at 50% 58%, rgba(247, 200, 106, 0.18), transparent 38%),
    rgba(8, 16, 25, 0.56);
  box-shadow: inset 0 0 80px rgba(103, 240, 226, 0.08), var(--shadow);
  overflow: hidden;
}

.ai-orb span {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(103, 240, 226, 0.36);
  border-radius: 50%;
  animation: orbPulse 4s ease-in-out infinite;
}

.ai-orb span::before,
.ai-orb span::after,
.ai-orb i {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.ai-orb span::before {
  inset: 13%;
  border: 1px dashed rgba(255, 231, 173, 0.44);
  animation: rotate 12s linear infinite;
}

.ai-orb span::after {
  inset: 31%;
  background: radial-gradient(circle, rgba(255, 244, 199, 0.9), rgba(103, 240, 226, 0.28), transparent 70%);
  box-shadow: 0 0 90px rgba(103, 240, 226, 0.5);
}

.ai-orb i {
  left: 50%;
  top: 50%;
  width: 290px;
  height: 290px;
  translate: -50% -50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(90deg, transparent 49%, rgba(103, 240, 226, 0.28) 50%, transparent 51%),
    linear-gradient(transparent 49%, rgba(247, 200, 106, 0.22) 50%, transparent 51%);
}

.ai-services {
  display: grid;
  gap: 14px;
}

.ai-services article {
  padding: 24px;
}

.ai-services .featured-ai {
  min-height: 260px;
  display: grid;
  align-content: center;
  border-color: rgba(103, 240, 226, 0.28);
  background:
    radial-gradient(circle at 88% 16%, rgba(103, 240, 226, 0.2), transparent 32%),
    linear-gradient(145deg, rgba(247, 200, 106, 0.12), rgba(103, 240, 226, 0.08)),
    rgba(8, 16, 25, 0.78);
}

.ai-services h3 {
  margin: 0;
}

.ai-services p {
  margin-bottom: 0;
}

.platform-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-grid article {
  padding: 22px;
}

.platform-grid span {
  display: block;
  margin-top: 11px;
  color: var(--muted);
}

.topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.topic-grid article {
  min-height: 210px;
  padding: 24px;
}

.membership {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(400px, 1.2fr);
  gap: clamp(20px, 4vw, 58px);
  align-items: start;
}

.membership-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-grid article {
  min-height: 220px;
  padding: 24px;
}

.membership-grid .featured {
  border-color: rgba(247, 200, 106, 0.46);
  background:
    linear-gradient(145deg, rgba(247, 200, 106, 0.2), rgba(103, 240, 226, 0.08)),
    rgba(8, 16, 25, 0.8);
}

.membership-grid strong {
  display: block;
  margin-top: 14px;
  color: var(--champagne);
  font-size: 23px;
}

.events,
.enterprise {
  align-items: start;
}

.event-card {
  padding: clamp(24px, 4vw, 42px);
}

.event-card strong {
  display: block;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.08;
}

.event-card span {
  display: inline-flex;
  margin-top: 22px;
  padding: 12px 14px;
  color: #061018;
  font-weight: 900;
  background: linear-gradient(135deg, #fff4c7, var(--gold));
}

.enterprise-list {
  padding: 24px;
}

.enterprise-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 0;
}

.enterprise-list div:first-child {
  padding-top: 0;
}

.enterprise-list span {
  color: var(--champagne);
  font-weight: 900;
  white-space: nowrap;
}

.arrival {
  min-height: 112vh;
  display: grid;
  align-content: end;
  gap: 30px;
  overflow: hidden;
  padding-top: clamp(90px, 12vw, 160px);
  padding-bottom: clamp(52px, 7vw, 92px);
  background:
    linear-gradient(180deg, rgba(2, 6, 12, 0.96) 0%, rgba(10, 35, 55, 0.9) 30%, rgba(227, 150, 82, 0.62) 62%, rgba(255, 222, 135, 0.86) 79%, rgba(78, 135, 91, 0.95) 100%);
  isolation: isolate;
}

.arrival::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 34vh;
  background:
    radial-gradient(ellipse at 22% 40%, rgba(255, 230, 150, 0.66), transparent 30%),
    linear-gradient(180deg, rgba(154, 177, 105, 0.96), #496f4a 72%, #2b4934);
  clip-path: polygon(0 42%, 9% 31%, 20% 40%, 31% 24%, 44% 34%, 57% 18%, 70% 28%, 83% 12%, 100% 25%, 100% 100%, 0 100%);
  z-index: -1;
  box-shadow: 0 -28px 90px rgba(255, 214, 126, 0.34);
}

.arrival::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(180deg, transparent 0 64px, rgba(255, 244, 199, 0.12) 65px 66px, transparent 67px 118px),
    radial-gradient(circle at 72% 62%, rgba(255, 244, 199, 0.3), transparent 22%),
    radial-gradient(circle at 58% 82%, rgba(255, 244, 199, 0.24), transparent 28%);
  animation: arrivalShimmer 8s ease-in-out infinite;
}

.arrival-sky,
.arrival-sun,
.arrival-lighthouse,
.arrival-coast {
  position: absolute;
  pointer-events: none;
}

.arrival-sky {
  inset: 0;
  z-index: 0;
}

.arrival-sun {
  right: clamp(84px, 16vw, 230px);
  top: 18%;
  width: clamp(98px, 14vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7ce 0 26%, #f7c86a 54%, rgba(247, 200, 106, 0.06) 72%);
  box-shadow: 0 0 100px rgba(247, 200, 106, 0.72), 0 0 220px rgba(255, 142, 93, 0.32);
}

.arrival-lighthouse {
  right: clamp(56px, 10vw, 155px);
  bottom: 25vh;
  width: 76px;
  height: 230px;
  filter: drop-shadow(0 16px 28px rgba(30, 24, 16, 0.3));
}

.arrival-lighthouse::before {
  content: "";
  position: absolute;
  left: -420px;
  top: 30px;
  width: 460px;
  height: 120px;
  transform: rotate(-5deg);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 199, 0.2), rgba(255, 244, 199, 0.62));
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 56%);
  animation: coastBeam 6.5s ease-in-out infinite;
}

.arrival-lighthouse i {
  position: absolute;
  left: 26px;
  top: 0;
  width: 32px;
  height: 38px;
  border: 1px solid rgba(255, 244, 199, 0.85);
  background: radial-gradient(circle, #fff8d4, #f7c86a 60%, rgba(247, 200, 106, 0.1));
  box-shadow: 0 0 44px rgba(255, 244, 199, 0.9);
}

.arrival-lighthouse b {
  position: absolute;
  left: 20px;
  top: 36px;
  width: 44px;
  height: 194px;
  background:
    repeating-linear-gradient(180deg, rgba(151, 81, 43, 0.34) 0 16px, rgba(255, 244, 199, 0.78) 16px 34px),
    linear-gradient(90deg, #fff3c5, #9b6134);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.arrival-coast {
  left: 0;
  right: 0;
  bottom: 28vh;
  height: 80px;
  background:
    radial-gradient(ellipse at 78% 100%, rgba(255, 244, 199, 0.5), transparent 24%),
    repeating-linear-gradient(175deg, rgba(255, 244, 199, 0.4) 0 2px, transparent 2px 34px);
  opacity: 0.68;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 88%, transparent);
}

.arrival-copy {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  text-shadow: 0 16px 46px rgba(0, 0, 0, 0.32);
}

.arrival-copy h2 {
  max-width: 880px;
  color: #fff5d1;
}

.arrival-copy p {
  max-width: 760px;
  color: rgba(255, 250, 230, 0.82);
  font-size: 15px;
  line-height: 1.75;
}

.arrival-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
  margin-top: 24px;
}

.arrival-metrics div {
  border: 1px solid rgba(255, 244, 199, 0.24);
  padding: 18px;
  background: rgba(30, 48, 42, 0.32);
  backdrop-filter: blur(14px);
}

.arrival-metrics strong {
  display: block;
  color: #fff5d1;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}

.arrival-metrics span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 250, 230, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.company-overview {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  border: 1px solid rgba(255, 244, 199, 0.28);
  padding: clamp(24px, 4vw, 46px);
  background:
    linear-gradient(135deg, rgba(255, 250, 230, 0.18), rgba(255, 255, 255, 0.04) 46%),
    rgba(47, 65, 43, 0.62);
  box-shadow: 0 34px 90px rgba(47, 53, 30, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
}

.company-overview p {
  max-width: 850px;
  margin-top: 18px;
  color: rgba(255, 250, 230, 0.78);
  font-size: 15px;
  line-height: 1.72;
}

.company-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.company-facts div {
  min-height: 122px;
  border: 1px solid rgba(255, 244, 199, 0.18);
  padding: 18px;
  background: rgba(255, 244, 199, 0.08);
}

.company-facts strong {
  display: block;
  color: var(--champagne);
  font-size: 15px;
  font-weight: 900;
}

.company-facts span {
  display: block;
  margin-top: 9px;
  color: rgba(255, 250, 230, 0.7);
  font-size: 13px;
  line-height: 1.55;
}

.contact {
  padding-top: 90px;
  padding-bottom: 90px;
  background: linear-gradient(180deg, rgba(18, 24, 26, 0.72), rgba(2, 5, 10, 0.96));
}

.contact-card {
  padding: clamp(26px, 5vw, 58px);
}

.contact h2 {
  max-width: 980px;
  font-size: clamp(28px, 3.8vw, 52px);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.contact-actions span {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  border: 1px solid rgba(255, 231, 173, 0.16);
  padding: 0 18px;
  color: var(--muted);
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 26px clamp(20px, 5vw, 78px);
  color: rgba(251, 247, 235, 0.5);
  font-size: 12px;
  background: #02050a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.voyage-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.64;
  mix-blend-mode: multiply;
}

.route-sea {
  position: absolute;
  inset: 0;
  opacity: calc(0.06 + var(--voyage-opacity, 0.24) * 0.28);
  background:
    radial-gradient(circle at 94% var(--voyage-percent, 0%), rgba(216, 179, 120, 0.24), transparent 8%),
    repeating-linear-gradient(180deg, transparent 0 68px, rgba(216, 179, 120, 0.08) 69px 70px, transparent 71px 138px);
  mask-image: linear-gradient(90deg, transparent 0 78%, black 90%, black 100%);
}

.route-chart {
  position: absolute;
  top: 8vh;
  right: 0;
  width: min(240px, 18vw);
  height: 86vh;
  opacity: calc(0.22 + var(--voyage-opacity, 0.24) * 0.34);
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(216, 179, 120, 0.18));
}

.route-chart path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.route-shadow {
  stroke: rgba(5, 15, 25, 0.14);
  stroke-width: 12;
  stroke-linecap: round;
}

.route-line {
  stroke: url(#routeGradient);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--voyage-progress, 0));
}

.route-scan {
  position: absolute;
  right: 0;
  top: calc(5vh + var(--voyage-percent, 0%));
  width: min(210px, 16vw);
  height: min(210px, 16vw);
  transform: translate(50%, -50%);
  border: 1px solid rgba(216, 179, 120, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(216, 179, 120, 0.13), transparent 38%),
    conic-gradient(from 25deg, rgba(216, 179, 120, 0.22), transparent 18%, transparent 72%, rgba(216, 179, 120, 0.08));
  opacity: calc(0.12 + var(--voyage-opacity, 0.24) * 0.34);
  animation: sonarSpin 8s linear infinite;
}

.route-progress {
  position: absolute;
  right: clamp(10px, 1.8vw, 28px);
  top: 20vh;
  display: grid;
  height: 58vh;
  align-content: space-between;
  opacity: 0.72;
}

.route-progress span {
  position: relative;
  display: grid;
  width: 54px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(216, 179, 120, 0.24);
  color: rgba(27, 40, 53, 0.62);
  font-size: 10px;
  font-weight: 900;
  background: rgba(255, 253, 248, 0.62);
  box-shadow: 0 10px 28px rgba(12, 24, 36, 0.08);
  backdrop-filter: blur(8px);
}

.route-progress span::before {
  content: attr(data-step);
  position: absolute;
  right: calc(100% + 8px);
  color: rgba(173, 133, 77, 0.7);
  font-size: 10px;
}

.route-progress span.active {
  color: #061018;
  border-color: rgba(255, 231, 173, 0.8);
  background: linear-gradient(135deg, #fff4c7, var(--gold));
}

.voyage-ship {
  --arrival-boost: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  transform: translate3d(84vw, 12vh, 0);
  transform-origin: 50% 50%;
  opacity: 0.54;
  filter: drop-shadow(0 18px 34px rgba(12, 24, 36, 0.2)) drop-shadow(0 0 18px rgba(216, 179, 120, 0.2));
  transition: filter 240ms ease, opacity 240ms ease;
  animation: vesselHover 3.2s ease-in-out infinite;
}

.voyage-ship.arriving {
  opacity: 0.64;
  filter: drop-shadow(0 22px 40px rgba(58, 39, 18, 0.22)) drop-shadow(0 0 34px rgba(216, 179, 120, 0.38));
}

.voyage-ship.docked {
  animation: vesselDocked 3.4s ease-in-out infinite;
}

.ship-aura,
.ship-core,
.ship-wake,
.ship-spray,
.voyage-ship::before,
.voyage-ship::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.voyage-ship::before {
  inset: 16px;
  border: 1px solid rgba(255, 231, 173, 0.38);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255, 231, 173, 0.58), transparent 22%, rgba(103, 240, 226, 0.46), transparent 62%, rgba(255, 231, 173, 0.4));
  opacity: calc(0.4 + var(--arrival-boost) * 0.28);
  filter: blur(0.2px);
  animation: beaconRing 5.4s linear infinite;
}

.voyage-ship::after {
  inset: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 48%, rgba(103, 240, 226, 0.16) 49% 50%, transparent 51%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.16) 0 2deg, transparent 2deg 14deg);
  opacity: 0.62;
  animation: radarPulse 2.8s ease-in-out infinite;
}

.ship-aura {
  inset: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 199, 0.72), rgba(247, 200, 106, 0.24) 36%, rgba(103, 240, 226, 0.12) 58%, transparent 70%);
  mix-blend-mode: screen;
  opacity: calc(0.72 + var(--arrival-boost) * 0.26);
}

.ship-core {
  left: 32px;
  top: 24px;
  width: 48px;
  height: 66px;
  transform: rotate(180deg);
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(255, 231, 173, 0.46));
}

.ship-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.56) 13% 18%, transparent 19%),
    linear-gradient(180deg, #fff9df 0%, #f7c86a 44%, #c37d2f 100%);
  clip-path: polygon(50% 0, 92% 34%, 78% 100%, 22% 100%, 8% 34%);
  box-shadow: inset 0 -10px 0 rgba(68, 42, 17, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.ship-deck,
.ship-bow,
.ship-bridge {
  position: absolute;
  display: block;
}

.ship-deck {
  left: 14px;
  top: 21px;
  width: 20px;
  height: 28px;
  background: linear-gradient(180deg, rgba(4, 12, 20, 0.72), rgba(14, 37, 52, 0.42));
  clip-path: polygon(50% 0, 100% 28%, 76% 100%, 24% 100%, 0 28%);
}

.ship-bow {
  left: 20px;
  top: 5px;
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: #fff4c7;
  box-shadow: 0 0 18px rgba(255, 244, 199, 0.95);
}

.ship-bridge {
  left: 18px;
  bottom: 12px;
  width: 12px;
  height: 8px;
  background: rgba(103, 240, 226, 0.8);
  box-shadow: 0 0 14px rgba(103, 240, 226, 0.7);
}

.ship-wake {
  left: 18px;
  top: 64px;
  width: 76px;
  height: 96px;
  transform-origin: top center;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.52), transparent 22%),
    linear-gradient(180deg, rgba(103, 240, 226, 0.28), rgba(255, 231, 173, 0.18), transparent);
  clip-path: polygon(50% 0, 100% 100%, 58% 78%, 50% 100%, 42% 78%, 0 100%);
  opacity: calc(0.34 + var(--arrival-boost) * 0.28);
  filter: blur(1px);
  animation: wakeStream 1.6s ease-in-out infinite;
}

.wake-two {
  top: 58px;
  left: 28px;
  width: 56px;
  height: 120px;
  opacity: calc(0.2 + var(--arrival-boost) * 0.24);
  animation-delay: -0.72s;
}

.ship-spray {
  left: 34px;
  top: 10px;
  width: 44px;
  height: 26px;
  border-top: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(0.3px);
  animation: bowFlash 1.1s ease-in-out infinite;
}

@keyframes titleSweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes brandBeam {
  0%, 100% { transform: rotate(-22deg); opacity: 0.52; }
  50% { transform: rotate(14deg); opacity: 1; }
}

@keyframes compassGlow {
  0%, 100% { transform: rotate(45deg) scale(0.96); opacity: 0.72; }
  50% { transform: rotate(52deg) scale(1.04); opacity: 1; }
}

@keyframes beaconSweep {
  0%, 100% { transform: rotate(-16deg); opacity: 0.38; }
  50% { transform: rotate(8deg); opacity: 0.9; }
}

@keyframes orbPulse {
  0%, 100% { transform: scale(0.94); opacity: 0.58; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes sunRise {
  0%, 100% { transform: translateY(18px) scale(0.98); }
  50% { transform: translateY(-8px) scale(1.03); }
}

@keyframes seaBreath {
  0%, 100% { transform: translateY(0) scaleY(1); filter: saturate(1); }
  50% { transform: translateY(5px) scaleY(1.018); filter: saturate(1.08); }
}

@keyframes yachtSail {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.7deg); }
  34% { transform: translate3d(7px, -5px, 0) rotate(0.9deg); }
  68% { transform: translate3d(-4px, 4px, 0) rotate(-1.1deg); }
}

@keyframes sailShiver {
  0%, 100% { filter: brightness(1); transform: skewX(0deg); }
  44% { filter: brightness(1.12); transform: skewX(-1.3deg); }
  72% { filter: brightness(0.98); transform: skewX(0.7deg); }
}

@keyframes yachtWake {
  0%, 100% { opacity: 0.38; transform: translateX(0) skewX(-14deg) scaleX(0.92); }
  50% { opacity: 0.72; transform: translateX(-10px) skewX(-17deg) scaleX(1.08); }
}

@keyframes vesselHover {
  0%, 100% { margin-top: 0; }
  32% { margin-top: -8px; }
  70% { margin-top: 5px; }
}

@keyframes vesselDocked {
  0%, 100% { margin-top: 0; filter: saturate(1.08); }
  50% { margin-top: -2px; filter: saturate(1.24); }
}

@keyframes beaconRing {
  to { transform: rotate(360deg); }
}

@keyframes radarPulse {
  0%, 100% { transform: scale(0.86); opacity: 0.26; }
  50% { transform: scale(1.04); opacity: 0.74; }
}

@keyframes wakeStream {
  0% { transform: scaleY(0.72); opacity: 0.1; }
  42% { opacity: calc(0.46 + var(--arrival-boost) * 0.28); }
  100% { transform: scaleY(1.28); opacity: 0; }
}

@keyframes bowFlash {
  0%, 100% { transform: scaleX(0.72) translateY(2px); opacity: 0.28; }
  50% { transform: scaleX(1.1) translateY(-3px); opacity: 0.88; }
}

@keyframes sonarSpin {
  to { transform: translate(50%, -50%) rotate(360deg); }
}

@keyframes routeCurrent {
  0%, 100% { filter: blur(0); opacity: var(--voyage-opacity, 0.24); }
  50% { filter: blur(0.6px); opacity: calc(var(--voyage-opacity, 0.24) + 0.16); }
}

@keyframes arrivalShimmer {
  0%, 100% { opacity: 0.58; transform: translateY(0); }
  50% { opacity: 0.92; transform: translateY(-10px); }
}

@keyframes coastBeam {
  0%, 100% { transform: rotate(-9deg); opacity: 0.42; }
  50% { transform: rotate(4deg); opacity: 0.82; }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .nav-links {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: center;
    padding-top: 145px;
  }

  .hero-dashboard {
    max-width: 520px;
  }

  .media-wall,
  .entry-layout,
  .ai-command,
  .events,
  .enterprise,
  .membership {
    grid-template-columns: 1fr;
  }

  .media-wall {
    min-height: 0;
  }

  .media-tile {
    min-height: 430px;
  }
}

@media (max-width: 760px) {
  .topbar {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 10px;
  }

  .brand-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand small {
    display: none;
  }

  .nav-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }

  .language-switch button {
    min-width: 28px;
    height: 30px;
    font-size: 10px;
  }

  .hero {
    min-height: 96svh;
    padding: 132px 18px 56px;
  }

  .hero h1 {
    font-size: clamp(30px, 8.2vw, 42px);
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-actions {
    display: grid;
  }

  .primary-button,
  .secondary-button,
  .contact-actions a,
  .contact-actions span {
    width: 100%;
  }

  .hero-dashboard {
    display: none;
  }

  .hero-lighthouse .lantern,
  .hero-lighthouse .tower,
  .hero-lighthouse .rocks {
    opacity: 0.45;
  }

  .section,
  .voyage-intro,
  .media-wall,
  .arrival,
  .contact {
    padding-left: 18px;
    padding-right: 18px;
  }

  .voyage-cards,
  .platform-grid,
  .topic-grid,
  .membership-grid,
  .channel-grid {
    grid-template-columns: 1fr;
  }

  .channel-grid .large-channel {
    grid-row: auto;
    min-height: 300px;
  }

  .media-tile {
    min-height: 360px;
    padding: 22px;
  }

  .glass-map,
  .ai-orb {
    min-height: 360px;
  }

  .enterprise-list div {
    display: grid;
  }

  .footer {
    display: grid;
  }

  .voyage-layer {
    display: none;
  }

  .ship-core {
    left: 23px;
    top: 18px;
    width: 36px;
    height: 50px;
  }

  .ship-wake {
    left: 12px;
    top: 48px;
    width: 58px;
    height: 78px;
  }

  .route-progress {
    right: 8px;
    transform: scale(0.82);
    transform-origin: right center;
  }

  .company-facts {
    grid-template-columns: 1fr;
  }

  .arrival-metrics {
    grid-template-columns: 1fr;
  }

  .arrival-lighthouse {
    right: 22px;
    bottom: 22vh;
    transform: scale(0.72);
    transform-origin: bottom right;
  }
}

@media (max-width: 410px) {
  .hero h1 {
    font-size: 31px;
  }

  .brand strong {
    font-size: 15px;
  }
}

/* Reference-style luxury refresh */
:root {
  --navy-deep: #020d17;
  --navy-ink: #071521;
  --gold-ref: #d8b176;
  --gold-soft: #f0d29b;
  --paper-ref: #fbfaf6;
  --paper-ink: #17202a;
  --beam-rotation: -12deg;
  --beam-second-rotation: 9deg;
  --beam-y: 26vh;
  --voyage-opacity: 0.2;
}

body {
  background: var(--paper-ref);
  color: var(--paper-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 14px;
}

.site-shell {
  background: var(--paper-ref);
}

.topbar {
  min-height: 86px;
  padding: 0 clamp(42px, 6vw, 92px);
  background: rgba(2, 13, 23, 0.96);
  border-bottom: 1px solid rgba(216, 177, 118, 0.16);
  grid-template-columns: minmax(280px, 1fr) auto auto auto;
  backdrop-filter: blur(22px);
}

.brand {
  gap: 12px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-color: rgba(216, 177, 118, 0.82);
  box-shadow: none;
}

.brand-mark::before {
  background: linear-gradient(135deg, rgba(216, 177, 118, 0.95), rgba(216, 177, 118, 0.08));
}

.brand-text strong {
  color: #f1d29b;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.brand-text small {
  color: rgba(240, 210, 155, 0.72);
  font-size: 11px;
  letter-spacing: 0.28em;
  white-space: nowrap;
}

.primary-nav {
  gap: clamp(22px, 3.1vw, 48px);
}

.primary-nav a {
  color: rgba(255, 248, 235, 0.88);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--gold-soft);
}

.nav-action {
  min-height: 40px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #e3bf83, #c89e62);
  color: #071521;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.language-switch {
  border: 0;
  background: transparent;
  gap: 4px;
}

.language-switch button {
  color: rgba(255, 248, 235, 0.72);
  font-size: 13px;
}

.language-switch button.active {
  color: var(--gold-soft);
}

.scroll-beacon {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  opacity: calc(0.16 + var(--voyage-opacity) * 0.55);
  mix-blend-mode: screen;
}

.beacon-source {
  position: absolute;
  right: clamp(18px, 3vw, 58px);
  top: var(--beam-y);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff3c9;
  box-shadow:
    0 0 18px rgba(255, 235, 178, 0.98),
    0 0 60px rgba(216, 177, 118, 0.72);
}

.beacon-ray {
  position: absolute;
  right: clamp(22px, 4vw, 76px);
  top: var(--beam-y);
  width: min(78vw, 1120px);
  height: 178px;
  transform-origin: right center;
  clip-path: polygon(100% 45%, 0 0, 0 100%, 100% 55%);
  background: linear-gradient(90deg, rgba(255, 232, 169, 0), rgba(255, 226, 157, 0.1) 42%, rgba(255, 235, 190, 0.46));
  filter: blur(0.5px);
}

.beacon-ray.primary {
  transform: translateY(-50%) rotate(var(--beam-rotation));
  animation: beaconPulse 4.8s ease-in-out infinite;
}

.beacon-ray.secondary {
  height: 106px;
  opacity: 0.46;
  transform: translateY(-50%) rotate(var(--beam-second-rotation));
  background: linear-gradient(90deg, rgba(255, 232, 169, 0), rgba(255, 226, 157, 0.08) 50%, rgba(255, 246, 213, 0.34));
  animation: beaconPulse 6.4s ease-in-out infinite reverse;
}

.beacon-glow {
  position: absolute;
  right: -18vw;
  top: calc(var(--beam-y) - 34vh);
  width: 42vw;
  height: 68vh;
  background: radial-gradient(circle, rgba(240, 203, 136, 0.22), transparent 68%);
  filter: blur(12px);
}

.voyage-layer,
.route-sea,
.route-progress,
.voyage-ship,
.ship-core,
.ship-wake,
.hero-yacht {
  display: none !important;
}

.hero {
  min-height: 720px;
  height: 92svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 154px clamp(58px, 6.7vw, 106px) 54px;
  background: var(--navy-deep);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
}

.hero::before {
  inset: 0;
  z-index: 2;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(2, 10, 18, 0.97) 0%, rgba(3, 13, 22, 0.9) 26%, rgba(4, 15, 25, 0.5) 52%, rgba(4, 13, 22, 0.18) 78%),
    linear-gradient(180deg, rgba(2, 10, 18, 0.34), rgba(2, 10, 18, 0.06) 52%, rgba(2, 10, 18, 0.92));
  filter: none;
}

.hero::after {
  z-index: 3;
  height: 100%;
  background: linear-gradient(180deg, rgba(2, 10, 18, 0.08), transparent 46%, rgba(2, 10, 18, 0.86));
  animation: none;
}

#strategyCanvas,
.hero-lighthouse,
.hero-dashboard {
  display: none;
}

.aurora {
  z-index: 1;
  background:
    radial-gradient(circle at 74% 52%, rgba(240, 190, 116, 0.18), transparent 32%),
    radial-gradient(circle at 32% 40%, rgba(8, 28, 44, 0.42), transparent 42%);
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 8;
  align-self: center;
  max-width: 690px;
  padding-bottom: 22px;
}

.hero .eyebrow {
  margin: 22px 0 0;
  color: rgba(236, 213, 178, 0.84);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero .eyebrow::before {
  display: none;
}

.hero h1 {
  max-width: 640px;
  color: #e6c58f;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(44px, 3.8vw, 62px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.08em;
  white-space: normal;
  text-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
}

.hero-subtitle {
  max-width: 430px;
  color: rgba(255, 248, 235, 0.82);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.hero-actions {
  margin-top: 30px;
  gap: 0;
}

.hero .secondary-button {
  display: none;
}

.primary-button {
  min-width: 200px;
  min-height: 46px;
  border-radius: 0;
  padding: 0 28px;
  background: linear-gradient(135deg, #e3bf83, #c39a5e);
  color: #071521;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  box-shadow: none;
}

.primary-button::after {
  content: "→";
  margin-left: 28px;
  font-family: Georgia, serif;
}

.capital-strip {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1080px;
  margin-top: 52px;
  padding: 0;
  border: 0;
}

.capital-strip span {
  position: relative;
  min-height: 62px;
  padding: 0 30px 0 62px;
  border-right: 1px solid rgba(216, 177, 118, 0.3);
  color: #e6c58f;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: left;
}

.capital-strip span:last-child {
  border-right: 0;
}

.capital-strip span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(216, 177, 118, 0.88);
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent 47%, rgba(216, 177, 118, 0.88) 48%, rgba(216, 177, 118, 0.88) 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(216, 177, 118, 0.55) 48%, rgba(216, 177, 118, 0.55) 52%, transparent 53%);
}

.capital-strip small {
  color: rgba(255, 248, 235, 0.7);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.section,
.voyage-intro,
.media-wall {
  background: var(--paper-ref);
  color: var(--paper-ink);
}

.section-heading span,
.section-label {
  color: #b1844f;
  font-size: 13px;
  letter-spacing: 0.22em;
}

.section-heading h2,
.company-overview h2,
.arrival-copy h2,
.contact-card h2 {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.platform-card,
.service-card,
.membership-card,
.enterprise-list div,
.voyage-cards article {
  border-radius: 0;
  box-shadow: 0 20px 56px rgba(8, 23, 36, 0.08);
}

.arrival,
.contact {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: rgba(255, 248, 235, 0.9);
}

.arrival-video,
.contact-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.03);
}

.arrival::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: none;
  background:
    linear-gradient(90deg, rgba(2, 10, 18, 0.9), rgba(2, 10, 18, 0.45) 50%, rgba(2, 10, 18, 0.78)),
    linear-gradient(180deg, rgba(2, 10, 18, 0.28), rgba(2, 10, 18, 0.8));
  box-shadow: none;
}

.arrival::after,
.contact::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(216, 177, 118, 0.26));
  pointer-events: none;
}

.arrival-sky,
.arrival-lighthouse {
  display: none;
}

.arrival-copy,
.company-overview,
.contact-card,
.contact-aside {
  position: relative;
  z-index: 3;
}

.arrival-copy h2,
.company-overview h2,
.contact-card h2 {
  color: #f1d29b;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.arrival-copy p,
.company-overview p,
.contact-card p,
.contact-card li,
.contact-aside li {
  color: rgba(255, 248, 235, 0.82);
}

.company-overview,
.contact-card {
  border: 1px solid rgba(216, 177, 118, 0.24);
  border-radius: 0;
  background: rgba(4, 15, 25, 0.72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.company-facts strong,
.arrival-metrics strong {
  color: #f1d29b;
}

.company-facts span,
.arrival-metrics span {
  color: rgba(255, 248, 235, 0.7);
}

.contact-aside li {
  border-color: rgba(216, 177, 118, 0.22);
  background: rgba(4, 15, 25, 0.62);
}

.footer {
  background: #020d17;
  color: rgba(255, 248, 235, 0.74);
}

@keyframes beaconPulse {
  0%,
  100% {
    opacity: 0.54;
  }

  50% {
    opacity: 0.9;
  }
}

@media (max-width: 980px) {
  .topbar {
    min-height: 74px;
    padding: 0 22px;
    grid-template-columns: 1fr auto;
  }

  .brand-text strong {
    font-size: 22px;
  }

  .brand-text small {
    font-size: 9px;
  }

  .hero {
    height: auto;
    min-height: 760px;
    padding: 126px 26px 42px;
  }

  .hero h1 {
    font-size: clamp(34px, 8vw, 48px);
    letter-spacing: 0.05em;
  }

  .capital-strip {
    grid-template-columns: 1fr 1fr;
    gap: 22px 0;
  }

  .capital-strip span:nth-child(2) {
    border-right: 0;
  }

  .scroll-beacon {
    opacity: 0.24;
  }
}

/* Client refinement: quieter typography, exact reference-style icon row, no searchlight */
.scroll-beacon,
.beacon-source,
.beacon-ray,
.beacon-glow {
  display: none !important;
}

html {
  font-size: 13.5px;
}

body {
  font-size: 13.5px;
  line-height: 1.78;
}

.topbar {
  min-height: 84px;
  padding: 0 clamp(54px, 6vw, 92px);
  grid-template-columns: minmax(300px, 1fr) auto auto auto;
}

.brand-copy strong {
  color: #f1d29b;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.brand-copy small {
  color: rgba(240, 210, 155, 0.72);
  font-size: 10px;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(216, 177, 118, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(216, 177, 118, 0.14) 0 17%, transparent 18%),
    linear-gradient(90deg, transparent 49%, rgba(216, 177, 118, 0.55) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(216, 177, 118, 0.55) 50%, transparent 51%);
  box-shadow: none;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, transparent 0 10deg, rgba(216, 177, 118, 0.95) 10deg 18deg, transparent 18deg 72deg, rgba(216, 177, 118, 0.95) 72deg 80deg, transparent 80deg 100deg, rgba(216, 177, 118, 0.95) 100deg 108deg, transparent 108deg 162deg, rgba(216, 177, 118, 0.95) 162deg 170deg, transparent 170deg 190deg, rgba(216, 177, 118, 0.95) 190deg 198deg, transparent 198deg 252deg, rgba(216, 177, 118, 0.95) 252deg 260deg, transparent 260deg 280deg, rgba(216, 177, 118, 0.95) 280deg 288deg, transparent 288deg 342deg, rgba(216, 177, 118, 0.95) 342deg 350deg, transparent 350deg 360deg);
  clip-path: polygon(50% 0, 58% 39%, 100% 50%, 58% 61%, 50% 100%, 42% 61%, 0 50%, 42% 39%);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: var(--gold-ref);
  box-shadow: 0 0 14px rgba(216, 177, 118, 0.45);
}

.brand-mark span {
  display: none;
}

.nav-links {
  gap: clamp(22px, 2.9vw, 46px);
}

.nav-links a {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.nav-action {
  min-height: 40px;
  padding: 0 28px;
  font-size: 13px;
}

.language-switch button {
  font-size: 12px;
}

.hero {
  min-height: 700px;
  height: 88svh;
  padding: 142px clamp(64px, 6.7vw, 104px) 48px;
}

.hero-content {
  max-width: 620px;
}

.hero h1 {
  max-width: 590px;
  font-size: clamp(38px, 3.2vw, 54px);
  line-height: 1.36;
  letter-spacing: 0.075em;
}

.hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
}

.hero-subtitle {
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.95;
}

.primary-button {
  min-width: 188px;
  min-height: 44px;
  font-size: 13px;
}

.capital-strip {
  width: min(1120px, calc(100vw - 128px));
  max-width: 1120px;
  margin-top: 54px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capital-strip span {
  display: grid;
  grid-template-columns: 50px minmax(0, auto);
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
  min-height: 58px;
  padding: 0 28px 0 0;
  border-right: 1px solid rgba(216, 177, 118, 0.32);
  font-size: 0;
  line-height: 1.35;
}

.capital-strip span::before {
  display: none;
}

.strip-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  fill: none;
  stroke: rgba(216, 177, 118, 0.92);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capital-strip b {
  display: block;
  color: #e7c58f;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.capital-strip small {
  display: block;
  color: rgba(255, 248, 235, 0.68);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.section,
.voyage-intro,
.media-wall {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

.section-heading h2,
.membership-copy h2,
.events h2,
.enterprise h2,
.arrival-copy h2,
.company-overview h2,
.contact-card h2 {
  font-size: clamp(26px, 2.35vw, 38px);
  line-height: 1.34;
  letter-spacing: 0.035em;
}

.section-heading span,
.section-label {
  font-size: 11px;
  letter-spacing: 0.22em;
}

.section p,
.voyage-intro p,
.media-wall p,
.entry-copy,
.signal-list,
.topic-grid p,
.event-card p,
.enterprise-list p,
.arrival-copy p,
.company-overview p {
  font-size: 13.5px;
}

.voyage-cards article,
.platform-grid article,
.topic-grid article,
.service-card,
.membership-grid article,
.enterprise-list div,
.event-card {
  border-radius: 0;
  padding: 28px;
}

.membership-grid article,
.membership-grid .featured {
  background: rgba(255, 252, 245, 0.78);
  border: 1px solid rgba(18, 29, 39, 0.12);
  color: var(--paper-ink);
  transform: none;
  box-shadow: 0 20px 56px rgba(8, 23, 36, 0.08);
}

.membership-grid article::before,
.membership-grid .featured::before {
  opacity: 0;
}

.membership-grid article span,
.membership-grid .featured span {
  color: #17202a;
}

.membership-grid article strong,
.membership-grid .featured strong {
  color: #d8b176;
  font-size: clamp(24px, 2vw, 34px);
}

.membership-grid article p,
.membership-grid .featured p {
  color: rgba(23, 32, 42, 0.72);
}

.arrival {
  min-height: 620px;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.9fr);
  gap: clamp(34px, 5vw, 80px);
  padding: clamp(76px, 7vw, 108px) clamp(44px, 6vw, 92px);
}

.arrival-video {
  filter: saturate(0.98) contrast(1.02);
}

.arrival::before {
  background:
    linear-gradient(90deg, rgba(2, 10, 18, 0.76), rgba(2, 10, 18, 0.28) 50%, rgba(2, 10, 18, 0.54)),
    linear-gradient(180deg, rgba(2, 10, 18, 0.12), rgba(2, 10, 18, 0.58));
}

.arrival::after {
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(216, 177, 118, 0.18));
}

.arrival-copy {
  max-width: 520px;
}

.arrival-copy p,
.company-overview p {
  color: rgba(255, 248, 235, 0.78);
  font-size: 13px;
}

.arrival-metrics {
  gap: 12px;
}

.arrival-metrics div {
  padding: 16px;
  background: rgba(4, 15, 25, 0.36);
}

.arrival-metrics strong {
  font-size: 24px;
}

.arrival-metrics span {
  font-size: 11px;
}

.company-overview {
  max-width: 620px;
  padding: 26px;
  background: rgba(4, 15, 25, 0.46);
  border-color: rgba(216, 177, 118, 0.2);
  backdrop-filter: blur(8px);
}

.company-facts {
  gap: 12px;
  margin-top: 20px;
}

.company-facts div {
  padding: 14px;
  background: rgba(255, 248, 235, 0.06);
}

.company-facts strong {
  font-size: 12px;
}

.company-facts span {
  font-size: 11.5px;
}

.contact-actions {
  margin-top: 18px;
  gap: 10px;
}

.contact-actions a,
.contact-actions span {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(216, 177, 118, 0.22);
  background: rgba(4, 15, 25, 0.36);
  color: rgba(255, 248, 235, 0.82);
  font-size: 11.5px;
}

.footer {
  padding: 22px clamp(32px, 6vw, 92px);
  font-size: 11px;
}

@media (max-width: 980px) {
  html {
    font-size: 13px;
  }

  .topbar {
    padding: 0 20px;
    grid-template-columns: 1fr auto;
  }

  .brand-copy strong {
    font-size: 20px;
  }

  .brand-copy small {
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .hero {
    min-height: 720px;
    padding: 118px 22px 42px;
  }

  .hero h1 {
    font-size: clamp(31px, 8vw, 42px);
  }

  .capital-strip {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .capital-strip span {
    border-right: 0;
    border-bottom: 1px solid rgba(216, 177, 118, 0.22);
    padding-bottom: 14px;
  }

  .capital-strip b,
  .capital-strip small {
    white-space: normal;
  }

  .arrival {
    grid-template-columns: 1fr;
    padding: 72px 22px;
  }
}

/* Final polish for the AI bridge, media cards, and interactive surfaces. */
.ai-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.ai-section .section-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.ai-section .section-heading h2 {
  font-size: clamp(24px, 2.1vw, 34px);
}

.ai-command {
  max-width: 1040px;
  margin: 0 auto;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, .88fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
}

.ai-orb {
  min-height: 330px;
  max-height: 360px;
}

.ai-orb span {
  inset: 18%;
}

.ai-orb i {
  width: 200px;
  height: 200px;
}

.ai-services .featured-ai {
  min-height: 190px;
  padding: 26px 30px;
}

.ai-services h3 {
  color: #fff;
  font-size: 18px;
}

.ai-services p {
  color: rgba(255,255,255,.76);
  font-size: 13px;
}

.media-tile::after {
  background:
    linear-gradient(180deg, rgba(2,5,10,.08), rgba(2,5,10,.42) 42%, rgba(2,5,10,.86)),
    radial-gradient(circle at 50% 8%, rgba(212,176,112,.28), transparent 40%);
}

.media-tile span {
  color: rgba(255,255,255,.92);
  text-shadow: 0 5px 18px rgba(0,0,0,.58);
}

.media-tile h2 {
  color: #fff;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.18;
  text-shadow: 0 8px 30px rgba(0,0,0,.68);
}

.nav-action,
.primary-button,
.secondary-button,
.contact-actions a,
.contact-actions span,
.platform-grid article,
.topic-grid article,
.membership-grid article,
.channel-grid article,
.voyage-cards article,
.enterprise-list div,
.event-card,
.media-tile,
.glass-map,
.ai-orb,
.ai-services article,
.company-overview,
.arrival-metrics div,
.about-media,
.insight-card,
.consult-card,
.case-panel {
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, background 260ms ease, filter 260ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .nav-action:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .contact-actions a:hover,
  .contact-actions span:hover,
  .platform-grid article:hover,
  .topic-grid article:hover,
  .membership-grid article:hover,
  .channel-grid article:hover,
  .voyage-cards article:hover,
  .enterprise-list div:hover,
  .event-card:hover,
  .media-tile:hover,
  .glass-map:hover,
  .ai-orb:hover,
  .ai-services article:hover,
  .company-overview:hover,
  .arrival-metrics div:hover,
  .about-media:hover,
  .insight-card:hover,
  .consult-card:hover,
  .case-panel:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 24px 64px rgba(8,23,36,.14);
  }

  .nav-action:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .contact-actions a:hover {
    transform: translateY(-1px) scale(1.025);
  }

  .media-tile:hover {
    transform: translateY(-4px) scale(1.012);
  }
}

@media (max-width: 820px) {
  .ai-command {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .ai-orb {
    min-height: 260px;
  }
}