:root {
  --bg: #090b0d;
  --bg-surface: #12161a;
  --bg-glass: rgba(10, 12, 15, 0.9);
  --border: rgba(255, 255, 255, 0.105);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text-primary: #f2f4f5;
  --text-secondary: #c3c9ce;
  --text-muted: #858e97;
  --accent-1: #55c8ff;
  --accent-2: #87aebd;
  --accent-3: #a6bec7;
  --page-gutter: clamp(24px, 2.8vw, 112px);
  --content-design-ratio: 16 / 9;
}

body:not(.light-mode) {
  background: #090b0d;
  color: var(--text-primary);
}

body:not(.light-mode) .ambient-bg {
  background-color: #05090d;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(44, 133, 176, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 84% 22%, rgba(83, 113, 127, 0.055) 0%, transparent 34%);
}

body:not(.light-mode) .grid-overlay {
  opacity: 0.42;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
}

/* Keep the composition fluid: available width on ordinary screens, 16:9 by viewport height on ultrawide screens. */
.container {
  width: 100%;
  max-width: calc(100svh * var(--content-design-ratio));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* The navigation owns an opaque top band so the hero artwork never leaks above it. */
.navbar {
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  padding: clamp(10px, 0.55vw, 18px) var(--page-gutter);
  transform: none;
  background: #090b0d;
}

.navbar-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: clamp(12px, 0.55vw, 20px) clamp(16px, 0.85vw, 32px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand {
  gap: clamp(12px, 0.7vw, 20px);
}

.brand-text h1 {
  font-size: clamp(16px, 0.65vw, 24px);
}

.brand-text p {
  font-size: clamp(11px, 0.42vw, 15px);
}

.nav-links {
  gap: clamp(4px, 0.22vw, 9px);
}

.nav-link {
  padding: clamp(8px, 0.42vw, 14px) clamp(16px, 0.75vw, 28px);
  font-size: clamp(14px, 0.52vw, 20px);
}

.lang-switch {
  height: clamp(36px, 1.55vw, 54px);
  padding-right: clamp(34px, 1.45vw, 50px);
  padding-left: clamp(14px, 0.68vw, 24px);
  font-size: clamp(13px, 0.48vw, 18px);
  background-position:
    calc(100% - clamp(16px, 0.7vw, 24px)) 50%,
    calc(100% - clamp(11px, 0.52vw, 18px)) 50%;
}

.theme-toggle {
  width: clamp(36px, 1.55vw, 54px);
  height: clamp(36px, 1.55vw, 54px);
}

.theme-toggle svg {
  width: clamp(16px, 0.68vw, 24px);
  height: clamp(16px, 0.68vw, 24px);
}

body:not(.light-mode) .navbar-inner {
  background: #090b0d;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.025);
}

body.light-mode .navbar,
body.light-mode .navbar-inner {
  background: #f2f4f5;
}

body:not(.light-mode) .brand,
body:not(.light-mode) .hero-title,
body:not(.light-mode) .section-title,
body:not(.light-mode) .card-title,
body:not(.light-mode) .case-title {
  color: #f4f5f6;
}

body:not(.light-mode) .hero-title [data-i18n="hero_title"] {
  color: #f4f5f6 !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}

body:not(.light-mode) .hero-glow {
  display: none;
}

body.light-mode .hero-glow { display: none; }

body:not(.light-mode) .ghost-btn {
  color: #d7dce0;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(7, 9, 11, 0.32);
}

body:not(.light-mode) .ghost-btn:hover {
  border-color: rgba(85, 200, 255, 0.7);
  background: rgba(85, 200, 255, 0.08);
}

/* Give the brand room to lead, then let the product and collaboration follow quietly. */
.hero {
  min-height: clamp(620px, min(64svh, 44vw), 1120px) !important;
  padding: clamp(124px, 7vw, 210px) 0 clamp(68px, 4.2vw, 136px) !important;
  justify-content: center;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -2;
}

body:not(.light-mode) .hero::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(33, 112, 151, 0.2) 0%, rgba(14, 39, 54, 0.12) 30%, transparent 62%),
    linear-gradient(180deg, #05090d 0%, #071018 54%, #080d12 100%);
  border-bottom: 1px solid rgba(103, 186, 221, 0.08);
  box-shadow: inset 0 -90px 120px rgba(0, 0, 0, 0.22);
}

body.light-mode .hero::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(83, 143, 170, 0.12) 0%, transparent 58%),
    linear-gradient(180deg, #e2e8eb 0%, #e8ebeb 100%);
  border-bottom: 1px solid rgba(28, 53, 66, 0.08);
}

.brand-logo {
  width: clamp(40px, 1.5vw, 60px);
  height: clamp(40px, 1.5vw, 60px);
  padding: 0;
  border-radius: clamp(11px, 0.48vw, 17px);
  background: transparent;
  box-shadow: 0 8px 22px rgba(20, 70, 120, 0.28);
}

.hero .hero-title {
  font-size: clamp(140px, 7.2vw, 228px) !important;
  line-height: 0.96;
  margin-bottom: 12px !important;
}

.hero > div.reveal:not(.hero-actions) {
  margin-bottom: clamp(26px, 1.15vw, 42px) !important;
  font-size: clamp(16px, 0.68vw, 24px) !important;
}

.hero > p.reveal {
  max-width: clamp(660px, 31vw, 980px) !important;
  font-size: clamp(17px, 0.68vw, 24px) !important;
  line-height: 1.8 !important;
}

.hero .hero-actions {
  margin-top: clamp(36px, 1.7vw, 60px) !important;
}

.hero .hero-actions .ghost-btn {
  min-width: clamp(136px, 6vw, 210px);
  min-height: clamp(44px, 1.9vw, 66px);
  padding-inline: clamp(32px, 1.5vw, 52px);
  font-size: clamp(13px, 0.48vw, 18px);
}

#about {
  padding: clamp(34px, 2.4vw, 82px) 0 clamp(18px, 1.4vw, 46px);
}

#about .section-header {
  max-width: clamp(760px, 42vw, 1320px);
  margin-bottom: 0;
}

#about .section-label {
  margin-bottom: clamp(9px, 0.45vw, 16px);
  font-size: clamp(14px, 0.5vw, 18px);
}

#about .section-title {
  font-size: clamp(26px, 1.45vw, 52px);
  font-weight: 600;
  line-height: 1.2;
}

#about .section-link {
  color: var(--text-secondary);
}

#collaboration {
  padding: clamp(12px, 0.8vw, 28px) 0 clamp(28px, 2vw, 66px);
}

#collaboration .collab-stage {
  grid-template-columns: 1fr;
  min-height: 0;
  gap: 0;
  padding: clamp(20px, 1.2vw, 42px) 0 clamp(34px, 2vw, 66px);
  border-right: 0;
  border-left: 0;
  overflow: visible;
}

#collaboration .collab-stage::after {
  display: none;
}

#collaboration .collab-copy {
  display: grid;
  grid-template-columns: minmax(clamp(280px, 17vw, 560px), 0.78fr) minmax(clamp(360px, 24vw, 820px), 1.22fr);
  grid-template-areas:
    "label description"
    "title description"
    "title actions";
  column-gap: clamp(46px, 7vw, 96px);
  align-items: start;
  padding-left: clamp(20px, 1.1vw, 38px);
  border-left: 1px solid rgba(85, 200, 255, 0.34);
}

#collaboration .collab-copy > .section-label { grid-area: label; }

#collaboration .collab-copy .section-title {
  grid-area: title;
  max-width: clamp(420px, 24vw, 760px);
  margin-top: clamp(12px, 0.55vw, 20px);
  font-size: clamp(26px, 1.35vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

#collaboration .collab-description {
  grid-area: description;
  max-width: clamp(680px, 34vw, 1080px);
  margin-top: 0;
  font-size: clamp(13px, 0.54vw, 19px);
  line-height: 1.7;
}

#collaboration .collab-actions {
  grid-area: actions;
  margin-top: clamp(18px, 0.85vw, 30px);
  gap: clamp(14px, 0.65vw, 24px);
}

#collaboration .collab-enter {
  min-height: clamp(38px, 1.7vw, 58px);
  padding: 0;
  gap: 14px;
  color: #dbe9ef;
  font-size: clamp(12px, 0.48vw, 17px);
  letter-spacing: 0.08em;
  background: transparent;
  border: 0;
  border-radius: var(--collab-radius-control);
  box-shadow: none;
}

#collaboration .collab-enter:hover {
  color: #ffffff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

#collaboration .collab-enter span {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(132, 178, 197, 0.46);
  transition: border-color 0.2s ease, color 0.2s ease;
}

#collaboration .collab-enter svg {
  width: clamp(34px, 1.5vw, 52px);
  height: clamp(34px, 1.5vw, 52px);
  padding: clamp(9px, 0.4vw, 14px);
  border: 1px solid rgba(85, 200, 255, 0.34);
  border-radius: 50%;
  background: rgba(85, 200, 255, 0.08);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

#collaboration .collab-enter:hover span {
  border-color: rgba(85, 200, 255, 0.9);
}

#collaboration .collab-enter:hover svg {
  transform: translateX(3px);
  background: rgba(85, 200, 255, 0.16);
  border-color: rgba(85, 200, 255, 0.72);
}

#collaboration .collab-enter:focus-visible {
  outline: 2px solid rgba(85, 200, 255, 0.7);
  outline-offset: 6px;
}

#collaboration .collab-status {
  font-size: clamp(11px, 0.42vw, 15px);
}

#collaboration .collab-canvas-preview {
  width: 100%;
  min-height: clamp(340px, 18vw, 680px);
  transform: none;
}

#collaboration .collab-preview-mark {
  display: inline-flex;
  width: auto;
  min-width: clamp(26px, 1.2vw, 42px);
  padding: 0 clamp(11px, 0.58vw, 20px);
  white-space: nowrap;
  font-size: clamp(11px, 0.5vw, 19px);
  letter-spacing: 0.04em;
}

#collaboration .collab-flow {
  display: none;
}

body:not(.light-mode) .magic-card,
body:not(.light-mode) .case-card,
body:not(.light-mode) .download-item,
body:not(.light-mode) .subpage-panel {
  background: #111519;
  border-color: rgba(255, 255, 255, 0.105);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.22);
}

body:not(.light-mode) .collab-stage {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  box-shadow: none;
}

body:not(.light-mode) .collab-canvas-preview {
  border-color: rgba(255, 255, 255, 0.13);
  background: #0c1013;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body:not(.light-mode) .collab-preview-board {
  background-color: #0c1013;
}

body:not(.light-mode) .collab-preview-node {
  background: rgba(18, 23, 28, 0.98);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
}

body:not(.light-mode) .collab-flow,
body:not(.light-mode) .collab-flow li {
  border-color: rgba(255, 255, 255, 0.105);
}

body:not(.light-mode) footer {
  color: #7f8992;
  border-color: rgba(255, 255, 255, 0.1);
}

body.light-mode #collaboration .collab-stage {
  background: transparent;
  box-shadow: none;
}

#projects {
  padding-top: 28px;
}

@media (max-width: 1100px) {
  #collaboration .collab-stage {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  #collaboration .collab-copy {
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    column-gap: 42px;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 470px !important;
    padding: 112px 0 56px !important;
  }

  .hero .hero-title {
    font-size: clamp(82px, 17vw, 108px) !important;
  }

  #collaboration .collab-stage {
    min-height: 0;
    padding: 34px 0 38px;
  }

  #collaboration .collab-copy {
    display: block;
    max-width: 680px;
  }

  #collaboration .collab-description {
    margin-top: 16px;
  }

  #collaboration .collab-actions {
    margin-top: 22px;
  }
}

@media (max-width: 640px) {
  .navbar {
    padding: 10px 12px;
  }

  .hero {
    min-height: 420px !important;
    padding: 100px 0 48px !important;
  }

  .hero .hero-title {
    font-size: clamp(68px, 21vw, 84px) !important;
  }

  .hero > div.reveal:not(.hero-actions) {
    margin-bottom: 20px !important;
  }

  .hero > p.reveal {
    display: none;
  }

  .hero .hero-actions {
    margin-top: 24px !important;
  }

  #about {
    padding: 28px 0 14px;
  }

  #about .section-title {
    font-size: 23px;
  }

  #collaboration {
    padding: 16px 0 32px;
  }

  #collaboration .collab-stage {
    gap: 0;
    padding: 18px 0 32px;
  }

  #collaboration .collab-copy {
    padding-left: 16px;
  }

  #collaboration .collab-copy .section-title {
    font-size: 23px;
  }

  #collaboration .collab-actions {
    align-items: flex-start;
    margin-top: 20px;
  }

  #collaboration .collab-canvas-preview {
    min-height: 270px;
  }

  #collaboration .collab-preview-mark {
    padding: 0 9px;
    font-size: 10px;
  }

  #collaboration .collab-preview-project {
    display: none;
  }

  #projects {
    padding-top: 32px;
  }
}