:root {
  --exp3-ink: #000;
  --exp3-teal: #0f756e;
  --exp3-paper: #f2f5ed;
}

.exp-home--three {
  background: var(--exp3-ink);
}

.exp-home--three .header-area-2 .header-main {
  background: #000;
}

.exp3-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 150px 0 76px;
  overflow: hidden;
  color: var(--exp3-paper);
  background: var(--exp3-ink);
}

.exp3-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.exp3-hero__glow {
  display: none;
}

.exp3-hero__container { position: relative; }

.exp3-hero__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(242, 245, 237, 0.27);
  color: rgba(242, 245, 237, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.exp3-hero__top span:nth-child(2) { text-align: center; color: #76bdb6; }
.exp3-hero__top span:last-child { text-align: right; }
.exp3-hero__top--hidden { display: none; }

.exp3-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(460px, 1fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
  min-height: 610px;
}

.exp3-hero__statement > p {
  margin-bottom: 30px;
  color: #8bc8c2;
  font-size: 14px;
  line-height: 1.15;
}

.exp3-hero__statement h1 {
  margin: 0;
  color: var(--exp3-paper);
  font-family: var(--font_sequelsansromanbody), sans-serif;
  font-size: clamp(58px, 7.5vw, 135px);
  font-weight: 310;
  line-height: 0.79;
  letter-spacing: -0.09em;
  white-space: nowrap;
}

.exp3-hero__statement h1 em {
  color: var(--exp3-teal);
  font-family: var(--font_timesnow), serif;
  font-size: 0.96em;
  font-style: italic;
  font-weight: 400;
}

.exp3-hero__statement h1 > span {
  color: var(--exp3-teal);
}

.exp3-orbit {
  position: relative;
  display: grid;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-left: auto;
  place-items: center;
}

.exp3-orbit__eye {
  position: relative;
  z-index: 2;
  width: 78%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(242, 245, 237, 0.54);
  border-radius: 50%;
  background: #000;
  box-shadow: none;
}

.exp3-orbit__eye video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.08); }

.exp3-orbit__eye {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.exp3-orbit__ring { display: none; }

.exp3-orbit__ring {
  position: absolute;
  border: 1px solid rgba(116, 192, 184, 0.48);
  border-radius: 50%;
}

.exp3-orbit__ring--one { width: 83%; aspect-ratio: 1; }
.exp3-orbit__ring--two { width: 112%; aspect-ratio: 1; border-style: dashed; border-color: rgba(242, 245, 237, 0.28); }

.exp3-orbit__tech {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: inline-flex;
  width: clamp(46px, 5vw, 66px);
  height: clamp(46px, 5vw, 66px);
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--exp3-teal);
  font-size: clamp(13px, 1.45vw, 20px);
  line-height: 1;
  animation: exp3-orbit-badge var(--orbit-duration, 30s) linear infinite;
  will-change: transform;
}

.exp3-orbit__tech > i {
  color: currentColor;
  font-size: clamp(20px, 2.3vw, 29px);
  line-height: 1;
  animation: exp3-orbit-badge-counter var(--orbit-duration, 30s) linear infinite;
}

.exp3-orbit__tech > span {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: -0.02em;
  animation: exp3-orbit-badge-counter var(--orbit-duration, 30s) linear infinite;
}

.exp3-orbit__tech--wordpress { --orbit-angle: -140deg; --counter-angle: 140deg; --orbit-radius: clamp(225px, 18vw, 245px); --orbit-duration: 30s; }
.exp3-orbit__tech--shopify { --orbit-angle: -50deg; --counter-angle: 50deg; --orbit-radius: clamp(225px, 18vw, 245px); --orbit-duration: 30s; }
.exp3-orbit__tech--node { --orbit-angle: 40deg; --counter-angle: -40deg; --orbit-radius: clamp(225px, 18vw, 245px); --orbit-duration: 30s; }
.exp3-orbit__tech--photoshop { --orbit-angle: 130deg; --counter-angle: -130deg; --orbit-radius: clamp(225px, 18vw, 245px); --orbit-duration: 30s; }
.exp3-orbit__tech--photoshop > span { font-size: clamp(16px, 1.9vw, 23px); letter-spacing: -0.08em; }
.exp3-orbit__tech--react { --orbit-angle: -105deg; --counter-angle: 105deg; --orbit-radius: clamp(180px, 15vw, 200px); --orbit-duration: 30s; }
.exp3-orbit__tech--figma { --orbit-angle: -15deg; --counter-angle: 15deg; --orbit-radius: clamp(180px, 15vw, 200px); --orbit-duration: 30s; }
.exp3-orbit__tech--javascript { --orbit-angle: 75deg; --counter-angle: -75deg; --orbit-radius: clamp(180px, 15vw, 200px); --orbit-duration: 30s; }
.exp3-orbit__tech--python { --orbit-angle: 165deg; --counter-angle: -165deg; --orbit-radius: clamp(180px, 15vw, 200px); --orbit-duration: 30s; }

@keyframes exp3-orbit-badge {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-angle)) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle) + 360deg)) translateX(var(--orbit-radius)); }
}

@keyframes exp3-orbit-badge-reverse {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-angle)) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle) - 360deg)) translateX(var(--orbit-radius)); }
}

@keyframes exp3-orbit-badge-counter {
  from { transform: rotate(var(--counter-angle)); }
  to { transform: rotate(calc(var(--counter-angle) - 360deg)); }
}

@keyframes exp3-orbit-badge-counter-reverse {
  from { transform: rotate(var(--counter-angle)); }
  to { transform: rotate(calc(var(--counter-angle) + 360deg)); }
}

.exp3-orbit__tag {
  position: absolute;
  z-index: 3;
  padding: 8px 11px;
  border: 1px solid rgba(242, 245, 237, 0.44);
  background: rgba(3, 8, 6, 0.65);
  color: var(--exp3-paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.exp3-orbit__tag--top { top: 9%; right: 3%; }
.exp3-orbit__tag--bottom { bottom: 8%; left: 0; color: #82c7c0; }

.exp3-stream {
  margin-top: clamp(78px, 10vw, 156px);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border: 1px solid rgba(242, 245, 237, 0.29);
  background: rgba(3, 8, 6, 0.72);
}

.exp3-stream__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(242, 245, 237, 0.24);
  color: rgba(242, 245, 237, 0.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.exp3-stream__head a { color: #83c7c1; }
.exp3-stream__head i { margin-left: 7px; }

.exp3-stream__video { position: relative; overflow: hidden; height: clamp(270px, 31vw, 510px); }
.exp3-stream__video::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 62%, rgba(3, 8, 6, 0.76)); pointer-events: none; }
.exp3-stream__video video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.84) contrast(1.08); }

.exp3-stream__marquee {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(3, 8, 6, 0.9), rgba(3, 8, 6, 0.52));
  color: var(--exp3-paper);
  font-size: clamp(12px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.exp3-stream__marquee > span { display: none; }

.exp3-stream__marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: exp3-marquee 22s linear infinite;
}

.exp3-stream__marquee-track span {
  display: block;
  padding-right: clamp(38px, 5vw, 88px);
}

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

@media (max-width: 991px) {
  .exp3-hero { padding-top: 132px; }
  .exp3-hero__main { grid-template-columns: 1fr; min-height: 0; padding: 76px 0 52px; }
  .exp3-orbit { margin: 0 auto; }
  .exp3-orbit__eye { width: 72%; }
}

@media (max-width: 767px) {
  .exp3-hero { padding: 112px 0 48px; }
  .exp3-hero__top { grid-template-columns: 1fr auto; font-size: 8px; }
  .exp3-hero__top span:nth-child(2) { display: none; }
  .exp3-hero__main { gap: 42px; padding: 48px 0; }
  .exp3-hero__statement h1 { font-size: clamp(48px, 13vw, 72px); }
  .exp3-orbit { width: min(90vw, 420px); }
  .exp3-orbit__eye { width: 72%; }
  .exp3-orbit__tech { width: 44px; height: 44px; box-shadow: none; }
  .exp3-orbit__tech > span { font-size: 6px; }
  .exp3-orbit__tech--photoshop > span { font-size: 17px; }
  .exp3-stream__head { font-size: 8px; }
  .exp3-stream__video { height: 250px; }
  .exp3-stream { margin-top: 58px; }
  .exp-home--three .exp3-hero,
  .exp-home--three .exp3-stream { overflow: clip; }
  .exp3-hero__statement h1 { letter-spacing: -0.075em; }
  .exp3-stream__head { align-items: flex-start; flex-direction: column; }
  .exp3-stream__marquee { padding: 12px 14px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .exp3-orbit__tech,
  .exp3-orbit__tech > i,
  .exp3-orbit__tech > span {
    animation: none;
  }

  .exp3-orbit__tech { transform: translate(-50%, -50%) rotate(var(--orbit-angle)) translateX(var(--orbit-radius)); }
  .exp3-orbit__tech > i,
  .exp3-orbit__tech > span { transform: rotate(var(--counter-angle)); }
}