/* ============================================================
   Vietcomputing prototype — shared hover / animation / slider
   Reference: together.ai interaction patterns
   ============================================================ */

/* -----  BRAND WORDMARK FONT (Outfit 700)  ----- */
.brand-wordmark {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-wordmark-banner {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

/* -----  BRAND V LOGO (inline SVG sizing)  ----- */
.brand-v {
  display: inline-block;
  flex-shrink: 0;
}

/* -----  GLOBAL TRANSITIONS  ----- */
* { transition-property: background-color, color, border-color, opacity, transform, box-shadow; transition-duration: .25s; transition-timing-function: cubic-bezier(.2,.7,.2,1); }

/* -----  BUTTON HOVER  ----- */
.btn-primary, .btn-mint, .btn-white, .btn-ghost-dark, .btn-outline {
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.btn-primary:hover     { background: #1a1a2e !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(1,1,32,0.18); }
.btn-mint:hover        { background: #b0f0f4 !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200,246,249,0.45); }
.btn-white:hover       { background: #f0f0f0 !important; transform: translateY(-1px); }
.btn-ghost-dark:hover  { background: #36364a !important; transform: translateY(-1px); border-color: #bdbbff; }
.btn-outline:hover     { background: #f7f7f7 !important; border-color: #000 !important; transform: translateY(-1px); }

/* arrow nudge for buttons containing → */
.btn-primary, .btn-mint, .btn-white, .btn-ghost-dark, .btn-outline { gap: 8px; }
.btn-primary span.arrow, .btn-mint span.arrow, .btn-white span.arrow, .btn-ghost-dark span.arrow, .btn-outline span.arrow {
  transition: transform .25s ease;
}
.btn-primary:hover span.arrow, .btn-mint:hover span.arrow, .btn-white:hover span.arrow, .btn-ghost-dark:hover span.arrow, .btn-outline:hover span.arrow {
  transform: translateX(3px);
}

/* -----  CARD HOVER (light)  ----- */
.card {
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.card:hover {
  border-color: #000;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(1,1,32,0.08);
}

/* -----  CARD HOVER (dark research)  ----- */
.card-dark {
  transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
  position: relative;
  overflow: hidden;
}
.card-dark::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(189,187,255,0.08), transparent 40%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.card-dark:hover { border-color: #bdbbff; transform: translateY(-3px); }
.card-dark:hover::before { opacity: 1; }

/* card-cta reveal */
.card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; text-transform: uppercase; font-size: 11px; letter-spacing: 0.055em; font-weight: 500;
  color: #c8f6f9;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  margin-top: 12px;
}
.card-dark:hover .card-cta { opacity: 1; transform: translateY(0); }
.card-cta::after { content: '→'; transition: transform .25s ease; }
.card-dark:hover .card-cta::after { transform: translateX(3px); }

/* card connector accent (between adjacent research cards in a row) */
.card-row { position: relative; }
.card-row > .card-dark:not(:last-child)::after {
  content: '';
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 2px; background: #bdbbff; opacity: .6;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 1023px) { .card-row > .card-dark::after { display: none; } }

/* -----  ANIMATED UNDERLINE LINKS  ----- */
.link-anim {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  transition: color .2s ease;
}
.link-anim::after {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.link-anim:hover::after { transform: scaleX(1); }

/* active nav link — persistent underline */
.link-anim.active::after { transform: scaleX(1); background: #bdbbff; height: 2px; }

/* arrow link (for "Read more →" style) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none !important;
  transition: color .2s ease, gap .25s ease;
}
.link-arrow::after { content: '→'; transition: transform .25s ease; display: inline-block; }
.link-arrow:hover { gap: 10px; }
.link-arrow:hover::after { transform: translateX(2px); }

/* -----  NAV LOGO HOVER  ----- */
.nav-logo { transition: opacity .2s ease; }
.nav-logo:hover { opacity: 0.85; }
.nav-logo > div:first-child { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.nav-logo:hover > div:first-child { transform: rotate(45deg); }

/* -----  PARTNER MARQUEE  ----- */
.marquee {
  overflow: hidden;
  padding: 12px 0; /* room for hover lift without clipping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  height: 56px; min-width: 180px;
  padding: 0 28px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 17px;
  color: #999;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: #fff;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.partner-logo:hover { color: #000; border-color: #000; box-shadow: 0 6px 20px rgba(1,1,32,0.08); }

/* -----  FIXED TRANSPARENT NAV (over hero video)  ----- */
html { scroll-padding-top: 72px; }

nav.site-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(1,1,32,0.20) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #fff;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
nav.site-nav .nav-logo span { transition: color .3s ease; }
nav.site-nav .link-anim { color: #fff; }

nav.site-nav.scrolled {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: #ebebeb !important;
  box-shadow: 0 2px 24px rgba(1,1,32,0.10);
  color: #000;
}
nav.site-nav.scrolled .nav-logo span { color: #000; }
nav.site-nav.scrolled .link-anim { color: #000; }
nav.site-nav.scrolled .btn-white { background: #000 !important; color: #fff !important; border: 1px solid #000; }
nav.site-nav.scrolled .btn-white:hover { background: #1a1a2e !important; }
nav.site-nav.scrolled .btn-mint { background: #c8f6f9 !important; color: #000 !important; }
nav.site-nav.scrolled #nav-toggle { color: #000; }

nav.site-nav.dark-static {
  background: rgba(1,1,32,0.97) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 24px rgba(1,1,32,0.30);
  color: #fff;
}
nav.site-nav.dark-static .nav-logo span { color: #fff; }
nav.site-nav.dark-static .link-anim { color: rgba(255,255,255,0.85); }
nav.site-nav.dark-static .link-anim:hover { color: #fff; }
nav.site-nav.dark-static .btn-white { background: #fff !important; color: #000 !important; border: 1px solid rgba(255,255,255,0.2); }
nav.site-nav.dark-static .btn-white:hover { background: #f0f0f0 !important; }

/* -----  MID-PAGE ANIMATED DARK SECTION  ----- */
.section-anim-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* -----  PAGE HERO (compact, inner pages)  ----- */
.hero-page {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 300px;
}

/* -----  HERO FULL-BLEED VIDEO  ----- */
.hero-full {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-bg video,
.hero-bg .video-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-bg .video-placeholder { background: #010120; z-index: 0; }
.hero-bg video { z-index: 1; opacity: 0; transition: opacity 1s ease; }

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at top right, rgba(189,187,255,0.10), transparent 50%),
    linear-gradient(180deg, rgba(1,1,32,0.5) 0%, rgba(1,1,32,0.85) 100%);
  pointer-events: none;
}

.hero-content { position: relative; z-index: 2; }

.hero-watch {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.055em; font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.hero-watch:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }
.hero-watch .play-dot {
  width: 24px; height: 24px; border-radius: 9999px;
  background: rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; justify-content: center;
}

/* -----  STAT TILE V2 (Together AI style)  ----- */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  position: relative;
}
@media (min-width: 768px) { .stat-tile-row { grid-template-columns: repeat(3, 1fr); } }

.stat-tile-v2 {
  position: relative;
  border-radius: 4px;
  padding: 28px 28px 32px;
  display: flex; flex-direction: column;
  min-height: 280px;
  overflow: visible;
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat-tile-v2:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(1,1,32,0.10); }

.stat-tile-v2 .stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.055em;
  font-weight: 500;
  color: #000;
  width: fit-content;
  margin-bottom: auto;
}
.stat-tile-v2 .stat-number {
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 40px 0 12px;
}
.stat-tile-v2 .stat-desc {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(0,0,0,0.7);
}
.stat-tile-v2 .stat-desc a { color: #000; }

/* Periwinkle connector between adjacent tiles (desktop) — sits entirely inside the gap */
@media (min-width: 768px) {
  .stat-tile-row > .stat-tile-v2:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px; top: 50%;
    width: 8px; height: 3px;
    background: #bdbbff;
    transform: translateY(-50%);
    z-index: 3;
    border-radius: 2px;
  }
}

/* -----  FEATURE CARD V2 (tinted, no border)  ----- */
.feature-card {
  position: relative;
  background: #f4f4f6;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 28px;
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
  min-height: 260px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.feature-card.tint-cyan      { background: #e6f7f9; }
.feature-card.tint-lavender  { background: #ede9fc; }
.feature-card.tint-peach     { background: #fdeadd; }
.feature-card.tint-pink      { background: #fbe4f4; }
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(1,1,32,0.10);
}
.feature-card.tint-cyan:hover      { background: #d4f1f5; }
.feature-card.tint-lavender:hover  { background: #ddd5fa; }
.feature-card.tint-peach:hover     { background: #fbdcc5; }
.feature-card.tint-pink:hover      { background: #f6ceea; }
.feature-card .feature-icon {
  width: 44px; height: 44px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.feature-card:hover .feature-icon { transform: translateY(-2px) rotate(-3deg); }
.feature-card .feature-title {
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.feature-card .feature-desc {
  font-size: 14px; line-height: 1.5; color: #666;
  margin-top: auto;
}

/* -----  TEAM CARD COMPACT  ----- */
.team-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .team-grid-compact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid-compact { grid-template-columns: repeat(3, 1fr); } }

.team-card-compact {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  gap: 14px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.team-card-compact:hover {
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(1,1,32,0.07);
}
.team-card-compact .avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.team-card-compact .info { min-width: 0; flex: 1; }
.team-card-compact .info h3 {
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.2;
  margin-bottom: 2px;
}
.team-card-compact .info .role {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #999;
  margin-bottom: 8px;
  font-weight: 500;
}
.team-card-compact .info .meta {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.team-card-compact .info .meta .badge {
  font-size: 11px; padding: 2px 6px;
}

/* -----  PORTFOLIO SLIDER  ----- */
.portfolio-slider {
  position: relative;
}
.portfolio-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #ebebeb transparent;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.portfolio-track::-webkit-scrollbar { height: 6px; }
.portfolio-track::-webkit-scrollbar-track { background: transparent; }
.portfolio-track::-webkit-scrollbar-thumb { background: #ebebeb; border-radius: 3px; }
.portfolio-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(420px, 85vw);
  background: #fff; border: 1px solid #ebebeb; border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover { border-color: #000; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(1,1,32,0.08); }
.portfolio-card .thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.portfolio-card .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(1,1,32,0.3));
  opacity: 0; transition: opacity .3s ease;
}
.portfolio-card:hover .thumb::after { opacity: 1; }
.portfolio-card .thumb img,
.portfolio-card .thumb > div { transition: transform .5s cubic-bezier(.2,.7,.2,1); width:100%; height:100%; }
.portfolio-card:hover .thumb > div { transform: scale(1.05); }

.slider-controls { display: flex; gap: 8px; }
.slider-btn {
  width: 40px; height: 40px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-btn:hover { background: #f7f7f7; border-color: #000; }
.slider-btn:active { transform: scale(0.95); }

/* -----  HERO VIDEO  ----- */
.hero-video-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #fc4c02, #ef2cc1 50%, #bdbbff);
}
.hero-video-wrap video,
.hero-video-wrap .video-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video-wrap .video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,1,32,0.2), rgba(1,1,32,0.6));
  display: flex; align-items: flex-end;
  padding: 24px;
}
.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,0.25); }
.video-caption {
  font-family: 'JetBrains Mono', monospace; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.055em; font-weight: 500;
  color: #fff;
}

/* -----  STAT TILE HOVER  ----- */
.stat-tile { transition: transform .3s ease, box-shadow .3s ease; }
.stat-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(1,1,32,0.08); }

/* -----  FAQ DETAILS hover  ----- */
details.card-dark { cursor: pointer; }
details.card-dark summary { list-style: none; }
details.card-dark summary::-webkit-details-marker { display: none; }
details.card-dark summary > span { transition: transform .3s ease, color .2s ease; }
details.card-dark[open] summary > span { transform: rotate(45deg); color: #bdbbff; }

/* -----  SECTION FADE-IN ON SCROLL  ----- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----  BACK TO TOP  ----- */
.back-to-top {
  position: fixed;
  right: 24px; bottom: 88px;
  z-index: 45;
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #000;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.back-to-top:hover {
  background: #f4f4f4;
  border-color: #000;
  box-shadow: 0 8px 22px rgba(1,1,32,0.10);
}
@media (max-width: 767px) {
  .back-to-top { right: 16px; bottom: 24px; }
}

/* -----  MOBILE NAV DRAWER  ----- */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(1,1,32,0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.mobile-nav-overlay.open { display: block; }
.mobile-nav-panel {
  position: absolute;
  top: 64px; left: 0; right: 0;
  background: rgba(1,1,32,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
}
.mobile-nav-link {
  display: block;
  padding: 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  letter-spacing: -0.01em;
  transition: color .2s ease;
}
.mobile-nav-link:hover { color: #c8f6f9; }
.mobile-nav-cta {
  margin-top: 20px;
  justify-content: center;
}
@media (min-width: 768px) {
  .mobile-nav-overlay { display: none !important; }
}

/* -----  SUPPORT PROMISE TILES  ----- */
.promise-tile {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 28px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.promise-tile:hover {
  border-color: #000;
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(1,1,32,0.08);
}
.promise-tile .promise-num {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(90deg,#fc4c02,#ef2cc1,#bdbbff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -----  VALUE TILES (Mission / Vision / Core Values bold quote blocks)  ----- */
.value-tile {
  position: relative;
  border-radius: 8px;
  padding: 40px 32px 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  isolation: isolate;
}
.value-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(1,1,32,0.18);
}
.value-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 55%);
  z-index: 0;
  pointer-events: none;
}
.value-tile > * { position: relative; z-index: 1; }
.value-tile .quote-mark {
  position: absolute;
  top: -20px;
  right: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 220px;
  line-height: 1;
  color: rgba(255,255,255,0.10);
  pointer-events: none;
  z-index: 0;
}
.value-tile .value-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 20px;
}
.value-tile .value-headline {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.value-tile .value-sub {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
  margin-top: auto;
}
.value-tile.core-values .value-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* -----  CONTACT FORM (Web3Forms)  ----- */
.contact-form {
  display: grid;
  gap: 14px;
  padding: 28px;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.055em;
  font-weight: 500;
  color: #666;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #010120;
  transition: border-color .25s ease, box-shadow .25s ease;
  width: 100%;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #bbb; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #8E2CF1;
  box-shadow: 0 0 0 3px rgba(142,44,241,0.12);
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}
.contact-form button[type="submit"] {
  justify-self: start;
  cursor: pointer;
  border: none;
  margin-top: 4px;
}
.contact-form .botcheck { position: absolute; left: -9999px; }
.form-note {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* -----  ARTICLE PROSE STYLES  ----- */
.article {
  font-size: 17px;
  line-height: 1.65;
  color: #1a1a1a;
}
.article > * + * { margin-top: 1.1em; }
.article h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  color: #010120;
}
.article h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  color: #010120;
}
.article p { color: #333; }
.article a {
  color: #2E0C7D;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted rgba(46,12,125,0.3);
  transition: color .2s ease, border-color .2s ease;
}
.article a:hover {
  color: #8E2CF1;
  border-bottom-color: transparent;
}
.article a:active { color: #8E2CF1; }
.article ul, .article ol { padding-left: 1.4em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li + li { margin-top: 0.4em; }
.article li::marker { color: #8E2CF1; }
.article blockquote {
  border-left: 3px solid #8E2CF1;
  padding: 0.4em 1.2em;
  margin: 1.5em 0;
  background: #f7f5ff;
  border-radius: 0 4px 4px 0;
  color: #2E0C7D;
  font-style: italic;
}
.article strong { color: #010120; font-weight: 600; }
.article code {
  background: #f4f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  color: #2E0C7D;
}
.article .callout {
  background: #f4f4f6;
  border-radius: 4px;
  padding: 20px 24px;
  margin: 1.6em 0;
  border-left: 3px solid #bdbbff;
}
.article .callout.cyan { background: #e6f7f9; border-left-color: #c8f6f9; }
.article .callout.peach { background: #fdeadd; border-left-color: #fc4c02; }
.article hr {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 2.4em 0;
}

/* -----  RESPONSIVE  ----- */
@media (max-width: 767px) {
  .portfolio-card { width: 85vw; }
  .marquee-track { gap: 32px; animation-duration: 25s; }
}