/* =========================================================
   CREATIVE GRADIENTS — Global Styles
   ========================================================= */

:root {
  color-scheme: dark;
  --bg: #050505;
  --navy: #0A0F1A;
  --white: #FFFFFF;
  --muted: #A1A1AA;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --blue: #3A7BFF;
  --cyan: #7DF9FF;
  --violet: #7B61FF;
  --ice: #A9CCFF;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: var(--sans);
  --radius: 22px;
  --max: 1200px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Deep spatial background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(10, 15, 26, 1) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 60%, rgba(58, 123, 255, 0.07) 0%, transparent 70%),
    radial-gradient(50% 40% at 0% 90%, rgba(123, 97, 255, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #050505 0%, #0A0F1A 50%, #050505 100%);
}

/* Film grain — the "rendered" finish */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #fff; }

.container {
  width: min(var(--max), 100% - 48px);
  margin-inline: auto;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
.h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }

.lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  max-width: 580px;
}

.grad-text {
  background: linear-gradient(95deg, #FFFFFF 0%, var(--ice) 40%, #8F7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Chip — "Advantages 04" style tag from the references */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.chip b {
  background: var(--white);
  color: var(--bg);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.logo img {
  height: 38px;
  width: auto;
  display: block;
  transition: filter 0.5s var(--ease);
}

.logo:hover img { filter: drop-shadow(0 0 14px rgba(123, 97, 255, 0.55)); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
  position: relative;
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--white); }

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-links a.btn {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 0.85rem;
  color: var(--bg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s, border-color 0.35s, color 0.35s;
}

.btn-sm { padding: 10px 18px; }

.btn-primary {
  background: var(--white);
  color: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 34px -10px rgba(110, 160, 255, 0.7);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #fff, 0 16px 54px -8px rgba(110, 160, 255, 0.95);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Glow system ---------- */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
}

.glow-hero {
  z-index: -3;
  width: 980px;
  height: 640px;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(190, 220, 255, 0.55) 0%,
    rgba(58, 123, 255, 0.5) 30%,
    rgba(123, 97, 255, 0.28) 58%,
    rgba(125, 249, 255, 0.06) 80%,
    transparent 100%);
  animation: breathe 9s ease-in-out infinite;
}

.glow-page {
  z-index: -2;
  width: 760px;
  height: 460px;
  left: -8%;
  top: -160px;
  background: radial-gradient(closest-side,
    rgba(160, 205, 255, 0.45),
    rgba(58, 123, 255, 0.3) 45%,
    rgba(123, 97, 255, 0.12) 70%,
    transparent);
}

/* Light beam — top-left flare */
.beam {
  position: absolute;
  z-index: -2;
  top: -220px;
  left: -12%;
  width: 760px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(235, 243, 255, 0.5),
    rgba(100, 160, 255, 0.2) 50%,
    transparent);
  filter: blur(34px);
  transform: rotate(-22deg);
  pointer-events: none;
}

/* Planet horizon — the glowing arc */
.horizon {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(100% - 150px);
  width: 2000px;
  height: 2000px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(45% 6% at 50% 0%, rgba(90, 150, 255, 0.35), transparent 100%),
    #050505;
  border-top: 0.5px solid rgba(225, 238, 255, 0.9);
  box-shadow: 0 -4px 18px rgba(110, 170, 255, 0.28);
  pointer-events: none;
}

.hero::before,
.contact::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: 0;
  width: 1500px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 72%,
    rgba(70, 120, 255, 0.45) 0%,
    rgba(123, 97, 255, 0.16) 50%,
    transparent 80%);
  pointer-events: none;
}

@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 150px 0 230px;
}

.hero .h1 {
  max-width: 1000px;
  margin: 26px auto 26px;
}

.hero .lead { margin: 0 auto 42px; }

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.float-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.76rem;
  color: #DFE6F5;
  animation: float 7s ease-in-out infinite;
}

.float-tag i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cyan) 35%, var(--blue) 70%, var(--violet));
  box-shadow: 0 0 12px rgba(125, 249, 255, 0.6);
}

.float-tag.t1 { top: 20%; left: 6%; }
.float-tag.t2 { top: 15%; right: 11%; animation-delay: -2s; }
.float-tag.t3 { bottom: 34%; left: 12%; animation-delay: -4s; }
.float-tag.t4 { bottom: 38%; right: 13%; animation-delay: -1s; }
.float-tag.t3 i { background: radial-gradient(circle at 35% 30%, #fff, #C9B8FF 35%, var(--violet)); }
.float-tag.t4 i { background: radial-gradient(circle at 35% 30%, #fff, #8FF5D2 35%, #1FB58C); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Load reveal ---------- */
.reveal { animation: rise 1.1s var(--ease) both; }
.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.22s; }
.d3 { animation-delay: 0.34s; }
.d4 { animation-delay: 0.46s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 32s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 60px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.marquee-track span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 10px var(--blue);
}

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

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: 130px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.section-head .h2 {
  margin-top: 20px;
  max-width: 640px;
}

.section-head .lead { max-width: 380px; font-size: 0.98rem; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: 54px 36px;
  border-left: 1px solid var(--line);
  position: relative;
}

.stat:first-child { border-left: 0; padding-left: 0; }

.stat-num {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.stat-label { margin-top: 16px; display: block; }

/* ---------- Glow cards ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  padding: 34px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(58, 123, 255, 0.28), transparent 55%) padding-box,
    linear-gradient(180deg, #101830 0%, #070A12 100%) padding-box,
    linear-gradient(160deg, rgba(170, 215, 255, 0.6), rgba(123, 97, 255, 0.25) 40%, rgba(255, 255, 255, 0.04) 70%) border-box;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -90px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(125, 249, 255, 0.35), rgba(58, 123, 255, 0.15) 60%, transparent);
  filter: blur(10px);
  opacity: 0.6;
  transition: opacity 0.6s, transform 0.8s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 90px -34px rgba(58, 123, 255, 0.7);
}

.card:hover::after { opacity: 1; transform: scale(1.15); }

.card--dark {
  background:
    linear-gradient(180deg, #0C0E14 0%, #050608 100%) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03) 60%, rgba(58, 123, 255, 0.35)) border-box;
}

.card--dark::after {
  background: radial-gradient(closest-side, rgba(123, 97, 255, 0.4), transparent);
}

.card--light {
  color: var(--navy);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.95), transparent 60%) padding-box,
    linear-gradient(165deg, #EEF2FA 0%, #B3C7EA 100%) padding-box,
    linear-gradient(160deg, #FFFFFF, rgba(160, 190, 240, 0.6)) border-box;
}

.card--light::after {
  background: radial-gradient(closest-side, rgba(58, 123, 255, 0.45), transparent);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.card-icon svg { width: 18px; height: 18px; }

.card-num {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.card h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin-bottom: 12px;
}

.card p {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.6;
  color: var(--muted);
  max-width: 300px;
}

.card--light .card-icon { background: rgba(10, 15, 26, 0.06); border-color: rgba(10, 15, 26, 0.12); }
.card--light .card-num { color: #56607A; }
.card--light p { color: #3B4456; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-radius: 30px;
  padding: 110px 40px 120px;
  border: 1px solid var(--line);
  background:
    radial-gradient(55% 110% at 50% 125%, rgba(58, 123, 255, 0.6), rgba(123, 97, 255, 0.2) 50%, transparent 75%),
    linear-gradient(180deg, #0A0F1A 0%, #050505 100%);
}

.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(100% - 60px);
  width: 1400px;
  height: 1400px;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 0.5px solid rgba(225, 238, 255, 0.85);
  box-shadow: 0 -16px 60px rgba(90, 150, 255, 0.35);
}

.cta-band .h2 { max-width: 760px; margin: 22px auto 20px; }
.cta-band .lead { margin: 0 auto 38px; }

/* ---------- Page hero (Work / Contact) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: 150px 0 80px;
}

.page-hero .h1 { margin: 22px 0 22px; max-width: 900px; }

/* ---------- Work grid ---------- */
.work-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-bottom: 80px;
}

.work-grid .project:nth-child(even) { margin-top: 90px; }

.project {
  position: relative;
  isolation: isolate;
  display: block;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(170, 215, 255, 0.65) 0%,
    rgba(123, 97, 255, 0.3) 32%,
    rgba(255, 255, 255, 0.05) 62%,
    rgba(58, 123, 255, 0.45) 100%);
  transition: transform 0.7s var(--ease);
}

.project::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, var(--blue), var(--violet) 50%, var(--cyan));
  filter: blur(34px);
  opacity: 0.18;
  transition: opacity 0.7s var(--ease);
}

.project-inner {
  border-radius: 25px;
  overflow: hidden;
  background: #080B12;
}

.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.1);
  transition: filter 0.7s var(--ease), transform 1s var(--ease);
}

.project-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 70% at 25% 0%, rgba(90, 150, 255, 0.55), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(123, 97, 255, 0.4), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity 0.7s var(--ease);
}

.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 11, 18, 0.9));
}

.banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.7s var(--ease), transform 1s var(--ease);
}

.project:hover .banner { filter: brightness(1.05); transform: scale(1.03); }

.project-chip {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 26px 26px;
}

.project-meta h3 {
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.project-meta p { margin-top: 6px; }
.project-meta .project-intro { color: var(--muted); font-size: 0.95rem; font-weight: 300; line-height: 1.5; margin: 8px 0 12px; max-width: 420px; }

.project-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  transition: background 0.5s var(--ease), color 0.5s, transform 0.5s var(--ease);
}

.project:hover { transform: translateY(-6px); }
.project:hover::before { opacity: 0.6; }
.project:hover .project-media .cover,
.project:hover .project-media img { filter: brightness(1.05) saturate(1.2); transform: scale(1.04); }
.project:hover .project-media::before { opacity: 1; }
.project:hover .project-arrow { background: var(--white); color: var(--bg); transform: rotate(-45deg); }

/* ---------- Brand covers (Work) ---------- */
.cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  filter: brightness(0.82);
  transition: filter 0.7s var(--ease), transform 1s var(--ease);
}

.project:hover .project-media .cover { filter: brightness(1.05); transform: scale(1.03); }

.cover-tag {
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cover--minus { background: radial-gradient(70% 60% at 50% 40%, #1c1c1f 0%, #050505 75%); color: #fff; }
.minus-word { position: relative; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: 0.06em; padding-right: 0.32em; }
.minus-word i { position: absolute; top: 0.18em; right: 0; width: 0.2em; height: 0.2em; border: 0.05em solid #fff; }

.cover--gsn { background: linear-gradient(160deg, #ffffff 0%, #f1f2f6 100%); color: #111; }
.gsn-mark { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.gsn-mark b { width: 10px; border-radius: 3px; background: #E8202A; }
.gsn-mark b:nth-child(1) { height: 30%; background: #2D7BFF; }
.gsn-mark b:nth-child(2) { height: 55%; background: #22C08B; }
.gsn-mark b:nth-child(3) { height: 78%; background: #FFB020; }
.gsn-mark b:nth-child(4) { height: 100%; }
.gsn-word { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.gsn-word em { font-style: normal; color: #E8202A; }
.cover--gsn .cover-tag { opacity: 0.55; }

.cover--darang { background: radial-gradient(60% 70% at 50% 30%, #2a2116 0%, #0b0907 70%); color: #F3EBDD; }
.darang-word { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 300; letter-spacing: -0.03em; }
.darang-word em { font-style: normal; color: #C9A46A; }

.cover--pinnacle { background: radial-gradient(70% 70% at 50% 45%, #5a0b10 0%, #1a0306 55%, #050505 100%); color: #fff; }
.pin-j { width: 70px; height: 80px; display: grid; place-items: center; background: #D7141F; color: #050505; font-size: 2.4rem; font-weight: 800; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
.pin-word { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: 0.14em; font-style: italic; }

.brand-logo { max-width: 62%; max-height: 30%; object-fit: contain; }

/* ---------- Contact ---------- */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 0 240px;
}

.contact .h1 { max-width: 900px; margin: 26px auto 22px; }
.contact .lead { margin: 0 auto 48px; }

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DF5A8;
  box-shadow: 0 0 0 0 rgba(61, 245, 168, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 245, 168, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(61, 245, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 245, 168, 0); }
}

.btn-wa {
  font-size: 1.15rem;
  padding: 22px 42px;
  gap: 14px;
  animation: halo 3.2s ease-in-out infinite;
}

.btn-wa svg { width: 24px; height: 24px; }

@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 14px 50px -10px rgba(110, 160, 255, 0.7); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 20px 90px -6px rgba(125, 249, 255, 0.85); }
}

.mail {
  display: inline-block;
  margin-top: 34px;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.4s, border-color 0.4s;
}

.mail:hover { color: var(--white); border-color: var(--cyan); }

.contact-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 64px;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.footer-logo {
  display: block;
  width: min(440px, 80%);
  height: auto;
  margin: 80px auto 20px;
}

.footer-mark {
  text-align: center;
  white-space: nowrap;
  font-size: clamp(2.2rem, 9vw, 8.2rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
  padding-top: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 34px 0 40px;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-links { display: flex; gap: 26px; }
.footer a { transition: color 0.3s; }
.footer a:hover { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .float-tag { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .card { min-height: 280px; }
}

@media (max-width: 760px) {
  .logo img { height: 30px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.66rem; letter-spacing: 0.1em; }
  .nav-cta { display: none; }
  .hero { padding: 110px 0 190px; }
  .section { padding: 90px 0; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 36px 0; }
  .stat:first-child { border-top: 0; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid .project:nth-child(even) { margin-top: 0; }
  .page-hero { padding: 110px 0 56px; }
  .cta-band { padding: 80px 24px 90px; }
  .btn-wa { padding: 20px 30px; font-size: 1.05rem; }
  .contact-meta { gap: 20px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

.project-media:has(.cover--gsn)::after,
.project-media:has(.cover--gsn)::before { opacity: 0.25; }

.project-media img.brand-logo {
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 34%;
  object-fit: contain;
  filter: none;
  transform: none;
}
.project-media:has(.cover--gsn)::before,
.project-media:has(.cover--gsn)::after { opacity: 0; }
.cover--gsn { filter: none; }
.cover--minus, .cover--darang { filter: none; }
.project-media:has(.cover--gsn) .project-chip { color: #4a4650; border-color: rgba(18,16,17,0.18); background: rgba(18,16,17,0.04); }
.project-media:has(.cover--gsn) .project-chip b { background: #121011; color: #fff; }

/* Flat brand panels: MINUS black, GetSetNet white */
.cover--minus { background: #000; }
.project-media:has(.cover--minus)::before,
.project-media:has(.cover--minus)::after { opacity: 0; }
.cover--soon { background: radial-gradient(70% 70% at 50% 45%, #141428 0%, #07070d 75%); filter: none; }
.soon-word { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* =========================================================
   CASE STUDY PAGES
   ========================================================= */
a.project { cursor: pointer; }
.project-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 0.86rem; font-weight: 500; color: var(--white);
}
.project-cta .arrow { transition: transform 0.4s var(--ease); }
a.project:hover .project-cta .arrow { transform: translateX(5px); }
.work-grid .project--wide { grid-column: 1 / -1; margin-top: 0 !important; }
.project--wide .project-media { aspect-ratio: 21 / 8; }

.case-hero { position: relative; isolation: isolate; padding: 130px 0 70px; overflow: hidden; }
.case-back { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 34px; transition: color 0.3s; }
.case-back:hover { color: var(--white); }
.case-title { font-size: clamp(2.8rem, 7vw, 5.6rem); margin: 22px 0 22px; }
.case-lead { color: #C9CAD3; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 760px; font-weight: 300; }

.case-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.case-meta div { padding: 24px 24px 24px 0; }
.case-meta div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.case-meta dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.case-meta dd { font-size: 0.98rem; line-height: 1.5; }

.case-stage {
  position: relative; border-radius: 28px; overflow: hidden; margin-top: 56px;
  min-height: 460px; display: grid; place-items: center;
  border: 1px solid var(--line);
}
.case-stage img.stage-logo { max-width: min(560px, 70%); height: auto; position: relative; z-index: 1; }
.case-stage .stage-tag { position: absolute; left: 28px; bottom: 24px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

.case-section { padding: 110px 0 0; }
.case-section .section-head { margin-bottom: 44px; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.story { padding: 32px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); }
.story .num { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--muted); }
.story h3 { font-size: 1.45rem; margin: 18px 0 12px; }
.story p { color: #B9BAC4; font-weight: 300; line-height: 1.65; }

.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.swatch { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.swatch i { display: block; height: 130px; }
.swatch div { padding: 14px 16px; }
.swatch b { display: block; font-weight: 500; font-size: 0.95rem; }
.swatch span { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; }

.brand-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.brand-tile { border-radius: 22px; min-height: 260px; display: grid; place-items: center; padding: 36px; border: 1px solid var(--line); position: relative; }
.brand-tile img { max-width: 78%; max-height: 120px; height: auto; }
.brand-tile .label { position: absolute; left: 20px; bottom: 16px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.type-specimen { font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -0.03em; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gallery figure { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #0b0b10; }
.gallery figure.wide { grid-column: 1 / -1; }
.gallery img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease); }
.gallery figure:hover img { transform: scale(1.02); }
.gallery figcaption { padding: 14px 18px; color: var(--muted); font-size: 0.85rem; }

.browser { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); background: #111; box-shadow: 0 40px 120px -40px rgba(58, 123, 255, 0.45); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #17171d; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a44; }
.browser-bar span { margin-left: 14px; flex: 1; padding: 6px 14px; border-radius: 999px; background: #0d0d12; color: var(--muted); font-size: 0.78rem; }
.browser iframe { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
.browser-note { margin-top: 14px; color: var(--muted); font-size: 0.86rem; }

.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.feature-list li { list-style: none; padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.feature-list li:nth-child(odd) { padding-right: 32px; }
.feature-list li:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
.feature-list b { display: block; font-weight: 500; font-size: 1.05rem; margin-bottom: 6px; }
.feature-list p { color: #B9BAC4; font-weight: 300; line-height: 1.6; font-size: 0.95rem; }
.feature-list .n { color: var(--muted); font-size: 0.8rem; padding-top: 3px; }

.next-case { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 46px 0; margin-top: 110px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next-case small { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.next-case strong { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; transition: color 0.4s; }
.next-case:hover strong { color: var(--ice); }

/* mock UI for concept layouts */
.mock { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); }

@media (max-width: 860px) {
  .case-meta { grid-template-columns: 1fr 1fr; }
  .case-meta div:nth-child(3) { border-left: 0; padding-left: 0; }
  .story-grid, .brand-pair, .gallery, .feature-list { grid-template-columns: 1fr; }
  .feature-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .feature-list li:nth-child(odd) { padding-right: 0; }
  .browser iframe { height: 560px; }
  .project--wide .project-media { aspect-ratio: 4 / 3; }
}

/* ---------- MINUS: stats, app screens, mosaic ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.stat-strip div { padding: 30px 18px 30px 0; }
.stat-strip div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.stat-strip b { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat-strip span { display: block; margin-top: 10px; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.app-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 48px; }
.app-row:not(:has(figure)), .mosaic:not(:has(img)) { display: none; }
.app-shot { margin: 0; }
.app-shot img { width: 100%; border-radius: 26px; border: 1px solid var(--line-strong); display: block; }
.app-shot figcaption { margin-top: 10px; color: var(--muted); font-size: 0.82rem; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }

/* ---------- OCULUS layout mock ---------- */
.oc { background: #1D194C; color: #fff; font-family: var(--sans); }
.oc-nav { display: flex; align-items: center; gap: 30px; padding: 22px 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.oc-nav img { height: 30px; width: auto; }
.oc-nav nav { display: flex; gap: 26px; margin-left: auto; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.oc-nav a, .oc-btns a, .oc-cta a { display: inline-block; padding: 11px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: #fff; color: #1D194C; }
.oc-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 80px 40px 90px; isolation: isolate; }
.oc-arc { position: absolute; z-index: -1; right: -260px; top: -120px; width: 900px; height: 900px; border-radius: 50%; border: 120px solid #4233CC; opacity: 0.55; filter: blur(2px); }
.oc-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); }
.oc-copy h3 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; margin: 22px 0 18px; }
.oc-copy p { color: rgba(255,255,255,0.72); font-weight: 300; line-height: 1.6; max-width: 440px; }
.oc-btns { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.oc-btns a.p { background: #6D5CFF; color: #fff; }
.oc-btns a.s { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.oc-ui { align-self: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: 22px; backdrop-filter: blur(12px); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6); }
.oc-ui-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 18px; }
.oc-ui-top span { color: rgba(255,255,255,0.55); }
.oc-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.oc-cols div { background: rgba(0,0,0,0.18); border-radius: 12px; padding: 10px; min-height: 150px; }
.oc-cols small { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.oc-cols i { display: block; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.12); margin-bottom: 8px; }
.oc-cols i.w { background: #6D5CFF; }
.oc-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.oc-bars span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #8E80FF, #4233CC); }
.oc-band { background: #fff; color: #1D194C; padding: 70px 40px; }
.oc-band h4, .oc-cta h4 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: 34px; }
.oc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.oc-grid div { padding: 24px; border-radius: 16px; background: #F3F2FB; }
.oc-grid b { display: block; margin-bottom: 8px; }
.oc-grid p { font-size: 0.9rem; color: #4D4A70; line-height: 1.55; }
.oc-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 56px 40px; background: linear-gradient(90deg, #2A2470, #4233CC); }
.oc-cta h4 { margin: 0; }

@media (max-width: 860px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .app-row { grid-template-columns: repeat(2, 1fr); }
  .oc-hero, .oc-grid { grid-template-columns: 1fr; }
  .oc-nav nav { display: none; }
  .oc-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- WORK SHOWCASE ---------- */
.showcase .container { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40px; }
.sc { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; min-height: 560px; border-radius: 32px; overflow: hidden; border: 1px solid var(--line-strong); isolation: isolate; transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease); }
.sc:hover { transform: translateY(-6px); box-shadow: 0 50px 120px -40px rgba(90, 120, 255, 0.45); }
.sc:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
.sc:nth-child(even) .sc-text { order: 2; }
.sc-text { display: flex; flex-direction: column; justify-content: center; padding: 64px 56px; gap: 0; }
.sc-num { font-size: 0.74rem; letter-spacing: 0.2em; opacity: 0.55; }
.sc-name { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 0.95; margin: 22px 0 10px; }
.sc-cat { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }
.sc-intro { margin-top: 24px; font-size: 1.08rem; font-weight: 300; line-height: 1.6; max-width: 460px; opacity: 0.85; }
.sc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sc-tags li { padding: 7px 14px; border-radius: 999px; font-size: 0.78rem; border: 1px solid currentColor; opacity: 0.7; }
.sc-cta { margin-top: 34px; font-weight: 600; display: inline-flex; gap: 10px; align-items: center; }
.sc-cta .arrow { transition: transform 0.4s var(--ease); }
.sc:hover .sc-cta .arrow { transform: translateX(6px); }
.sc--dark { color: #fff; }
.sc--light { color: #121011; border-color: rgba(0,0,0,0.08); }
.sc--light .sc-tags li { border-color: #FF1F2E; color: #FF1F2E; opacity: 1; }
.sc-visual { position: relative; display: grid; place-items: center; padding: 48px; overflow: hidden; }
.sc--dark .sc-visual { background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.06), transparent 70%); }
.sc--light .sc-visual { background: #F4F3F1; }
.sc-logo { width: min(440px, 80%); height: auto; transition: transform 1s var(--ease); }
.sc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sc:hover .sc-logo, .sc:hover .sc-cover { transform: scale(1.04); }
@media (max-width: 900px) {
  .sc, .sc:nth-child(even) { grid-template-columns: 1fr; }
  .sc:nth-child(even) .sc-text { order: 0; }
  .sc-text { padding: 40px 28px; }
  .sc-visual { min-height: 280px; }
}

/* square degree mark, as in the MINUS° logo */
.sqdeg { display: inline-block; width: 0.2em; height: 0.2em; border: 0.055em solid currentColor; vertical-align: top; margin: 0.06em 0 0 0.06em; }

/* ---------- rich work visuals ---------- */
.sc { min-height: 620px; grid-template-columns: 0.9fr 1.25fr; }
.sc:nth-child(even) { grid-template-columns: 1.25fr 0.9fr; }
.sc-visual { padding: 40px; align-items: stretch; }
.wv { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.wv-logo { width: min(320px, 62%); height: auto; align-self: flex-start; }
.wv-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.14); }
.wv-stats div { padding: 16px 10px 0 0; }
.wv-stats b { display: block; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.03em; line-height: 1; }
.wv-stats span { display: block; margin-top: 6px; font-size: 0.72rem; opacity: 0.6; line-height: 1.35; }
.wv-dots { display: flex; gap: 8px; }
.wv-dots i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }

.wv-prods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wv-prods figure { margin: 0; background: #000; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: hidden; }
.wv-prods img { width: 100%; aspect-ratio: 9 / 10; object-fit: cover; transition: transform 0.9s var(--ease); }
.sc:hover .wv-prods img { transform: scale(1.06); }
.wv-prods figcaption { padding: 8px 10px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }

.wv-gsn { color: #121011; }
.wv-gsn .wv-logo { width: min(300px, 58%); }
.wv-speeds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wv-speeds div { background: #fff; border-radius: 14px; padding: 16px 14px; border: 1px solid #E6E3DF; }
.wv-speeds b { display: block; font-family: "Doto", ui-monospace, monospace; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: #121011; }
.wv-speeds span { display: block; margin-top: 8px; font-size: 0.68rem; letter-spacing: 0.08em; color: #6B6663; }
.wv-speeds .hot { background: #FF1F2E; border-color: #FF1F2E; }
.wv-speeds .hot b, .wv-speeds .hot span { color: #fff; }
.wv-ad { background: #16090B; color: #fff; border-radius: 16px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.wv-ad strong { font-family: "Inter Tight", var(--sans); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.05; letter-spacing: -0.03em; }
.wv-ad span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #FF1F2E; text-align: right; }
.wv-gsn .wv-dots i { border-color: rgba(0,0,0,0.12); }

.wv-hud { display: flex; justify-content: space-between; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: #C9CDD6; }
.wv-hud i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; margin-right: 8px; animation: pulse 1.6s infinite; }
.wv-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wv-frames div { aspect-ratio: 4 / 3; border: 1px solid #2B46FF; background: rgba(43,70,255,0.07); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.wv-frames small { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.62rem; color: #6E86FF; letter-spacing: 0.12em; }
.wv-frames p { font-size: 0.86rem; line-height: 1.3; color: #F4F5F7; }

.wv-ui { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 18px; }
.wv-ui-top { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 12px; }
.wv-ui-top span { opacity: 0.55; }
.wv-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wv-cols div { background: rgba(0,0,0,0.2); border-radius: 10px; padding: 8px; min-height: 110px; }
.wv-cols small { display: block; font-size: 0.62rem; opacity: 0.6; margin-bottom: 6px; }
.wv-cols i { display: block; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.12); margin-bottom: 6px; }
.wv-cols i.w { background: #6D5CFF; }
.wv-bars { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-top: 12px; }
.wv-bars span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #8E80FF, #4233CC); }

.wv-bb .wv-logo { width: min(340px, 64%); border-radius: 18px; }
.wv-shots { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.wv-shots img { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.wv-shots img:first-child { grid-row: span 2; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .sc, .sc:nth-child(even) { grid-template-columns: 1fr; }
  .wv-prods { grid-template-columns: repeat(3, 1fr); }
  .wv-stats, .wv-speeds { grid-template-columns: repeat(2, 1fr); }
  .sc-visual { padding: 24px; }
}

/* ---------- MINUS case: in the brand's own language ---------- */
.mx-title-logo { width: min(520px, 80%); height: auto; display: block; }
.mx-sheet { margin-top: 10px; background: #fff; color: #0a0a0a; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 14px #E8E8E8; font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif; }
.mx-bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; border-bottom: 1px solid #E9E9E9; }
.mx-bar img { height: 40px; width: auto; }
.mx-bar nav { display: flex; gap: 30px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.mx-hero { background: #000; color: #fff; text-align: center; padding: 70px 40px 56px; }
.mx-hero h2 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 700; letter-spacing: 0; }
.mx-hero p { margin: 16px auto 0; max-width: 44ch; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.86); }
.mx-band { margin: 44px 0 36px; aspect-ratio: 1920 / 520; display: grid; place-items: center; background: radial-gradient(60% 120% at 50% 50%, #1e1e22 0%, #000 70%); }
.mx-band img { width: min(420px, 50%); height: auto; }
.mx-wa { display: inline-block; background: #fff; color: #111; font-size: 12px; padding: 9px 18px; border-radius: 999px; box-shadow: 0 0 0 1.5px rgba(122,168,255,.5), 0 0 22px 4px rgba(80,130,255,.4); }
.mx-statement { padding: 80px 40px; text-align: center; }
.mx-statement p { margin: 0 auto; max-width: 34ch; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.42; letter-spacing: -0.012em; }
.mx-loops { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mx-plate { aspect-ratio: 16 / 9; background: radial-gradient(120% 100% at 50% 120%, #2a2a2e 0%, #101012 45%, #000 100%); color: #fff; display: flex; align-items: flex-end; gap: 14px; padding: 28px; }
.mx-plate b { font-weight: 500; font-size: 18px; letter-spacing: 0.2em; }
.mx-plate em { font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mx-marks { display: flex; justify-content: center; flex-wrap: wrap; gap: 56px; padding: 44px 40px; font-size: 15px; font-weight: 500; }
.mx-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mx-figs div { background: #fff; color: #000; border-radius: 18px; padding: 30px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; }
.mx-figs b { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mx-figs p { margin-top: 22px; font-weight: 500; }
.mx-figs span { color: #6E6E73; font-size: 0.88rem; line-height: 1.5; margin-top: 4px; }
.mx-figs .led b { color: #4AD07D; }
.mx-figs .fill { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.16); }
.mx-figs .fill span { color: rgba(255,255,255,.6); }
.mx-prods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mx-prods figure { margin: 0; background: #000; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.mx-prods img { width: 100%; aspect-ratio: 9 / 10; object-fit: cover; transition: transform 1s var(--ease); }
.mx-prods figure:hover img { transform: scale(1.05); }
.mx-prods figcaption { padding: 16px 16px 20px; display: grid; gap: 4px; }
.mx-prods small { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--muted); }
.mx-prods b { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }
.mx-prods span { font-size: 0.78rem; color: var(--muted); }
.mx-prods em { font-style: normal; font-size: 0.84rem; color: #C9CAD3; margin-top: 8px; line-height: 1.45; }
@media (max-width: 900px) {
  .mx-bar nav { display: none; }
  .mx-loops, .mx-figs { grid-template-columns: 1fr; }
  .mx-prods { grid-template-columns: repeat(2, 1fr); }
}

/* seamless full-bleed brand stage on case pages */
.case-stage { border: 0; border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 560px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(255,255,255,0.06); }
.case-stage .stage-tag { left: max(24px, calc(50vw - 600px)); }
.case-hero { overflow-x: clip; overflow-y: visible; }
.page-hero { overflow-x: clip; }
.sc-text, .sc-visual, .wv { min-width: 0; }
@media (max-width: 600px) {
  .wv-frames { grid-template-columns: 1fr; }
  .wv-frames div { aspect-ratio: auto; min-height: 70px; }
  .wv-hud { flex-wrap: wrap; gap: 6px; }
  .wv-shots { grid-template-columns: 1fr; }
  .wv-shots img:first-child { grid-row: auto; }
  .wv-cols div { min-height: 80px; }
  .wv-ad { flex-direction: column; align-items: flex-start; }
  .wv-ad span { text-align: left; }
  .sc-name { font-size: 2.6rem; }
}

/* ---------- CASE STUDY POPUP ---------- */
.lb-lock, .lb-lock body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px; }
.lb[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(4, 4, 10, 0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); opacity: 0; transition: opacity 0.35s var(--ease); }
.lb-panel { position: relative; width: min(1180px, 100%); height: min(92vh, 100%); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #07070C; border: 1px solid var(--line-strong); box-shadow: 0 60px 160px -40px rgba(80, 110, 255, 0.45); opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.lb.on .lb-backdrop { opacity: 1; }
.lb.on .lb-panel { opacity: 1; transform: none; }
.lb-bar { display: flex; align-items: center; gap: 18px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.lb-count { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted); }
.lb-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.lb-actions { margin-left: auto; display: flex; gap: 8px; }
.lb-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--white); font: 500 0.95rem var(--sans); cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.lb-btn:hover { background: var(--white); color: var(--bg); border-color: var(--white); }
.lb-scroll { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.lb-stack { opacity: 0; transition: opacity 0.5s var(--ease); }
.lb-stack.in { opacity: 1; }
.lb-stack img { display: block; width: 100%; height: auto; }
.lb-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-loading[hidden] { display: none; }
.lb-loading span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--white); animation: lbspin 0.8s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .lb { padding: 0; }
  .lb-panel { height: 100%; border-radius: 0; border: 0; }
  .lb-count { display: none; }
  .lb-bar { padding: 10px 10px 10px 18px; }
}

/* ---------- light hero motion (CSS only, GPU-cheap) ---------- */
.shimmer {
  background: linear-gradient(95deg, #FFFFFF 0%, var(--ice) 25%, #8F7BFF 45%, #FF8FD0 55%, var(--ice) 75%, #FFFFFF 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.horizon::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border-top: 2px solid transparent;
  background: linear-gradient(90deg, transparent 44%, rgba(160,220,255,0.0) 46%, #FFFFFF 50%, rgba(255,143,208,0.9) 52%, transparent 56%) border-box;
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(140,180,255,0.9));
  animation: rim 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rim { 0% { background-position: 100% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 0% 0; opacity: 0; } }

/* ---------- light hero motion: CSS only, GPU transforms ---------- */
.hero .h1 .grad-text {
  background: linear-gradient(95deg, #FFFFFF 0%, var(--ice) 22%, #8F7BFF 44%, #FFFFFF 66%, var(--ice) 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- HERO: Keynote — near-black, one deep violet glow, crisp planet edge ---------- */
.hero { background: #030308; }
.hero .beam { display: none; }
.hero .glow-hero {
  width: 1100px; height: 700px; top: 6%;
  background: radial-gradient(closest-side, rgba(120, 110, 255, 0.55), rgba(80, 60, 220, 0.28) 45%, rgba(30, 20, 90, 0) 75%);
  animation: breathe 12s ease-in-out infinite;
}
.hero .horizon {
  background: #030308;
  border-top: 0.5px solid rgba(230, 225, 255, 0.95);
  box-shadow: 0 -6px 30px rgba(140, 130, 255, 0.45), 0 -70px 180px rgba(100, 80, 255, 0.35);
}
.hero .h1 .grad-text {
  background: linear-gradient(95deg, #FFFFFF 0%, #CFC8FF 30%, #FFFFFF 55%, #CFC8FF 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sheen 10s ease-in-out infinite;
}
@media (max-width: 760px) { .hero .glow-hero { width: 640px; height: 520px; } }
@media (max-width: 760px) {
  .hero { padding-bottom: 150px; }
  .hero .horizon { width: 1100px; height: 1100px; top: calc(100% - 70px); }
}

/* =========================================================
   CREATIVE LAB
   ========================================================= */
.lab-hero { padding-bottom: 40px; }
.lab-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.lab-index a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.85rem; color: #D7D8E0; transition: background .3s, color .3s; }
.lab-index a:hover { background: var(--white); color: var(--bg); }
.lab-sec { padding: 110px 0 0; scroll-margin-top: 90px; }
.lab-split { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 56px; align-items: center; }
.lab-copy, .lab-head > * { min-width: 0; }
.lab-copy .h2, .lab-head .h2 { margin-top: 18px; }
.lab-kicker { margin-top: 10px; font-size: 1.1rem; color: #CFC8FF; }
.lab-copy .lead { margin-top: 20px; }
.lab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.lab-head .lead { max-width: 460px; font-size: 1rem; }
.lab-points { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.lab-points li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lab-points b { font-weight: 600; }
.lab-points span { color: var(--muted); text-align: right; font-size: 0.92rem; }
.lab-note { margin-top: 18px; color: var(--muted); font-size: 0.8rem; }

/* phones */
.ph-stage { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; padding: 40px 0; isolation: isolate; }
.ph-stage::before { content: ""; position: absolute; z-index: -1; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(130, 100, 255, 0.45), transparent 75%); filter: blur(20px); }
.ph { position: relative; width: 236px; aspect-ratio: 9 / 19.5; border-radius: 38px; padding: 16px 16px 14px; display: flex; flex-direction: column; background: linear-gradient(180deg, #0D0C14, #08080C); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), inset 0 0 0 5px #000, inset 0 0 0 6px rgba(255,255,255,0.08); overflow: hidden; flex-shrink: 0; }
.ph:first-child { transform: translateX(30px) rotate(-6deg) scale(0.9); opacity: 0.85; }
.ph:last-child { transform: translateX(-30px) rotate(6deg) scale(0.9); opacity: 0.85; }
.ph-mid { z-index: 2; transform: translateY(-14px); }
.ph-status { display: flex; justify-content: space-between; font-size: 0.66rem; font-weight: 600; padding: 2px 8px 0; }
.ph-sig { display: flex; gap: 2px; align-items: flex-end; }
.ph-sig i { width: 3px; background: #fff; border-radius: 1px; }
.ph-sig i:nth-child(1) { height: 4px; } .ph-sig i:nth-child(2) { height: 6px; } .ph-sig i:nth-child(3) { height: 8px; }
.ob-hdr { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 0.72rem; color: #A9A8B8; }
.ob-hdr b { color: #fff; }
.ob-hdr i { width: 5px; height: 5px; border-radius: 50%; background: #8E7BFF; }
.ob-hdr i.live { background: #4AD07D; box-shadow: 0 0 8px #4AD07D; }
.ob-hdr span { margin-left: auto; }
.ob-greet { margin-top: 14px; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
.ob-greet.sm { font-size: 1.05rem; }
.ob-orb { position: relative; width: 120px; height: 120px; margin: 28px auto 14px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #D9CCFF 14%, #9A6BFF 40%, #5A23E0 70%, #1C0B5C 100%); box-shadow: 0 0 40px 6px rgba(140, 100, 255, 0.55), 0 0 90px 20px rgba(100, 60, 255, 0.25); animation: orbBreath 5s ease-in-out infinite; }
.ob-orb i { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(180, 160, 255, 0.35); }
.ob-orb.talk { width: 140px; height: 140px; margin-top: 34px; animation-duration: 1.6s; }
@keyframes orbBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ob-hint { text-align: center; font-size: 0.62rem; color: #8A8A9C; }
.ob-pill { align-self: center; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: 0.72rem; }
.ob-bar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-size: 0.68rem; color: #9C9CAE; }
.ob-bar b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-size: 0.72rem; }
.ob-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 50px; margin-top: 10px; }
.ob-wave i { width: 4px; height: var(--h); max-height: 100%; border-radius: 2px; background: linear-gradient(180deg, #CFC8FF, #7A4DFF); transform-origin: center; animation: wv 1.2s ease-in-out infinite; }
.ob-wave i:nth-child(odd) { animation-delay: -0.4s; } .ob-wave i:nth-child(3n) { animation-delay: -0.8s; }
@keyframes wv { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.ob-quote { margin-top: 12px; text-align: center; font-size: 0.78rem; line-height: 1.45; color: #E2E0F0; }
.ob-card { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: grid; gap: 2px; }
.ob-card small { font-size: 0.6rem; color: #9C9CAE; letter-spacing: 0.04em; }
.ob-card b { font-size: 0.76rem; font-weight: 600; }
.ob-card.warm { border-color: rgba(142, 123, 255, 0.6); background: rgba(142, 123, 255, 0.12); }
.ob-reply { margin-top: 12px; font-size: 0.72rem; color: #CFC8FF; }

/* AI Orbit fan */
.ao-fan { position: relative; height: 470px; isolation: isolate; }
.ao-fan::before { content: ""; position: absolute; z-index: -1; inset: 15% 20%; background: radial-gradient(closest-side, rgba(255, 111, 181, 0.25), rgba(122, 77, 255, 0.2) 50%, transparent 75%); filter: blur(30px); }
.ao-card { position: absolute; left: 50%; top: 30px; width: 260px; aspect-ratio: 4 / 5; margin-left: -130px; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 90% at 100% 0%, var(--b), transparent 55%), var(--a); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 30px 70px -25px rgba(0,0,0,0.85); transform: translateX(var(--x)) rotate(var(--r)); transition: transform 0.6s var(--ease); }
.ao-fan:hover .ao-card { transform: translateX(calc(var(--x) * 1.12)) rotate(calc(var(--r) * 1.2)) translateY(-6px); }
.ao-top { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; }
.ao-orb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #B9A2FF 35%, #5A23E0 80%); box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.ao-top em { margin-left: auto; font-style: normal; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,0.25); }
.ao-card h5 { margin-top: auto; font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.ao-foot { display: flex; gap: 8px; margin-top: 18px; }
.ao-foot span { flex: 1; text-align: center; padding: 9px; border-radius: 999px; font-size: 0.72rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); }
.ao-foot span:last-child { background: #fff; color: #000; font-weight: 600; }

/* CRM */
.cr-app { display: grid; grid-template-columns: 200px 1fr; min-height: 460px; background: #0B0C12; }
.cr-side { padding: 22px 18px; border-right: 1px solid var(--line); }
.cr-logo { font-size: 1.05rem; font-weight: 300; letter-spacing: -0.02em; }
.cr-logo em { font-style: normal; color: #C9A46A; }
.cr-side nav { display: grid; gap: 4px; margin-top: 26px; font-size: 0.86rem; color: var(--muted); }
.cr-side nav span { padding: 9px 12px; border-radius: 10px; }
.cr-side nav .on { background: rgba(255,255,255,0.07); color: #fff; }
.cr-main { padding: 22px 26px; min-width: 0; }
.cr-top { display: flex; justify-content: space-between; align-items: center; }
.cr-top h4 { font-size: 1.2rem; }
.cr-btn { padding: 9px 16px; border-radius: 999px; background: #fff; color: #000; font-size: 0.8rem; font-weight: 600; }
.cr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.cr-kpis div { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.cr-kpis small { color: var(--muted); font-size: 0.74rem; }
.cr-kpis b { display: block; font-size: 1.9rem; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cr-kpis b em { font-style: normal; font-size: 1rem; color: var(--muted); }
.cr-kpis i { display: block; height: 4px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, #7FE7FF, #9B7BFF var(--w), rgba(255,255,255,0.08) var(--w)); }
.cr-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.88rem; }
.cr-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.cr-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.cr-table td b { display: block; font-weight: 600; }
.cr-table td small { color: var(--muted); font-size: 0.78rem; }
.cr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); }
.cr-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bx { position: relative; border-radius: 24px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #0E0F18, #08080D); padding: 26px; overflow: hidden; min-width: 0; }
.bx > small { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.bx-icons { grid-column: span 3; }
.bx-type { grid-column: span 3; display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: center; }
.bx-type > small { grid-column: 1 / -1; }
.bx-ui { grid-column: span 2; }
.bx-flow { grid-column: span 4; }
.bx-grad { grid-column: span 3; }
.bx-flowchart { grid-column: span 3; }
.bx-posts { grid-column: span 6; }
.lb-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lb-icon { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s; }
.lb-icon:hover { transform: translateY(-4px); border-color: rgba(155, 123, 255, 0.6); }
.lb-icon svg { width: 34px; height: 34px; }
.lb-icon span { font-size: 0.74rem; color: #C9CAD3; }
.ty-big { font-size: clamp(6rem, 12vw, 9rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; background: linear-gradient(160deg, #fff, #CFC8FF 50%, #FF8FC8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ty-scale { display: grid; gap: 6px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; min-width: 0; }
.ty-scale span:nth-child(3) { font-weight: 400; color: #C9CAD3; letter-spacing: 0; }
.ty-cap { font-size: 0.72rem !important; letter-spacing: 0.18em !important; color: var(--muted); font-weight: 500; }
.ui-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ui-tag { padding: 5px 12px; border-radius: 999px; font-size: 0.74rem; background: rgba(74, 208, 125, 0.14); color: #4AD07D; border: 1px solid rgba(74, 208, 125, 0.4); }
.ui-toggle { width: 44px; height: 26px; border-radius: 999px; background: linear-gradient(90deg, #7A4DFF, #FF6FB5); position: relative; }
.ui-toggle i { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.ui-input { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.84rem; color: var(--muted); }
.ui-input b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.ui-slider { position: relative; height: 4px; border-radius: 4px; margin-top: 22px; background: rgba(255,255,255,0.1); }
.ui-slider::before { content: ""; position: absolute; inset: 0 35% 0 0; border-radius: 4px; background: linear-gradient(90deg, #7FE7FF, #9B7BFF); }
.ui-slider i { position: absolute; left: 65%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(155, 123, 255, 0.35); }
.flow { width: 100%; height: auto; display: block; }
.flow .fl { stroke-dasharray: 60 400; animation: flowdash 3.5s linear infinite; }
.flow .fl:nth-of-type(2) { animation-delay: -1.2s; } .flow .fl:nth-of-type(3) { animation-delay: -2.4s; }
@keyframes flowdash { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
.gr-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gr-list div { aspect-ratio: 16 / 10; border-radius: 16px; background: var(--g); padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; }
.gr-list b { font-size: 1rem; }
.gr-list span { font-size: 0.74rem; opacity: 0.85; }
.fc { position: relative; height: 210px; }
.fc svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(155, 123, 255, 0.6)); }
.fc .n { position: absolute; z-index: 1; padding: 12px 18px; border-radius: 12px; background: #11121B; border: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem; font-weight: 500; }
.fc .n1 { left: 0; top: 30px; } .fc .n2 { left: 55%; top: 30px; } .fc .n3 { left: 55%; top: 128px; } .fc .n4 { left: 8%; top: 128px; background: linear-gradient(135deg, #7A4DFF, #FF6FB5); border-color: transparent; }
.lp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp { aspect-ratio: 4 / 5; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.14); overflow: hidden; }
.lp img { height: 28px; width: auto; }
.lp h5 { margin-top: auto; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.lp span { margin-top: 14px; font-size: 0.78rem; opacity: 0.75; }
.lp-1 { background: radial-gradient(90% 70% at 0% 100%, #FFB38A 0%, #F07AC5 25%, #8E36F0 55%, transparent 80%), #0A0718; }
.lp-2 { background: radial-gradient(closest-side at 50% 40%, rgba(120,110,255,.6), transparent 80%), #050509; }
.lp-3 { background: linear-gradient(160deg, #13101F, #07070B); }
.lp-3 h5 { background: linear-gradient(95deg, #fff, #CFC8FF, #FF8FC8); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1000px) {
  .lab-split { grid-template-columns: 1fr; }
  .bento > .bx { grid-column: span 6; }
}
@media (max-width: 700px) {
  .ph { width: 190px; }
  .ph:first-child, .ph:last-child { display: none; }
  .ph-mid { transform: none; }
  .ao-fan { height: 400px; }
  .ao-card { width: 200px; margin-left: -100px; transform: translateX(calc(var(--x) * 0.28)) rotate(var(--r)); }
  .ao-card h5 { font-size: 1.2rem; }
  .cr-app { grid-template-columns: 1fr; }
  .cr-side { display: none; }
  .cr-kpis { grid-template-columns: repeat(2, 1fr); }
  .lb-icons { grid-template-columns: repeat(4, 1fr); }
  .bx-type { grid-template-columns: 1fr; }
  .lp-row { grid-template-columns: 1fr; }
  .lp { aspect-ratio: 4 / 3; }
  .fc .n { font-size: 0.74rem; padding: 9px 12px; }
}
.lab-sec { overflow-x: clip; }
.ao-card { width: 240px; margin-left: -120px; }
.ao-card:nth-child(1) { --x: -330px !important; } .ao-card:nth-child(2) { --x: -110px !important; } .ao-card:nth-child(3) { --x: 110px !important; } .ao-card:nth-child(4) { --x: 330px !important; }
@media (max-width: 700px) { .ao-card { width: 200px; margin-left: -100px; transform: translateX(calc(var(--x) * 0.22)) rotate(var(--r)); } }

/* ---------- Lab: brand world (glass + waves) ---------- */
.bw { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 140px; }
.bw-wave { position: absolute; z-index: -2; left: -10%; right: -10%; height: 520px; border-radius: 50%; pointer-events: none; }
.bw-wave.t { top: -360px; background: radial-gradient(60% 60% at 30% 70%, rgba(255,160,130,.55), transparent 70%), radial-gradient(50% 60% at 60% 75%, rgba(170,60,220,.55), transparent 70%), radial-gradient(45% 60% at 88% 70%, rgba(40,190,220,.5), transparent 70%); filter: blur(10px); }
.bw-wave.b { bottom: -330px; background: radial-gradient(45% 60% at 10% 30%, rgba(40,190,220,.5), transparent 70%), radial-gradient(55% 60% at 45% 25%, rgba(140,60,230,.55), transparent 70%), radial-gradient(50% 60% at 85% 30%, rgba(255,150,120,.5), transparent 70%); filter: blur(10px); }
.bw .container { position: relative; }
.bw-head { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: 64px; }
.bw-head .lead { max-width: 560px; }
.bw-spark { font-size: 1.2rem; }
.bw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; z-index: 1; }
.bw-card { position: relative; min-height: 360px; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); min-width: 0; }
.bw-card h3 { font-size: 1.35rem; margin-top: auto; }
.bw-card p { color: #B9BAC4; font-weight: 300; line-height: 1.6; font-size: 0.92rem; margin-top: 10px; }
.bw-n { position: absolute; right: 24px; top: 22px; font-size: 1.4rem; color: rgba(255,255,255,0.28); font-variant-numeric: tabular-nums; }
.bw-logo img { width: 100%; max-width: 230px; height: auto; }
.bw-dots { display: flex; }
.bw-dots i { width: 46px; height: 46px; border-radius: 50%; background: var(--c); margin-right: -12px; border: 2px solid #0B0B12; }
.bw-type { font-size: 5rem; font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.bw-voice { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; background: linear-gradient(95deg, #fff, #CFC8FF, #FF8FC8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass { position: absolute; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 40%, rgba(160,200,255,0.25) 70%, rgba(255,255,255,0.6)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)); animation: glassFloat 8s ease-in-out infinite; }
.glass.g1 { width: 90px; height: 170px; left: -20px; bottom: -60px; clip-path: polygon(30% 0, 100% 10%, 70% 100%, 0 90%); transform: rotate(-18deg); }
.glass.g2 { width: 150px; height: 150px; left: 52%; bottom: -90px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); animation-delay: -3s; }
.glass.g3 { width: 160px; height: 140px; right: -30px; bottom: -40px; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: -5s; }
@keyframes glassFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* posters */
.pz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pz { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; isolation: isolate; padding: 9%; display: flex; }
.pz-arc { position: absolute; z-index: -1; border-radius: 50%; border: 54px solid var(--arc); opacity: 0.55; }
.pz-arc.a1 { width: 420px; height: 420px; right: -170px; top: -230px; }
.pz-arc.a2 { width: 380px; height: 380px; left: -200px; bottom: -220px; }
.pz-1 { --arc: #8A2BE2; background: #1C0730; }
.pz-2 { --arc: #3A4DF0; background: #070A2A; }
.pz-3 { --arc: #E0539A; background: #230615; }
.pz-card { flex: 1; display: flex; flex-direction: column; border-radius: 22px; padding: 26px; border: 1.5px solid rgba(255,255,255,0.28); background: radial-gradient(90% 80% at 30% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 70%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 40px rgba(255,255,255,0.04); min-width: 0; }
.pz-1 .pz-card { background: radial-gradient(90% 80% at 40% 40%, rgba(190,60,230,0.55), rgba(90,20,140,0.25) 70%); }
.pz-2 .pz-card { background: radial-gradient(90% 80% at 40% 40%, rgba(80,110,255,0.55), rgba(40,30,140,0.25) 70%); }
.pz-3 .pz-card { background: radial-gradient(90% 80% at 40% 40%, rgba(240,90,160,0.55), rgba(130,20,80,0.25) 70%); }
.pz-top { display: flex; justify-content: space-between; align-items: center; }
.pz-top img { height: 26px; width: auto; }
.pz-arrow { font-size: 1.4rem; }
.pz h5 { margin-top: auto; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.pz-meta { margin-top: 14px; font-size: 0.86rem; letter-spacing: 0.04em; opacity: 0.85; }
.pz-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; font-size: 0.72rem; }
.pz-foot span { opacity: 0.75; }
.pz-foot b { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); font-weight: 500; white-space: nowrap; }
@media (max-width: 1000px) { .bw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .bw-grid, .pz-row { grid-template-columns: 1fr; }
  .bw-card { min-height: 260px; }
  .glass { display: none; }
  .pz-foot { flex-direction: column; align-items: flex-start; }
}
.glass { z-index: 0; }
.bw-grid { z-index: 1; }
.glass.g1 { bottom: -110px; left: -10px; }
.glass.g2 { bottom: -150px; }
.glass.g3 { bottom: -120px; right: -10px; }
.bw-logo, .bw-dots, .bw-type, .bw-voice { margin-top: 34px; }

/* ---------- light travelling along the planet edge (follows the curve exactly) ---------- */
.horizon .orbit { position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; animation: edgeRun 8s cubic-bezier(.45,.05,.35,1) infinite; will-change: transform; }
.horizon .orbit::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 318deg, rgba(58,123,255,0) 318deg, #3A7BFF 332deg, #8A4DFF 343deg, #FF5FC8 352deg, #FFC2EC 355deg, transparent 356deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px));
}
@keyframes edgeRun { 0% { transform: rotate(-52deg); opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 72% { transform: rotate(56deg); opacity: 0; } 100% { transform: rotate(56deg); opacity: 0; } }
@media (max-width: 760px) { @keyframes edgeRun { 0% { transform: rotate(-34deg); opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 72% { transform: rotate(38deg); opacity: 0; } 100% { transform: rotate(38deg); opacity: 0; } } }

.hero .horizon { border-top-color: rgba(220, 215, 255, 0.55); }