:root {
  color-scheme: light;
  --paper: #f4f1eb;
  --paper-deep: #ebe7df;
  --ink: #17131d;
  --ink-soft: #615b68;
  --line: rgb(23 19 29 / 0.16);
  --violet: #7657ff;
  --violet-dark: #4e31d8;
  --violet-soft: #dcd3ff;
  --lime: #d9ff6b;
  --header-surface: rgb(244 241 235 / 0.84);
  --header-line: rgb(23 19 29 / 0.08);
  --header-pill: rgb(255 255 255 / 0.6);
  --card-hover: #17131d;
  --principles-bg: #17131d;
  --principles-ink: #ffffff;
  --contact-bg: #7657ff;
  --contact-orb: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.34), transparent 22%), radial-gradient(circle at 50% 60%, #9278ff, #4e31d8 72%);
  --portfolio-bg: #f7f3ed;
  --portfolio-space: #eeeaf4;
  --telegram-surface: #dceeff;
  --telegram-ink: #12334e;
  --telegram-accent: #2488d8;
  --web-surface: #ffe1d3;
  --web-accent: #de7955;
  --other-surface: #e8e2ef;
  --other-accent: #776a8d;
  --bot-surface: rgb(255 255 255 / 0.78);
  --bot-line: rgb(18 51 78 / 0.12);
  --scrub-progress: 0%;
  --page-gutter: clamp(20px, 4vw, 68px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="night"] {
  color-scheme: dark;
  --paper: #0d0b13;
  --paper-deep: #14101d;
  --ink: #f5f1fa;
  --ink-soft: #aaa1b4;
  --line: rgb(240 232 255 / 0.14);
  --violet: #9473ff;
  --violet-dark: #b8a3ff;
  --violet-soft: #d4c8ff;
  --lime: #cfff68;
  --header-surface: rgb(13 11 19 / 0.86);
  --header-line: rgb(240 232 255 / 0.1);
  --header-pill: rgb(38 30 52 / 0.72);
  --card-hover: #251b36;
  --principles-bg: #07060b;
  --principles-ink: #f8f5ff;
  --contact-bg:
    radial-gradient(circle at 50% 42%, rgb(123 87 255 / 0.32), transparent 34%),
    radial-gradient(circle at 18% 82%, rgb(79 39 153 / 0.28), transparent 31%),
    linear-gradient(145deg, #0c0914, #1a102b 52%, #100b1b);
  --contact-orb:
    radial-gradient(circle at 34% 27%, rgb(255 255 255 / 0.28), transparent 18%),
    radial-gradient(circle at 50% 62%, #7657d9, #2c1c55 70%);
  --portfolio-bg: #0a0910;
  --portfolio-space: #12101b;
  --telegram-surface: #102a3f;
  --telegram-ink: #e6f5ff;
  --telegram-accent: #68b7f5;
  --web-surface: #3a211e;
  --web-accent: #ffad8d;
  --other-surface: #24202d;
  --other-accent: #c2b5d6;
  --bot-surface: rgb(8 22 34 / 0.76);
  --bot-line: rgb(192 229 255 / 0.13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 720ms ease, color 720ms ease;
}

body::selection {
  background: var(--violet);
  color: white;
}

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

button {
  color: inherit;
  font: inherit;
}

img,
video,
svg {
  display: block;
}

p,
h1,
h2,
h3,
blockquote {
  margin-top: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  padding: 18px var(--page-gutter);
  color: white;
  transition:
    min-height 360ms var(--ease-out),
    padding 360ms var(--ease-out),
    color 360ms ease,
    background 360ms ease,
    border-color 360ms ease;
}

.site-header.is-below-hero {
  min-height: 70px;
  padding-block: 10px;
  border-bottom: 1px solid var(--header-line);
  background: var(--header-surface);
  color: var(--ink);
  backdrop-filter: blur(18px) saturate(1.35);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
}

.brand__mark {
  font-family: "Unbounded", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.08em;
}

.brand__meta {
  color: rgb(255 255 255 / 0.68);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 360ms ease;
}

.site-header.is-below-hero .brand__meta {
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  font-size: 13px;
  font-weight: 700;
}

.site-nav a {
  position: relative;
  padding-block: 8px;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transition: right 240ms var(--ease-out);
}

.site-nav a:hover::after {
  right: 0;
}

.telegram-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.telegram-link--header {
  justify-self: end;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 999px;
  padding: 10px 12px 10px 16px;
  background: rgb(15 12 18 / 0.12);
  backdrop-filter: blur(12px);
  transition:
    transform 220ms var(--ease-out),
    color 360ms ease,
    border-color 360ms ease,
    background 360ms ease;
}

.site-header.is-below-hero .telegram-link--header {
  border-color: var(--line);
  background: var(--header-pill);
}

.telegram-link--header:hover {
  transform: translateY(-2px);
}

.telegram-link svg,
.text-link svg,
.contact__link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: white;
  background: #25333d;
  cursor: crosshair;
}

.hero__media,
.hero__video,
.hero__wash,
.hero__grain {
  position: absolute;
  inset: 0;
}

.hero__media {
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, #6f7597, transparent 48%),
    #1c2b31;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: saturate(0.94) contrast(1.04);
  transform: scale(1.012);
  transition: opacity 920ms var(--ease-out), filter 920ms ease;
  user-select: none;
  pointer-events: none;
}

.hero__video.is-active {
  opacity: 1;
}

.hero__video--night {
  filter: saturate(1.08) contrast(1.05) brightness(0.88);
}

.hero__wash {
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(10 8 14 / 0.45) 0%, transparent 25%, transparent 55%, rgb(10 7 14 / 0.68) 100%),
    radial-gradient(circle at 50% 20%, rgb(126 87 255 / 0.14), transparent 31%),
    linear-gradient(90deg, rgb(10 8 14 / 0.2), transparent 42%, rgb(10 8 14 / 0.08));
  pointer-events: none;
}

body[data-theme="night"] .hero__wash {
  background:
    linear-gradient(180deg, rgb(4 5 14 / 0.48) 0%, transparent 28%, transparent 50%, rgb(4 4 12 / 0.74) 100%),
    radial-gradient(circle at 50% 22%, rgb(133 99 255 / 0.22), transparent 34%),
    linear-gradient(90deg, rgb(5 4 12 / 0.26), transparent 45%, rgb(5 4 12 / 0.12));
}

.hero__grain {
  z-index: 3;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.scene-control {
  position: absolute;
  top: clamp(130px, 27vh, 270px);
  left: 50%;
  z-index: 10;
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateX(-50%);
}

.theme-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 26px 84px 26px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 999px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 24% 18%, rgb(255 255 255 / 0.88), transparent 22%),
    linear-gradient(135deg, rgb(255 203 63 / 0.94), rgb(255 159 40 / 0.88));
  box-shadow:
    0 20px 62px rgb(15 9 20 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.56);
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition:
    transform 240ms var(--ease-out),
    background 620ms ease,
    box-shadow 620ms ease,
    border-color 620ms ease;
}

.theme-toggle:hover {
  transform: translateY(-3px) scale(1.015);
}

.theme-toggle:focus-visible {
  outline: 3px solid white;
  outline-offset: 5px;
}

body[data-theme="night"] .theme-toggle {
  border-color: rgb(255 255 255 / 0.22);
  background:
    radial-gradient(circle at 78% 20%, rgb(163 132 255 / 0.42), transparent 28%),
    linear-gradient(135deg, rgb(26 21 58 / 0.94), rgb(74 49 151 / 0.82));
  box-shadow:
    0 24px 72px rgb(5 4 18 / 0.56),
    0 0 46px rgb(118 87 255 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.theme-toggle__track {
  position: relative;
  height: 36px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd759, #ff9e2e);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.36),
    inset 0 -8px 18px rgb(170 85 11 / 0.22);
  transition: background 620ms ease, box-shadow 620ms ease;
}

body[data-theme="night"] .theme-toggle__track {
  background:
    radial-gradient(circle at 70% 50%, rgb(212 199 255 / 0.28), transparent 16%),
    linear-gradient(90deg, #11182f, #47327f);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 -10px 18px rgb(0 0 0 / 0.28);
}

.theme-toggle__glow {
  position: absolute;
  top: 8px;
  left: 13px;
  width: 24px;
  height: 12px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  filter: blur(6px);
  transition: transform 620ms var(--ease-out), opacity 620ms ease;
}

body[data-theme="night"] .theme-toggle__glow {
  opacity: 0.24;
  transform: translateX(40px);
}

.theme-toggle__knob {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, white, transparent 27%),
    #ffe683;
  box-shadow:
    0 7px 18px rgb(63 35 3 / 0.28),
    0 0 18px rgb(255 222 90 / 0.58);
  transition:
    transform 620ms cubic-bezier(0.2, 1.45, 0.25, 1),
    background 620ms ease,
    box-shadow 620ms ease;
}

body[data-theme="night"] .theme-toggle__knob {
  transform: translateX(46px);
  background:
    radial-gradient(circle at 34% 28%, white, transparent 24%),
    linear-gradient(145deg, #f9f7ff, #aaa4c4);
  box-shadow:
    0 8px 20px rgb(0 0 0 / 0.34),
    0 0 20px rgb(171 146 255 / 0.38);
}

.theme-toggle__stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms ease 120ms;
}

body[data-theme="night"] .theme-toggle__stars {
  opacity: 1;
}

.theme-toggle__stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 0 8px white;
  animation: starPulse 2.4s ease-in-out infinite;
}

.theme-toggle__stars i:nth-child(1) { left: 14px; top: 10px; }
.theme-toggle__stars i:nth-child(2) { left: 34px; top: 25px; animation-delay: 0.7s; }
.theme-toggle__stars i:nth-child(3) { left: 56px; top: 9px; animation-delay: 1.1s; }
.theme-toggle__stars i:nth-child(4) { left: 70px; top: 24px; animation-delay: 1.55s; }

.theme-toggle__icon {
  position: relative;
  width: 22px;
  height: 22px;
  margin: auto;
  transition: opacity 480ms ease, transform 480ms var(--ease-out);
}

.theme-toggle__icon--sun {
  border-radius: 50%;
  background: #ffcf35;
  box-shadow: 0 0 0 5px rgb(255 213 71 / 0.18), 0 0 22px rgb(255 220 82 / 0.44);
}

.theme-toggle__icon--moon::before {
  content: "";
  position: absolute;
  inset: 2px 3px 2px 1px;
  border-radius: 50%;
  background: white;
  box-shadow: inset -7px 0 0 #b89f61;
}

body:not([data-theme="night"]) .theme-toggle__icon--moon {
  opacity: 0.55;
}

body[data-theme="night"] .theme-toggle__icon--sun {
  opacity: 0.45;
  transform: scale(0.84);
}

body[data-theme="night"] .theme-toggle__icon--moon::before {
  box-shadow: inset -7px 0 0 #48357d;
}

.scene-control__label {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: rgb(255 255 255 / 0.68);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.38);
}

.scene-control__label span:first-child {
  color: white;
}

.scene-control__label span:first-child::after {
  content: "/";
  margin-left: 9px;
  color: rgb(255 255 255 / 0.4);
}

.hero__content {
  position: absolute;
  left: var(--page-gutter);
  bottom: clamp(72px, 9vh, 116px);
  z-index: 5;
  width: min(760px, calc(100% - var(--page-gutter) * 2));
}

.hero__eyebrow,
.section-kicker {
  margin-bottom: 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__eyebrow {
  color: rgb(255 255 255 / 0.7);
}

.hero h1 {
  max-width: 750px;
  margin-bottom: 18px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(43px, 5.5vw, 88px);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.065em;
  text-wrap: balance;
  text-shadow: 0 10px 44px rgb(5 4 9 / 0.3);
}

.hero__lead {
  margin-bottom: 0;
  color: rgb(255 255 255 / 0.76);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
}

.scrub-hint {
  position: absolute;
  right: var(--page-gutter);
  bottom: clamp(78px, 9vh, 116px);
  z-index: 5;
  width: min(270px, 25vw);
  color: rgb(255 255 255 / 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.scrub-hint__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: white;
}

.scrub-hint__topline strong {
  font-family: "Unbounded", sans-serif;
  font-size: 11px;
}

.scrub-hint__rail {
  position: relative;
  height: 1px;
  margin-bottom: 10px;
  background: rgb(255 255 255 / 0.32);
}

.scrub-hint__rail i {
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--scrub-progress);
  height: 3px;
  background: var(--lime);
  box-shadow: 0 0 14px rgb(217 255 107 / 0.5);
}

.scrub-hint__rail i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  transform: translateY(-50%);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgb(255 255 255 / 0.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scrollBounce 2s ease-in-out infinite;
}

.section-shell {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.intro,
.services {
  display: grid;
  grid-template-columns: minmax(118px, 0.22fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 110px);
}

.intro {
  padding-block: clamp(110px, 14vw, 210px);
  background:
    radial-gradient(circle at 81% 18%, rgb(118 87 255 / 0.12), transparent 24%),
    var(--paper);
}

body[data-theme="night"] .intro {
  background:
    radial-gradient(circle at 81% 18%, rgb(148 115 255 / 0.2), transparent 27%),
    radial-gradient(circle at 16% 84%, rgb(91 48 168 / 0.12), transparent 30%),
    var(--paper);
}

.section-index {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-index span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
}

.section-index p {
  margin: 9px 0 0;
}

.section-kicker {
  color: var(--violet-dark);
}

.intro h2,
.section-heading h2,
.contact h2 {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  letter-spacing: -0.065em;
}

.intro h2 {
  max-width: 1110px;
  margin-bottom: clamp(48px, 7vw, 90px);
  font-size: clamp(42px, 6.5vw, 104px);
  line-height: 1.02;
}

.intro h2 em {
  color: var(--violet);
  font-style: normal;
}

.intro__footer {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.intro__footer > p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.65;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}

.text-link:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.services {
  padding-block: clamp(100px, 12vw, 180px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(135deg, transparent 0 68%, rgb(118 87 255 / 0.06) 68% 100%),
    var(--paper-deep);
}

body[data-theme="night"] .services {
  background:
    radial-gradient(circle at 12% 14%, rgb(122 82 226 / 0.1), transparent 27%),
    linear-gradient(135deg, transparent 0 68%, rgb(148 115 255 / 0.08) 68% 100%),
    var(--paper-deep);
}

.services__content {
  min-width: 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(50px, 7vw, 92px);
}

.section-heading .section-kicker {
  margin-bottom: 8px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(42px, 5.8vw, 88px);
  line-height: 1.02;
  text-align: right;
}

.service-list {
  border-top: 1px solid var(--line);
}

.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 54px);
  align-items: center;
  min-height: 220px;
  padding: 34px clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition:
    color 440ms var(--ease-out),
    padding 440ms var(--ease-out),
    border-color 720ms ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-hover);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 440ms var(--ease-out), background-color 720ms ease;
}

.service-card--violet::before {
  background: var(--violet);
}

.service-card:hover {
  color: white;
  padding-inline: clamp(28px, 4vw, 60px);
}

.service-card:hover::before {
  transform: scaleY(1);
}

.service-card__number,
.service-card__tag {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 320ms ease;
}

.service-card:hover .service-card__number,
.service-card:hover .service-card__tag {
  color: rgb(255 255 255 / 0.64);
}

.service-card h3 {
  margin-bottom: 12px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.service-card p {
  max-width: 670px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  transition: color 320ms ease;
}

.service-card:hover p {
  color: rgb(255 255 255 / 0.72);
}

.service-card__tag {
  text-align: right;
  white-space: nowrap;
}

.portfolio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 74% 11%, rgb(118 87 255 / 0.13), transparent 23%),
    radial-gradient(circle at 8% 72%, rgb(36 136 216 / 0.09), transparent 26%),
    linear-gradient(180deg, var(--portfolio-bg), var(--portfolio-space));
  transition: background 720ms ease, border-color 720ms ease;
}

body[data-theme="night"] .portfolio {
  background:
    radial-gradient(circle at 76% 12%, rgb(129 93 255 / 0.2), transparent 24%),
    radial-gradient(circle at 10% 70%, rgb(41 138 205 / 0.12), transparent 26%),
    linear-gradient(180deg, var(--portfolio-bg), var(--portfolio-space));
}

.portfolio__stars,
.portfolio__stars::before,
.portfolio__stars::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portfolio__stars {
  z-index: -1;
  opacity: 0.38;
  background-image:
    radial-gradient(circle, rgb(78 57 115 / 0.34) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgb(36 136 216 / 0.24) 0 1px, transparent 1.8px);
  background-position: 4px 11px, 37px 24px;
  background-size: 76px 76px, 113px 113px;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 88%, transparent);
  transition: opacity 720ms ease;
}

.portfolio__stars::before,
.portfolio__stars::after {
  content: "";
  margin: auto;
  border: 1px solid rgb(118 87 255 / 0.13);
  border-radius: 50%;
}

.portfolio__stars::before {
  width: min(86vw, 1240px);
  height: min(86vw, 1240px);
  transform: translate(28%, -38%);
}

.portfolio__stars::after {
  width: min(58vw, 840px);
  height: min(58vw, 840px);
  transform: translate(55%, -50%);
}

body[data-theme="night"] .portfolio__stars {
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgb(220 210 255 / 0.52) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgb(104 183 245 / 0.42) 0 1px, transparent 1.8px);
}

body[data-theme="night"] .portfolio__stars::before,
body[data-theme="night"] .portfolio__stars::after {
  border-color: rgb(168 137 255 / 0.16);
  box-shadow: 0 0 90px rgb(118 87 255 / 0.04);
}

.portfolio__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(118px, 0.22fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 110px);
  padding-block: clamp(110px, 13vw, 190px);
}

.portfolio__content {
  min-width: 0;
}

.portfolio__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.58fr);
  align-items: end;
  gap: clamp(32px, 5vw, 78px);
}

.portfolio__heading .section-kicker {
  margin-bottom: 18px;
}

.portfolio__heading h2 {
  margin-bottom: 0;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(42px, 6vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.068em;
}

.portfolio__heading h2 em {
  color: var(--violet);
  font-style: normal;
}

.portfolio__lead {
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
}

.project-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(38px, 5vw, 68px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.project-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgb(255 255 255 / 0.22);
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  transition: background 720ms ease, color 720ms ease, border-color 720ms ease;
}

body[data-theme="night"] .project-legend__item {
  background: rgb(255 255 255 / 0.035);
}

.project-legend__item i,
.project-card__category i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.project-legend__item--telegram i {
  background: var(--telegram-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--telegram-accent) 64%, transparent);
}

.project-legend__item--web i {
  background: var(--web-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--web-accent) 64%, transparent);
}

.project-legend__item--other i {
  background: var(--other-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--other-accent) 64%, transparent);
}

.project-orbit {
  position: relative;
  margin-top: clamp(48px, 7vw, 96px);
  padding-left: clamp(68px, 7vw, 108px);
}

.project-orbit::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 46px;
  left: 24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--telegram-accent) 10%, var(--violet) 72%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--telegram-accent) 45%, transparent);
}

.project-orbit__node {
  position: absolute;
  top: 38px;
  left: 0;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--telegram-accent) 42%, transparent);
  border-radius: 50%;
  background: var(--portfolio-space);
  color: var(--telegram-accent);
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
  font-weight: 700;
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--telegram-accent) 6%, transparent),
    0 0 30px color-mix(in srgb, var(--telegram-accent) 20%, transparent);
  transition: background 720ms ease, border-color 720ms ease, color 720ms ease;
}

.project-orbit__node::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.36;
  animation: orbitSpin 18s linear infinite;
}

.project-card {
  --project-surface: var(--other-surface);
  --project-ink: var(--ink);
  --project-accent: var(--other-accent);
  --spot-x: 64%;
  --spot-y: 32%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
  min-height: 610px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--project-accent) 28%, transparent);
  border-radius: clamp(36px, 5vw, 72px) clamp(36px, 5vw, 72px) clamp(36px, 5vw, 72px) 20px;
  padding: clamp(34px, 5vw, 76px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--project-surface) 92%, white), var(--project-surface));
  color: var(--project-ink);
  box-shadow:
    0 34px 90px rgb(31 25 46 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.38);
  transition:
    transform 520ms var(--ease-out),
    background 720ms ease,
    color 720ms ease,
    border-color 720ms ease,
    box-shadow 720ms ease;
}

body[data-theme="night"] .project-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--project-surface) 94%, #25324a), var(--project-surface));
  box-shadow:
    0 42px 110px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.project-card--telegram {
  --project-surface: var(--telegram-surface);
  --project-ink: var(--telegram-ink);
  --project-accent: var(--telegram-accent);
}

.project-card--web {
  --project-surface: var(--web-surface);
  --project-accent: var(--web-accent);
}

.project-card--other {
  --project-surface: var(--other-surface);
  --project-accent: var(--other-accent);
}

.project-card::before,
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-card::before {
  opacity: 0.44;
  background-image:
    radial-gradient(circle, currentColor 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--project-accent) 0 1px, transparent 1.8px);
  background-position: 0 0, 28px 18px;
  background-size: 72px 72px, 104px 104px;
  mask-image: linear-gradient(90deg, transparent, black 46%);
}

.project-card::after {
  background: radial-gradient(circle 300px at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--project-accent) 24%, transparent), transparent 72%);
  opacity: 0.64;
  transition: opacity 320ms ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 46px 120px color-mix(in srgb, var(--project-accent) 18%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.46);
}

.project-card:hover::after {
  opacity: 1;
}

.project-card__content,
.project-card__visual {
  position: relative;
  z-index: 2;
}

.project-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding-right: clamp(20px, 4vw, 64px);
}

.project-card__topline {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.project-card__category,
.project-card__year {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-card__category {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--project-ink) 14%, transparent);
  border-radius: 999px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--project-surface) 70%, white 30%);
}

body[data-theme="night"] .project-card__category {
  background: rgb(255 255 255 / 0.05);
}

.project-card__category i {
  background: var(--project-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--project-accent) 72%, transparent);
}

.project-card__year {
  opacity: 0.56;
}

.project-card h3 {
  margin: auto 0 24px;
  padding-top: 54px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(42px, 5vw, 78px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.project-card__description {
  max-width: 620px;
  margin-bottom: 36px;
  color: color-mix(in srgb, var(--project-ink) 72%, transparent);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.65;
}

.project-card__meta {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 38px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--project-ink) 14%, transparent);
}

.project-card__meta div {
  min-width: 0;
}

.project-card__meta dt {
  margin-bottom: 7px;
  color: color-mix(in srgb, var(--project-ink) 52%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-card__meta dd {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border-radius: 999px;
  padding: 14px 16px 14px 22px;
  background: var(--project-ink);
  color: var(--project-surface);
  font-size: 12px;
  font-weight: 800;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}

.project-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--project-ink) 20%, transparent);
}

.project-card__link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-card__visual {
  display: grid;
  min-height: 460px;
  place-items: center;
}

.project-card__visual::before,
.project-card__visual::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--project-accent) 36%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.project-card__visual::before {
  width: 118%;
  aspect-ratio: 1;
  transform: rotate(-18deg) scaleY(0.48);
}

.project-card__visual::after {
  width: 88%;
  aspect-ratio: 1;
  border-style: dashed;
  opacity: 0.7;
  transform: rotate(28deg) scaleY(0.66);
  animation: orbitSpinTilted 28s linear infinite;
}

.project-planet {
  position: absolute;
  width: min(95%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgb(255 255 255 / 0.82), transparent 12%),
    radial-gradient(circle at 36% 36%, color-mix(in srgb, var(--project-accent) 44%, white), var(--project-accent) 62%, color-mix(in srgb, var(--project-accent) 64%, #152439));
  box-shadow:
    inset -46px -42px 72px rgb(8 31 48 / 0.24),
    0 36px 80px color-mix(in srgb, var(--project-accent) 38%, transparent),
    0 0 0 16px color-mix(in srgb, var(--project-accent) 7%, transparent);
  opacity: 0.64;
}

body[data-theme="night"] .project-planet {
  opacity: 0.52;
  box-shadow:
    inset -52px -46px 76px rgb(1 10 18 / 0.46),
    0 36px 90px color-mix(in srgb, var(--project-accent) 28%, transparent),
    0 0 0 16px color-mix(in srgb, var(--project-accent) 6%, transparent);
}

.orbit-tag {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 50px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--project-accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bot-surface) 86%, transparent);
  color: var(--project-ink);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--project-accent) 14%, transparent);
  backdrop-filter: blur(12px);
}

.orbit-tag--logic {
  top: 8%;
  right: 1%;
}

.orbit-tag--ux {
  bottom: 14%;
  left: -5%;
}

.orbit-tag--deploy {
  right: -2%;
  bottom: 24%;
}

.bot-window {
  position: relative;
  z-index: 2;
  width: min(82%, 340px);
  overflow: hidden;
  border: 1px solid var(--bot-line);
  border-radius: 26px;
  background: var(--bot-surface);
  box-shadow:
    0 34px 72px rgb(10 29 45 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.54);
  backdrop-filter: blur(20px);
  transform: rotate(-2.6deg);
  transition: transform 520ms var(--ease-out), background 720ms ease, border-color 720ms ease;
}

.project-card:hover .bot-window {
  transform: rotate(0deg) translateY(-4px);
}

body[data-theme="night"] .bot-window {
  box-shadow:
    0 38px 86px rgb(0 0 0 / 0.34),
    inset 0 1px 0 rgb(255 255 255 / 0.09);
}

.bot-window__header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bot-line);
}

.bot-window__back,
.bot-window__menu {
  color: var(--project-accent);
  font-size: 24px;
  line-height: 1;
}

.bot-window__menu {
  font-size: 15px;
  letter-spacing: 2px;
}

.bot-window__avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--project-accent) 56%, white), var(--project-accent));
  color: white;
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--project-accent) 26%, transparent);
}

.bot-window__identity {
  display: grid;
  gap: 2px;
}

.bot-window__identity strong {
  font-size: 12px;
}

.bot-window__identity small {
  color: color-mix(in srgb, var(--project-ink) 52%, transparent);
  font-size: 9px;
}

.bot-window__body {
  display: flex;
  min-height: 278px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px 16px;
  background:
    radial-gradient(circle at 10% 14%, color-mix(in srgb, var(--project-accent) 10%, transparent), transparent 24%),
    radial-gradient(circle at 82% 74%, color-mix(in srgb, var(--project-accent) 10%, transparent), transparent 28%);
}

.bot-window__date {
  align-self: center;
  margin-bottom: auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--project-accent) 12%, transparent);
  color: color-mix(in srgb, var(--project-ink) 58%, transparent);
  font-size: 8px;
  font-weight: 700;
}

.bot-message {
  position: relative;
  display: grid;
  width: 88%;
  gap: 6px;
  border-radius: 16px 16px 16px 5px;
  padding: 14px 14px 20px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: 0 12px 28px rgb(16 48 72 / 0.09);
}

body[data-theme="night"] .bot-message {
  background: rgb(255 255 255 / 0.075);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.16);
}

.bot-message strong {
  font-size: 11px;
}

.bot-message span {
  color: color-mix(in srgb, var(--project-ink) 72%, transparent);
  font-size: 10px;
  line-height: 1.45;
}

.bot-message small {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: color-mix(in srgb, var(--project-ink) 42%, transparent);
  font-size: 7px;
}

.bot-actions {
  display: grid;
  width: 88%;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}

.bot-actions span {
  border: 1px solid color-mix(in srgb, var(--project-accent) 28%, transparent);
  border-radius: 9px;
  padding: 8px;
  background: color-mix(in srgb, var(--project-accent) 11%, transparent);
  color: var(--project-accent);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.bot-window__caption {
  padding: 10px 16px;
  border-top: 1px solid var(--bot-line);
  color: color-mix(in srgb, var(--project-ink) 46%, transparent);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.project-orbit__future {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  margin-top: 34px;
  border: 1px dashed color-mix(in srgb, var(--other-accent) 38%, transparent);
  border-radius: 24px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--other-surface) 54%, transparent);
  color: var(--ink-soft);
  transition: background 720ms ease, color 720ms ease, border-color 720ms ease;
}

.project-orbit__future-dot {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 5px solid color-mix(in srgb, var(--other-surface) 86%, transparent);
  border-radius: 50%;
  background: var(--other-accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--other-accent) 32%, transparent);
}

.project-orbit__future strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
}

.project-orbit__future p {
  margin-bottom: 0;
  font-size: 11px;
}

/* Cardinal portfolio portal */
.portfolio-portal {
  position: relative;
  z-index: 2;
  padding-block: clamp(100px, 11vw, 168px);
}

.portfolio-portal__heading {
  display: grid;
  grid-template-columns: minmax(118px, 0.22fr) minmax(0, 1fr) minmax(260px, 0.48fr);
  align-items: end;
  gap: clamp(30px, 5vw, 88px);
}

.portfolio-portal__heading .section-index {
  align-self: start;
  margin-top: 4px;
}

.portfolio-portal__heading .section-kicker {
  margin-bottom: 18px;
}

.portfolio-portal__heading h2,
.category-feed__heading h2 {
  margin-bottom: 0;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.portfolio-portal__heading h2 {
  font-size: clamp(48px, 6.5vw, 102px);
}

.portfolio-portal__heading h2 em,
.category-feed__heading h2 em {
  color: var(--violet);
  font-style: normal;
}

.portfolio-portal__heading > p {
  max-width: 440px;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}

.cardinal-stage {
  position: relative;
  isolation: isolate;
  min-height: 690px;
  margin-top: clamp(58px, 7vw, 104px);
  overflow: hidden;
  border: 1px solid rgb(94 135 176 / 0.2);
  border-radius: clamp(38px, 5vw, 76px) clamp(38px, 5vw, 76px) 24px clamp(38px, 5vw, 76px);
  background: #eef7ff;
  box-shadow:
    0 48px 120px rgb(73 104 137 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.7);
  transition: border-color 720ms ease, box-shadow 720ms ease, background 720ms ease;
}

body[data-theme="night"] .cardinal-stage {
  border-color: rgb(132 175 222 / 0.16);
  background: #080e18;
  box-shadow:
    0 52px 130px rgb(0 0 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 80px rgb(63 119 176 / 0.08);
}

.cardinal-stage__backdrop,
.cardinal-stage__veil,
.cardinal-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cardinal-stage__backdrop {
  z-index: -3;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform 720ms var(--ease-out), filter 720ms ease, opacity 720ms ease;
}

body[data-theme="night"] .cardinal-stage__backdrop {
  filter: brightness(0.4) saturate(0.95) hue-rotate(8deg) contrast(1.08);
}

.cardinal-stage__veil {
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(248 251 255 / 0.18), transparent 40%, rgb(238 247 255 / 0.08)),
    radial-gradient(circle at 50% 92%, rgb(93 178 239 / 0.15), transparent 32%);
  transition: background 720ms ease;
}

body[data-theme="night"] .cardinal-stage__veil {
  background:
    linear-gradient(180deg, rgb(6 11 21 / 0.18), rgb(5 11 20 / 0.35) 56%, rgb(4 8 15 / 0.5)),
    radial-gradient(circle at 50% 86%, rgb(80 161 226 / 0.2), transparent 32%);
}

.cardinal-orbits {
  z-index: 1;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgb(126 186 230 / 0.26));
}

.cardinal-orbit,
.cardinal-thread {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cardinal-orbit {
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  animation: orbitDash 28s linear infinite;
}

.cardinal-orbit--outer { stroke: url(#orbit-telegram); }
.cardinal-orbit--middle { stroke: url(#orbit-web); animation-direction: reverse; animation-duration: 33s; }
.cardinal-orbit--inner { stroke: url(#orbit-other); animation-duration: 24s; }

.cardinal-thread {
  stroke-width: 0.8;
  stroke-dasharray: 2 8;
  opacity: 0.46;
  animation: energyThread 4.8s ease-in-out infinite;
}

.cardinal-thread--telegram { stroke: #58a8e6; }
.cardinal-thread--web { stroke: #ec9b7b; animation-delay: 0.6s; }
.cardinal-thread--other { stroke: #d6bb70; animation-delay: 1.2s; }

.cardinal-core-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8.5%;
  display: grid;
  gap: 4px;
  color: #456886;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.cardinal-core-label strong {
  color: #173f61;
  font-family: "Unbounded", sans-serif;
  font-size: 10px;
}

body[data-theme="night"] .cardinal-core-label {
  color: rgb(190 223 250 / 0.54);
}

body[data-theme="night"] .cardinal-core-label strong {
  color: #d8efff;
}

.orbit-gem {
  --gem-accent: #4d9ee0;
  --gem-light: #bce6ff;
  --gem-deep: #174d87;
  position: absolute;
  z-index: 5;
  display: grid;
  width: 126px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: 50% 210%;
  animation: tetherSway 5.8s ease-in-out infinite;
  transition: transform 560ms var(--ease-out), opacity 440ms ease, filter 440ms ease;
}

.orbit-gem--telegram {
  top: 23.6%;
  left: 67.25%;
  animation-duration: 6.4s;
  animation-delay: -1.2s;
}

.orbit-gem--web {
  --gem-accent: #ed9676;
  --gem-light: #ffe0cf;
  --gem-deep: #9c4b3b;
  top: 47.1%;
  left: 26.25%;
  animation-duration: 5.6s;
  animation-delay: -3.4s;
}

.orbit-gem--other {
  --gem-accent: #d6ba6d;
  --gem-light: #fff3c9;
  --gem-deep: #8b6a28;
  top: 54.7%;
  left: 63.3%;
  animation-duration: 7.1s;
  animation-delay: -2.1s;
}

.orbit-gem__halo {
  position: absolute;
  top: 3px;
  width: 92px;
  height: 92px;
  border: 1px solid color-mix(in srgb, var(--gem-accent) 34%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 28px color-mix(in srgb, var(--gem-accent) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--gem-accent) 12%, transparent);
  animation: gemHalo 3.8s ease-in-out infinite;
}

.orbit-gem__halo::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in srgb, var(--gem-accent) 34%, transparent);
  border-radius: 50%;
  animation: orbitSpin 18s linear infinite;
}

.orbit-gem__stone {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 22%;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.88), transparent 24%),
    linear-gradient(315deg, color-mix(in srgb, var(--gem-deep) 78%, transparent), transparent 52%),
    linear-gradient(145deg, var(--gem-light), var(--gem-accent) 54%, var(--gem-deep));
  box-shadow:
    inset 10px 9px 22px rgb(255 255 255 / 0.32),
    inset -12px -10px 22px rgb(12 38 66 / 0.22),
    0 18px 38px color-mix(in srgb, var(--gem-accent) 34%, transparent),
    0 0 24px color-mix(in srgb, var(--gem-light) 46%, transparent);
  transform: rotate(45deg);
  transition: transform 520ms var(--ease-out), box-shadow 520ms ease;
}

.orbit-gem__stone::before,
.orbit-gem__stone::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-gem__stone::before {
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 18%;
}

.orbit-gem__stone::after {
  width: 120%;
  height: 18px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.72), transparent);
  filter: blur(2px);
  transform: rotate(-38deg) translateY(-24px);
  animation: gemShine 4.5s ease-in-out infinite;
}

.orbit-gem__stone svg {
  position: relative;
  z-index: 2;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: white;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 7px rgb(19 51 80 / 0.32));
  transform: rotate(-45deg);
}

.orbit-gem--telegram .orbit-gem__stone svg {
  fill: white;
  stroke: none;
}

.orbit-gem__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 21px;
  border: 1px solid color-mix(in srgb, var(--gem-accent) 24%, transparent);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgb(255 255 255 / 0.7);
  color: #27475f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgb(66 95 119 / 0.12);
  backdrop-filter: blur(16px);
  transition: background 720ms ease, color 720ms ease;
}

.orbit-gem__label small {
  color: var(--gem-deep);
  font-size: 7px;
}

body[data-theme="night"] .orbit-gem__label {
  background: rgb(8 18 31 / 0.72);
  color: #e6f4ff;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
}

body[data-theme="night"] .orbit-gem__label small {
  color: var(--gem-light);
}

.orbit-gem:hover,
.orbit-gem:focus-visible {
  z-index: 8;
  animation-play-state: paused;
  transform: translate(-50%, -50%) scale(1.12);
  outline: none;
}

.orbit-gem:focus-visible .orbit-gem__stone {
  box-shadow:
    inset 10px 9px 22px rgb(255 255 255 / 0.34),
    0 0 0 5px rgb(255 255 255 / 0.9),
    0 0 0 8px var(--gem-accent),
    0 24px 48px color-mix(in srgb, var(--gem-accent) 46%, transparent);
}

.orbit-gem:hover .orbit-gem__stone {
  transform: rotate(45deg) scale(1.08);
}

.cardinal-stage__hint {
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(20px, 4vw, 46px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #43647e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cardinal-stage__hint span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(52 102 143 / 0.2);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.58);
}

body[data-theme="night"] .cardinal-stage__hint {
  color: rgb(218 238 255 / 0.6);
}

body[data-theme="night"] .cardinal-stage__hint span {
  background: rgb(10 22 38 / 0.58);
}

/* The night portal becomes a separate solar system. */
.night-sun {
  display: none;
}

body[data-theme="night"] .cardinal-stage {
  background:
    radial-gradient(circle at 50% 108%, rgb(255 219 117 / 0.2), transparent 31%),
    radial-gradient(circle at 20% 18%, rgb(87 77 173 / 0.18), transparent 28%),
    linear-gradient(180deg, #060916 0%, #0b1023 52%, #111326 100%);
}

body[data-theme="night"] .cardinal-stage__backdrop {
  opacity: 0;
  filter: none;
}

body[data-theme="night"] .cardinal-stage__veil {
  z-index: -1;
  background-image:
    radial-gradient(circle, rgb(231 239 255 / 0.72) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgb(142 170 255 / 0.52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 50% 100%, rgb(255 176 69 / 0.16), transparent 28%);
  background-position: 8px 12px, 36px 44px, center;
  background-size: 86px 86px, 137px 137px, auto;
  opacity: 0.82;
}

body[data-theme="night"] .night-sun {
  position: absolute;
  z-index: 3;
  bottom: -176px;
  left: 50%;
  display: block;
  width: min(38vw, 510px);
  min-width: 370px;
  aspect-ratio: 1;
  border: 1px solid rgb(255 245 193 / 0.88);
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 30%, #fffdf0 0 5%, transparent 18%),
    radial-gradient(circle at 54% 48%, #fff3a9 0 19%, #ffc44e 54%, #f07a2f 82%, #b7352c 100%);
  box-shadow:
    inset -48px -44px 92px rgb(180 39 32 / 0.34),
    0 0 34px rgb(255 229 133 / 0.88),
    0 0 92px rgb(255 164 65 / 0.58),
    0 0 180px rgb(255 119 51 / 0.25);
  transform: translateX(-50%);
  animation: sunBreathe 7s ease-in-out infinite;
}

body[data-theme="night"] .night-sun::before,
body[data-theme="night"] .night-sun::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

body[data-theme="night"] .night-sun::before {
  inset: -24px;
  border: 1px solid rgb(255 211 107 / 0.28);
  box-shadow: 0 0 54px rgb(255 151 61 / 0.24);
}

body[data-theme="night"] .night-sun::after {
  inset: 8%;
  opacity: 0.32;
  background:
    radial-gradient(circle at 24% 52%, #d65233 0 2.5%, transparent 3.2%),
    radial-gradient(circle at 68% 30%, #fff1a2 0 2%, transparent 2.8%),
    radial-gradient(circle at 61% 69%, #d84b31 0 3.2%, transparent 4%),
    radial-gradient(circle at 40% 22%, #fff4ba 0 1.8%, transparent 2.5%);
  animation: sunSurface 18s linear infinite;
}

body[data-theme="night"] .night-sun span {
  position: absolute;
  inset: -52px;
  border: 1px dashed rgb(255 213 118 / 0.18);
  border-radius: 50%;
  animation: orbitSpin 34s linear infinite;
}

body[data-theme="night"] .cardinal-core-label,
body[data-theme="night"] .cardinal-thread {
  display: none;
}

body[data-theme="night"] .cardinal-orbits {
  z-index: 2;
  filter: drop-shadow(0 0 8px rgb(157 181 255 / 0.18));
}

body[data-theme="night"] .cardinal-orbit {
  stroke-dasharray: 2 9;
  opacity: 0.56;
}

body[data-theme="night"] .cardinal-orbit--outer { stroke: #8199d9; }
body[data-theme="night"] .cardinal-orbit--middle { stroke: #ca8f88; }
body[data-theme="night"] .cardinal-orbit--inner { stroke: #c7aa68; }

body[data-theme="night"] .orbit-gem {
  top: var(--night-orbit-y, 50%);
  left: var(--night-orbit-x, 50%);
  animation: none;
  transform-origin: center;
}

body[data-theme="night"] .orbit-gem--telegram {
  --night-orbit-x: 86%;
  --night-orbit-y: 60%;
}

body[data-theme="night"] .orbit-gem--web {
  --night-orbit-x: 50%;
  --night-orbit-y: 36%;
}

body[data-theme="night"] .orbit-gem--other {
  --night-orbit-x: 26%;
  --night-orbit-y: 58%;
}

body[data-theme="night"] .orbit-gem__halo {
  border-color: color-mix(in srgb, var(--gem-accent) 22%, transparent);
  box-shadow:
    0 0 34px color-mix(in srgb, var(--gem-accent) 22%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--gem-accent) 9%, transparent);
}

body[data-theme="night"] .orbit-gem__stone {
  overflow: hidden;
  border-color: rgb(255 255 255 / 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.72), transparent 12%),
    repeating-linear-gradient(160deg, transparent 0 12%, rgb(255 255 255 / 0.12) 13% 17%, transparent 18% 28%),
    linear-gradient(120deg, var(--gem-light), var(--gem-accent) 46%, var(--gem-deep));
  background-position: center, 0 0, center;
  background-size: 100% 100%, 190% 100%, 100% 100%;
  box-shadow:
    inset -16px -12px 26px rgb(4 8 19 / 0.42),
    inset 8px 7px 16px rgb(255 255 255 / 0.18),
    0 18px 44px color-mix(in srgb, var(--gem-accent) 32%, transparent),
    0 0 28px color-mix(in srgb, var(--gem-accent) 24%, transparent);
  transform: none;
  animation: planetSurfaceSpin 15s linear infinite;
}

body[data-theme="night"] .orbit-gem--web .orbit-gem__stone {
  animation-duration: 18s;
}

body[data-theme="night"] .orbit-gem--other .orbit-gem__stone {
  animation-duration: 22s;
}

body[data-theme="night"] .orbit-gem__stone::before {
  inset: 7px;
  border-color: rgb(255 255 255 / 0.18);
  border-radius: 50%;
}

body[data-theme="night"] .orbit-gem__stone::after {
  width: 150%;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent);
  filter: blur(3px);
  animation: planetBand 8s ease-in-out infinite;
}

body[data-theme="night"] .orbit-gem__stone svg {
  transform: none;
}

body[data-theme="night"] .orbit-gem:hover .orbit-gem__stone {
  transform: scale(1.08);
}

body[data-theme="night"] .portfolio.is-zooming .cardinal-stage__backdrop {
  opacity: 0;
  filter: none;
}

.portfolio__transition-flare {
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, white 0 8%, rgb(186 226 255 / 0.82) 20%, transparent 58%);
  transform: scale(0.35);
  transition: opacity 520ms ease, transform 620ms var(--ease-out);
}

.portfolio.is-zooming .portfolio__transition-flare {
  opacity: 1;
  transform: scale(2.2);
}

.portfolio.is-zooming .cardinal-stage__backdrop {
  filter: blur(4px) brightness(1.14);
  transform: scale(1.1);
}

body[data-theme="night"] .portfolio.is-zooming .cardinal-stage__backdrop {
  filter: blur(4px) brightness(0.72) saturate(1.1);
}

.portfolio.is-zooming .orbit-gem:not(.is-selected) {
  opacity: 0;
  filter: blur(5px);
}

.portfolio.is-zooming .orbit-gem {
  animation-play-state: paused;
}

.portfolio.is-zooming .orbit-gem.is-selected {
  z-index: 12;
  opacity: 0;
  transform: translate(-50%, -50%) scale(4.2);
}

.portfolio.is-zooming .cardinal-orbits,
.portfolio.is-zooming .cardinal-core-label,
.portfolio.is-zooming .cardinal-stage__hint {
  opacity: 0;
  transition: opacity 360ms ease;
}

.portfolio-catalog {
  position: relative;
  z-index: 2;
  min-height: 980px;
  animation: catalogEnter 760ms var(--ease-out) both;
}

.portfolio[data-active-category="telegram"] .portfolio-catalog {
  background:
    radial-gradient(circle at 76% 6%, rgb(65 154 225 / 0.16), transparent 27%),
    linear-gradient(180deg, var(--portfolio-bg), color-mix(in srgb, var(--telegram-surface) 28%, var(--portfolio-space)));
}

.portfolio[data-active-category="web"] .portfolio-catalog {
  background:
    radial-gradient(circle at 76% 6%, rgb(237 150 118 / 0.18), transparent 27%),
    linear-gradient(180deg, var(--portfolio-bg), color-mix(in srgb, var(--web-surface) 36%, var(--portfolio-space)));
}

.portfolio[data-active-category="other"] .portfolio-catalog {
  background:
    radial-gradient(circle at 76% 6%, rgb(214 186 109 / 0.14), transparent 27%),
    linear-gradient(180deg, var(--portfolio-bg), color-mix(in srgb, var(--other-surface) 44%, var(--portfolio-space)));
}

.portfolio-catalog__inner {
  padding-block: clamp(90px, 10vw, 150px);
}

.portfolio-catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(64px, 8vw, 110px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.portfolio-back,
.portfolio-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.28);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: transform 220ms var(--ease-out), background 220ms ease, color 220ms ease, border-color 220ms ease;
}

body[data-theme="night"] .portfolio-back,
body[data-theme="night"] .portfolio-tabs button {
  background: rgb(255 255 255 / 0.04);
}

.portfolio-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px 10px 12px;
  font-size: 10px;
  font-weight: 800;
}

.portfolio-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-back:hover,
.portfolio-back:focus-visible {
  border-color: var(--violet);
  color: var(--violet);
  transform: translateX(-3px);
  outline: none;
}

.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.portfolio-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-tabs button i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--other-accent);
}

.portfolio-tabs button[data-category-switch="telegram"] i { background: var(--telegram-accent); }
.portfolio-tabs button[data-category-switch="web"] i { background: var(--web-accent); }

.portfolio-tabs button:hover,
.portfolio-tabs button:focus-visible,
.portfolio-tabs button[aria-pressed="true"] {
  border-color: currentColor;
  background: var(--ink);
  color: var(--paper);
  outline: none;
  transform: translateY(-2px);
}

.category-feed {
  animation: feedReveal 620ms var(--ease-out) both;
}

.category-feed__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.52fr);
  align-items: end;
  gap: clamp(36px, 7vw, 110px);
}

.category-feed__heading .section-kicker {
  margin-bottom: 18px;
}

.category-feed__heading h2 {
  font-size: clamp(48px, 7vw, 112px);
}

.category-feed--telegram .category-feed__heading h2 em { color: var(--telegram-accent); }
.category-feed--web .category-feed__heading h2 em { color: var(--web-accent); }
.category-feed--other .category-feed__heading h2 em { color: var(--other-accent); }

.category-feed__heading > p {
  max-width: 450px;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
}

.category-feed .project-orbit {
  margin-top: clamp(62px, 8vw, 110px);
}

.category-empty {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  min-height: 420px;
  margin-top: clamp(62px, 8vw, 110px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--empty-accent) 28%, transparent);
  border-radius: clamp(34px, 5vw, 70px) clamp(34px, 5vw, 70px) 18px clamp(34px, 5vw, 70px);
  padding: clamp(36px, 6vw, 90px);
  background:
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--empty-accent) 24%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--empty-surface) 86%, white), var(--empty-surface));
  color: var(--empty-ink);
  box-shadow: 0 34px 90px color-mix(in srgb, var(--empty-accent) 14%, transparent);
}

body[data-theme="night"] .category-empty {
  background:
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--empty-accent) 18%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--empty-surface) 90%, #171324), var(--empty-surface));
}

.category-empty--web {
  --empty-surface: var(--web-surface);
  --empty-accent: var(--web-accent);
  --empty-ink: var(--ink);
}

.category-empty--other {
  --empty-surface: var(--other-surface);
  --empty-accent: var(--other-accent);
  --empty-ink: var(--ink);
}

.category-empty__index {
  align-self: start;
  color: color-mix(in srgb, var(--empty-ink) 42%, transparent);
  font-family: "Unbounded", sans-serif;
  font-size: 10px;
}

.category-empty__symbol {
  display: grid;
  width: clamp(100px, 12vw, 166px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--empty-accent) 34%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--empty-accent) 13%, transparent);
  box-shadow:
    0 0 0 14px color-mix(in srgb, var(--empty-accent) 5%, transparent),
    0 0 60px color-mix(in srgb, var(--empty-accent) 20%, transparent);
}

.category-empty__symbol svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: var(--empty-accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-empty > div:last-child > span {
  display: block;
  margin-bottom: 14px;
  color: var(--empty-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.category-empty h3 {
  max-width: 760px;
  margin-bottom: 22px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(32px, 4.5vw, 66px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.category-empty p {
  max-width: 620px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--empty-ink) 62%, transparent);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.65;
}

@keyframes orbitDash {
  to { stroke-dashoffset: -160; }
}

@keyframes energyThread {
  0%, 100% { opacity: 0.22; stroke-dashoffset: 0; }
  50% { opacity: 0.72; stroke-dashoffset: -30; }
}

@keyframes gemHalo {
  0%, 100% { opacity: 0.54; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes gemShine {
  0%, 32% { transform: rotate(-38deg) translateY(-42px); opacity: 0; }
  48% { opacity: 0.86; }
  64%, 100% { transform: rotate(-38deg) translateY(42px); opacity: 0; }
}

@keyframes tetherSway {
  0%, 100% {
    translate: -7px 1px;
    rotate: -1.4deg;
  }
  35% {
    translate: 2px -3px;
    rotate: 0.5deg;
  }
  68% {
    translate: 8px 1px;
    rotate: 1.6deg;
  }
}

@keyframes sunBreathe {
  0%, 100% { transform: translateX(-50%) scale(0.985); filter: brightness(0.98); }
  50% { transform: translateX(-50%) scale(1.018); filter: brightness(1.08); }
}

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

@keyframes planetSurfaceSpin {
  to { background-position: center, 190% 0, center; }
}

@keyframes planetBand {
  0%, 100% { opacity: 0.24; transform: translateY(-14px) rotate(-12deg); }
  50% { opacity: 0.62; transform: translateY(22px) rotate(10deg); }
}

@keyframes catalogEnter {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes feedReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.principles {
  overflow: hidden;
  background: var(--principles-bg);
  color: var(--principles-ink);
  transition: background 720ms ease, color 720ms ease;
}

.principles__ticker {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 28px;
  padding-block: 24px;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  color: var(--violet-soft);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(16px, 2vw, 29px);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  animation: ticker 30s linear infinite;
}

.principles__ticker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 20px rgb(217 255 107 / 0.4);
}

.principles__grid {
  display: grid;
  grid-template-columns: 0.28fr minmax(0, 1fr) 0.3fr;
  align-items: end;
  gap: clamp(30px, 6vw, 90px);
  padding-block: clamp(110px, 13vw, 190px);
}

.principles .section-kicker {
  margin-bottom: 0;
  color: var(--violet-soft);
}

.principles blockquote {
  max-width: 820px;
  margin-bottom: 0;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(34px, 4.5vw, 68px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.principles__note {
  display: grid;
  gap: 10px;
  color: rgb(255 255 255 / 0.54);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.principles__note span {
  padding-bottom: 9px;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.contact {
  position: relative;
  isolation: isolate;
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px var(--page-gutter);
  background: var(--contact-bg);
  color: white;
  text-align: center;
}

.contact::before,
.contact::after {
  content: "";
  position: absolute;
  z-index: -2;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
}

.contact::before {
  width: min(82vw, 1180px);
  aspect-ratio: 1;
}

.contact::after {
  width: min(55vw, 760px);
  aspect-ratio: 1;
}

.contact__orb {
  position: absolute;
  z-index: -1;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--contact-orb);
  box-shadow: 0 44px 110px rgb(42 17 129 / 0.36);
  animation: orbFloat 8s ease-in-out infinite;
}

.contact .section-kicker {
  margin-bottom: 28px;
  color: var(--lime);
}

.contact h2 {
  margin-bottom: 40px;
  font-size: clamp(66px, 11vw, 176px);
  line-height: 0.82;
  text-shadow: 0 18px 60px rgb(44 20 126 / 0.3);
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 999px;
  padding: 14px 16px 14px 24px;
  background: rgb(255 255 255 / 0.13);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  backdrop-filter: blur(16px);
  transition: transform 240ms var(--ease-out), background 240ms ease;
}

.contact__link:hover {
  background: white;
  color: var(--violet-dark);
  transform: translateY(-4px);
}

.contact__link svg {
  width: 28px;
  height: 28px;
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 20px var(--page-gutter);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro,
.services,
.contact,
.footer,
.section-index span,
.intro__footer,
.service-list,
.text-link {
  transition:
    background-color 720ms ease,
    background 720ms ease,
    color 720ms ease,
    border-color 720ms ease,
    box-shadow 720ms ease;
}

body[data-theme="night"] .contact::before,
body[data-theme="night"] .contact::after {
  border-color: rgb(184 163 255 / 0.2);
  box-shadow: 0 0 90px rgb(118 87 255 / 0.06);
}

body[data-theme="night"] .contact__orb {
  box-shadow:
    0 44px 130px rgb(62 31 133 / 0.46),
    0 0 90px rgb(138 101 255 / 0.16);
}

body[data-theme="night"] .contact__link {
  border-color: rgb(215 202 255 / 0.3);
  background: rgb(157 124 255 / 0.12);
}

body[data-theme="night"] .contact__link:hover {
  background: var(--violet-soft);
  color: #211539;
}

.footer a {
  justify-self: end;
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 900ms var(--ease-out) var(--delay, 0ms),
    transform 900ms var(--ease-out) var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes starPulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.7); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

@keyframes orbFloat {
  0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.035); }
}

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

@keyframes orbitSpinTilted {
  to { transform: rotate(388deg) scaleY(0.66); }
}

@media (max-width: 1024px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  .intro,
  .services,
  .portfolio__inner {
    grid-template-columns: 1fr;
  }

  .section-index {
    margin-bottom: 18px;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2 {
    text-align: left;
  }

  .portfolio-portal__heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.58fr);
  }

  .portfolio-portal__heading .section-index {
    grid-column: 1 / -1;
  }

  .cardinal-stage {
    min-height: 610px;
  }

  .principles__grid {
    grid-template-columns: 1fr 2fr;
  }

  .principles__note {
    grid-column: 2;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .portfolio__heading {
    grid-template-columns: 1fr;
  }

  .portfolio__lead {
    max-width: 620px;
  }

  .portfolio-portal__heading,
  .category-feed__heading {
    grid-template-columns: 1fr;
  }

  .portfolio-portal__heading > p,
  .category-feed__heading > p {
    max-width: 640px;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .project-card__content {
    padding-right: 0;
  }

  .project-card h3 {
    margin-top: 74px;
  }

  .project-card__visual {
    margin-top: 46px;
  }
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 18px;
  }

  .site-header,
  .site-header.is-below-hero {
    min-height: 68px;
    padding-block: 12px;
  }

  .brand__meta,
  .telegram-link--header span {
    display: none;
  }

  .telegram-link--header {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .hero__video {
    object-position: 38% center;
    transform: scale(1.02);
  }

  .scene-control {
    top: clamp(104px, 19vh, 160px);
  }

  .theme-toggle {
    grid-template-columns: 22px 76px 22px;
    gap: 6px;
    padding: 7px 9px;
  }

  .theme-toggle__track {
    height: 34px;
  }

  .theme-toggle__knob {
    width: 26px;
    height: 26px;
  }

  body[data-theme="night"] .theme-toggle__knob {
    transform: translateX(40px);
  }

  .scene-control__label span:last-child {
    display: none;
  }

  .scene-control__label span:first-child::after {
    display: none;
  }

  .hero__content {
    bottom: 92px;
  }

  .hero h1 {
    font-size: clamp(36px, 10vw, 50px);
    letter-spacing: -0.07em;
  }

  .scrub-hint {
    right: 18px;
    bottom: 34px;
    width: calc(100% - 36px);
  }

  .scrub-hint__topline,
  .scrub-hint > span {
    display: none;
  }

  .scroll-cue {
    display: none;
  }

  .intro,
  .services {
    padding-block: 92px;
  }

  .portfolio__inner {
    padding-block: 92px;
  }

  .portfolio-portal {
    padding-block: 92px;
  }

  .intro h2 {
    margin-bottom: 52px;
    font-size: clamp(38px, 10.4vw, 58px);
  }

  .intro__footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .text-link {
    width: fit-content;
  }

  .section-heading h2 {
    font-size: clamp(39px, 10vw, 58px);
  }

  .service-card {
    grid-template-columns: 38px 1fr;
    min-height: 0;
    padding: 32px 0;
  }

  .service-card:hover {
    padding-inline: 18px;
  }

  .service-card__tag {
    grid-column: 2;
    text-align: left;
  }

  .portfolio__heading h2 {
    font-size: clamp(38px, 10vw, 58px);
  }

  .portfolio__lead {
    font-size: 14px;
  }

  .project-legend {
    gap: 7px;
  }

  .project-legend__item {
    padding: 8px 10px;
    font-size: 8px;
  }

  .portfolio-portal__heading {
    gap: 18px;
  }

  .portfolio-portal__heading .section-index {
    margin-bottom: 28px;
  }

  .portfolio-portal__heading h2,
  .category-feed__heading h2 {
    font-size: clamp(39px, 11.6vw, 58px);
  }

  .portfolio-portal__heading > p,
  .category-feed__heading > p {
    margin-top: 18px;
    font-size: 14px;
  }

  .cardinal-stage {
    min-height: 610px;
    margin-top: 42px;
    border-radius: 30px 30px 12px 30px;
  }

  .cardinal-stage__backdrop {
    object-position: center;
  }

  .cardinal-orbit {
    stroke-width: 1.15;
  }

  .orbit-gem {
    width: 88px;
  }

  .orbit-gem__halo {
    top: 2px;
    width: 66px;
    height: 66px;
  }

  .orbit-gem__stone {
    width: 54px;
    height: 54px;
    border-radius: 20%;
  }

  .orbit-gem__stone svg {
    width: 23px;
    height: 23px;
  }

  .orbit-gem__label {
    gap: 5px;
    margin-top: 15px;
    padding: 6px 8px;
    font-size: 7px;
    letter-spacing: 0.07em;
  }

  .cardinal-core-label {
    bottom: 8%;
    font-size: 6px;
  }

  .cardinal-core-label strong {
    font-size: 7px;
  }

  .cardinal-stage__hint {
    display: none;
  }

  .portfolio-catalog {
    min-height: 760px;
  }

  .portfolio-catalog__inner {
    padding-block: 82px;
  }

  .portfolio-catalog__toolbar {
    display: grid;
    align-items: stretch;
    margin-bottom: 62px;
  }

  .portfolio-back {
    width: fit-content;
  }

  .portfolio-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .portfolio-tabs button {
    justify-content: center;
    min-width: 0;
    padding-inline: 7px;
    font-size: 7px;
  }

  .category-empty {
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: 480px;
    gap: 28px;
    border-radius: 30px 30px 12px 30px;
    padding: 30px 24px;
  }

  .category-empty__symbol {
    width: 104px;
  }

  .category-empty h3 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .project-orbit {
    padding-left: 32px;
  }

  .project-orbit::before {
    left: 8px;
  }

  .project-orbit__node {
    top: 28px;
    left: -6px;
    width: 29px;
    height: 29px;
    font-size: 7px;
  }

  .project-orbit__node::before {
    inset: 4px;
  }

  .project-card {
    min-height: 0;
    border-radius: 30px 30px 30px 12px;
    padding: 26px 20px 24px;
  }

  .project-card h3 {
    margin-top: 58px;
    padding-top: 0;
    font-size: clamp(35px, 10vw, 51px);
  }

  .project-card__description {
    font-size: 14px;
  }

  .project-card__meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .project-card__link {
    width: 100%;
    justify-content: space-between;
  }

  .project-card__visual {
    min-height: 390px;
    margin-top: 32px;
  }

  .project-planet {
    width: 96%;
  }

  .bot-window {
    width: 88%;
  }

  .orbit-tag--logic {
    right: -2%;
  }

  .orbit-tag--ux {
    left: -2%;
  }

  .project-orbit__future {
    margin-top: 22px;
    border-radius: 18px;
    padding: 18px;
  }

  .principles__grid {
    grid-template-columns: 1fr;
    padding-block: 92px;
  }

  .principles blockquote,
  .principles__note {
    grid-column: auto;
  }

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

  .contact {
    min-height: 80vh;
    min-height: 80svh;
  }

  .contact__orb {
    width: 84vw;
  }

  .contact h2 {
    font-size: clamp(58px, 18vw, 104px);
  }

  .footer {
    grid-template-columns: 1fr auto;
  }

  .footer span:nth-child(2) {
    display: none;
  }
}

@media (max-height: 700px) and (min-width: 721px) {
  .scene-control {
    top: 100px;
  }

  .hero__content,
  .scrub-hint {
    bottom: 62px;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}