.hero-motion .net path {
  fill: none !important;
}

/* One-second branded entrance. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 48%, rgba(195, 167, 77, .11), transparent 30%), #171816;
  opacity: 1;
  transition: opacity .18s ease;
}

.site-intro.leaving {
  opacity: 0;
  pointer-events: none;
}

.intro-ring {
  position: relative;
  width: 300px;
  height: 330px;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.intro-ring::before,
.intro-ring::after {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(195, 167, 77, .2);
  border-radius: 50%;
  animation: introRing .9s ease-out both;
}

.intro-ring::after {
  width: 330px;
  height: 330px;
  border-color: rgba(165, 236, 255, .08);
  animation-delay: .08s;
}

.intro-logo-crop {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 300px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  animation: introFlip 1.45s cubic-bezier(.2, .75, .25, 1) both;
  backface-visibility: hidden;
}

.intro-logo-crop img {
  position: absolute;
  width: 400px;
  height: 400px;
  max-width: none;
  left: -50px;
  top: -50px;
  object-fit: contain;
  clip-path: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(195, 167, 77, .16));
}

@keyframes introFlip {
  0% { opacity: 0; transform: rotateY(-105deg) scale(.82); }
  45% { opacity: 1; transform: rotateY(12deg) scale(1.02); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

@keyframes introRing {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .8; transform: scale(1); }
}

/* Learning journey: match the original open alternating timeline. */
#learning .timeline {
  max-width: 820px;
  counter-reset: learning-stage;
}

#learning .timeline article,
#learning .timeline article:nth-child(even) {
  counter-increment: learning-stage;
  min-height: 112px;
  margin-bottom: 8px;
  padding: 12px 0 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#learning .timeline article:nth-child(odd) {
  text-align: right;
}

#learning .timeline article:nth-child(even) {
  text-align: left;
}

#learning .timeline article::after,
#learning .timeline article:nth-child(even)::after {
  content: counter(learning-stage);
  top: 20px;
  width: 30px;
  height: 30px;
  border: 0;
  display: grid;
  place-items: center;
  color: #1d1e1c;
  background: #c3a74d;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

#learning .timeline article:nth-child(odd)::after {
  right: -57px;
}

#learning .timeline article:nth-child(even)::after {
  left: -57px;
}

#learning .timeline article:nth-child(even)::after {
  background: #8dd6e8;
}

#learning .timeline article small {
  display: block;
  color: #9f9a8e;
  font-size: 11px;
  margin-bottom: 5px;
}

#learning .timeline article h3 {
  margin: 0 0 6px;
  color: #c3a74d;
  font-size: 16px;
}

#learning .timeline article p {
  color: #e7e2d7;
}

#learning .timeline .result {
  color: #777369;
  font-size: 11px;
}

@media (max-width: 650px) {
  #learning .timeline article,
  #learning .timeline article:nth-child(even),
  #learning .timeline article:nth-child(odd) {
    min-height: 0;
    margin: 0 0 18px 36px;
    padding: 4px 0 20px;
    text-align: left;
  }

  #learning .timeline article::after,
  #learning .timeline article:nth-child(even)::after,
  #learning .timeline article:nth-child(odd)::after {
    left: -43px;
    right: auto;
    top: 4px;
  }
}

/* Customer hero revision: lightweight rotating diamond instead of dashboard. */
html,
body {
  overflow-x: clip;
}

.hero-warning {
  max-width: 620px !important;
  margin: 13px 0 0 !important;
  color: #777369 !important;
  font-size: 11px !important;
  line-height: 1.75 !important;
}

.diamond-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 43%, rgba(195, 167, 77, .15), transparent 31%),
    radial-gradient(ellipse at 50% 45%, #1b1914 0, #0c0c0d 68%);
  box-shadow: 0 42px 86px -35px rgba(0, 0, 0, .85);
}

.diamond-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(165, 236, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 236, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}

.diamond-stage {
  position: relative;
  width: min(370px, 84vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 1050px;
}

.orbit {
  position: absolute;
  width: 82%;
  height: 82%;
  border: 1px solid rgba(195, 167, 77, .25);
  border-radius: 50%;
  animation: orbitPulse 5.5s ease-in-out infinite;
}

.orbit-two {
  width: 62%;
  height: 62%;
  border-color: rgba(165, 236, 255, .18);
  animation-delay: -2.2s;
}

.diamond-spinner {
  position: relative;
  width: 62%;
  height: 62%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: diamondTurn 8s cubic-bezier(.45, 0, .55, 1) infinite;
  filter: drop-shadow(0 0 18px rgba(195, 167, 77, .22));
}

.diamond-frame {
  position: absolute;
  inset: 8%;
  border: 5px solid #d5d3cf;
  transform: rotate(45deg);
  box-shadow:
    0 0 15px rgba(255, 255, 255, .2),
    inset 0 0 15px rgba(255, 255, 255, .1);
}

.diamond-frame.inner {
  inset: 25%;
  border-color: #c3a74d;
  border-width: 6px;
  box-shadow:
    0 0 18px rgba(195, 167, 77, .5),
    inset 0 0 15px rgba(195, 167, 77, .25);
}

.bitcoin-mark {
  position: relative;
  z-index: 2;
  color: #d4b44d;
  font-family: Georgia, serif;
  font-size: clamp(54px, 6vw, 82px);
  text-shadow: 0 0 18px rgba(195, 167, 77, .55);
}

.diamond-visual > p {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 27px;
  margin: 0;
  color: #f2efe6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  text-align: center;
}

@keyframes diamondTurn {
  0%, 10% { transform: rotateY(-22deg) rotateX(4deg); }
  45%, 55% { transform: rotateY(202deg) rotateX(-4deg); }
  90%, 100% { transform: rotateY(338deg) rotateX(4deg); }
}

@keyframes orbitPulse {
  0%, 100% { opacity: .32; transform: scale(.94); }
  50% { opacity: .75; transform: scale(1.04); }
}

/* Responsive navigation keeps the logo visible and moves links into a menu. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(195, 167, 77, .32);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 99px;
  background: #d7d2c6;
  transition: transform .22s ease, opacity .22s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.footer-main {
  grid-template-columns: 1.5fr repeat(3, 1fr);
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }

  .nav-wrap nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 18px;
    right: 18px;
    display: grid;
    gap: 0;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    border: 1px solid rgba(195, 167, 77, .2);
    border-radius: 13px;
    background: rgba(24, 25, 23, .97);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  .nav-wrap nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-wrap nav a {
    display: block;
    padding: 13px 15px;
    border-radius: 8px;
  }

  .nav-wrap nav a::after { display: none; }
  .nav-wrap nav a:hover { background: rgba(195, 167, 77, .08); }
  .diamond-visual { min-height: 450px; }
}

@media (max-width: 650px) {
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 9px 11px; font-size: 11px; }
  .diamond-visual { min-height: 390px; padding: 18px; }
  .diamond-stage { width: min(310px, 82vw); }
  .diamond-visual > p { bottom: 20px; font-size: 9px; letter-spacing: .16em; }
  .hero-warning { font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .diamond-spinner,
  .orbit { animation: none !important; }
}

/* Teacher portraits and verified experience. */
.teacher-grid .teacher-card {
  padding: 0;
  overflow: hidden;
}

.teacher-photo {
  display: block;
  width: auto;
  max-width: calc(100% - 48px);
  height: 360px;
  margin: 24px auto 0;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(201, 170, 76, .18);
  border-radius: 13px;
  background: #171816;
  filter: saturate(.9) contrast(1.02);
}

.teacher-card:nth-child(2) .teacher-photo {
  object-position: center;
}

.teacher-content {
  padding: 25px 28px 29px;
}

.teacher-content .teacher-head {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.teacher-content .teacher-head h3 {
  font-size: 22px;
}

.teacher-experience {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 19px 0 0;
  list-style: none;
}

.teacher-experience li {
  position: relative;
  padding-left: 18px;
  color: #cbc7bd;
  font-size: 13px;
  line-height: 1.7;
}

.teacher-experience li::before {
  content: '';
  position: absolute;
  top: .72em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgba(201, 170, 76, .45);
}

.independent-section .section-head,
#education .section-head {
  max-width: 800px;
}

.independent-section .section-head h2,
#education .section-head h2 {
  font-size: clamp(26px, 2.45vw, 34px);
  letter-spacing: -.015em;
}

@media (max-width: 650px) {
  .teacher-photo {
    width: auto;
    max-width: calc(100% - 36px);
    height: 330px;
    margin-top: 18px;
  }

  .teacher-content {
    padding: 22px;
  }
}

/* Dashboard follows the pointer with a restrained partial 3D turn. */
.hero-wrap {
  perspective: 1200px;
}

.dashboard {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease-out, border-color .25s ease, box-shadow .25s ease;
}

.dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .42;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(165, 236, 255, .14), transparent 38%);
  transition: opacity .2s ease;
}

.dashboard:hover {
  border-color: rgba(165, 236, 255, .2);
  box-shadow: 0 42px 78px -34px rgba(0, 0, 0, .8), 0 0 34px rgba(87, 208, 235, .06);
}

.dashboard > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 650px), (hover: none) {
  .dashboard {
    transform: none !important;
  }

  .dashboard::before {
    display: none;
  }
}

/* Original navigation proportions and quieter integrated tabs. */
.original-brand img {
  width: auto;
  height: 38px;
  max-width: 240px;
  object-fit: contain;
}

.nav-wrap nav {
  gap: 29px;
}

.nav-wrap nav a {
  position: relative;
  padding: 27px 0 25px;
  color: #cfc9ba;
  font-size: 14px;
  font-weight: 500;
}

.nav-wrap nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 17px;
  height: 1px;
  background: linear-gradient(90deg, #c3a74d, #a5ecff);
  transition: left .22s ease, right .22s ease;
}

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

/* Subtle cybertech network: solid hairlines, small nodes, low-light coins. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(165, 236, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 236, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0, transparent 76%);
}

.hero-motion svg {
  opacity: .38;
  filter: drop-shadow(0 0 7px rgba(87, 216, 244, .12));
}

.hero-motion .net {
  stroke-dasharray: none !important;
  animation: none;
}

.hero-motion .net path {
  fill: none !important;
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  stroke-dasharray: none !important;
  animation: techLine 5.5s ease-in-out infinite alternate;
}

.hero-motion .cyan {
  stroke: rgba(80, 220, 247, .42);
  fill: rgba(80, 220, 247, .72);
}

.hero-motion .violet {
  stroke: rgba(135, 91, 245, .3);
  fill: rgba(135, 91, 245, .64);
}

.hero-motion .net circle {
  animation-duration: 4.6s;
  opacity: .72;
}

.motion-coin {
  width: 66px;
  height: 66px;
  opacity: .14;
  filter: saturate(.85) drop-shadow(0 0 16px rgba(195, 167, 77, .18));
}

.motion-coin.eth {
  filter: saturate(.8) drop-shadow(0 0 16px rgba(110, 160, 255, .2));
}

.scan {
  opacity: .42;
}

@keyframes techLine {
  from { opacity: .45; }
  to { opacity: .9; }
}

#team .section-head {
  max-width: 920px;
}

#team .section-head h2 {
  font-size: clamp(27px, 2.45vw, 35px);
  white-space: nowrap;
}

.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.footer-main .footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  padding: 5px 10px 5px 6px;
  color: #c5c1b6;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.footer-main .footer-social a:hover {
  color: #fff;
  border-color: rgba(201, 170, 76, .5);
  transform: translateY(-2px);
}

.social-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  border-radius: 7px;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
}

.social-icon img {
  width: 14px;
  height: 14px;
  display: block;
  filter: brightness(0) invert(1);
}

.social-line {
  background: #06c755;
}

.social-instagram {
  background: linear-gradient(135deg, #7c3aed 5%, #e1306c 52%, #f9ce34);
}

.social-discord {
  background: #5865f2;
}

@media (max-width: 800px) {
  #team .section-head h2 {
    white-space: normal;
  }
}

@media (max-width: 650px) {
  .original-brand img {
    height: 31px;
    max-width: 190px;
  }

  .hero-motion svg {
    opacity: .28;
  }
}