:root {
  --ink: #f3ead7;
  --cream-rgb: 243, 234, 215;
  --muted: #b8ad9c;
  --night: #07091a;
  --night-soft: #0c1029;
  --panel: #171129;
  --panel-soft: #251936;
  --cyan: #42d9ff;
  --cyan-deep: #00a8d2;
  --pink: #ff3f73;
  --orange: #ff932f;
  --yellow: #ffd648;
  --purple: #7d55dc;
  --green: #28d17c;
  --line: rgba(255, 255, 255, .11);
  --font-display: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: Inter, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 2000;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  border-radius: .75rem;
  color: #06111b;
  background: var(--cyan);
  font-weight: 800;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.navbar {
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(7, 9, 26, .82);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.navbar-brand {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.navbar-brand:hover,
.navbar-brand:focus { color: var(--ink); }
.brand-logo {
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(48, 172, 255, .24);
}
.navbar .nav-link {
  color: rgba(var(--cream-rgb), .68);
  font-size: .84rem;
  font-weight: 700;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--ink); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(66, 217, 255, .25); }

.btn {
  border-radius: 999px;
  padding: .78rem 1.25rem;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .02em;
}
.btn-sm { padding: .56rem 1rem; }
.btn-studio {
  border: 1px solid rgba(255, 255, 255, .22);
  color: #160b17;
  background: linear-gradient(135deg, #ffd147, #ff8b31 62%, #ff4e62);
  box-shadow: 0 10px 30px rgba(255, 122, 46, .2);
}
.btn-studio:hover,
.btn-studio:focus {
  border-color: rgba(255, 255, 255, .4);
  color: #160b17;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(255, 122, 46, .3);
}
.btn-outline-light { color: var(--ink); border-color: rgba(var(--cream-rgb), .28); }

.language-floater {
  position: fixed;
  z-index: 1100;
  right: max(1rem, calc((100vw - 1320px) / 2));
  top: 82px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(25, 17, 42, .88);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
}
.language-floater a {
  padding: .4rem .62rem;
  color: rgba(var(--cream-rgb), .55);
  text-decoration: none;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.language-floater a[aria-current="page"] { color: #071220; background: var(--cyan); }

.eyebrow {
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section { padding: 7rem 0; }
.section-title,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
}
.section-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.1rem, 4.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr);
  align-items: end;
  gap: 4rem;
}
.section-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

footer {
  padding: 1.65rem 0;
  border-top: 1px solid var(--line);
  color: rgba(var(--cream-rgb), .50);
  background: #060717;
  font-size: .78rem;
}
footer a { color: rgba(var(--cream-rgb), .76); text-decoration: none; }
footer a:hover { color: var(--cyan); }
footer i { padding: 0 .5rem; font-style: normal; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding: 1rem 0 1.25rem; }
  .section { padding: 5.5rem 0; }
  .section-heading { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (max-width: 575.98px) {
  .language-floater { right: .75rem; top: 76px; }
  .section { padding: 4.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}