html.itp-loading,
html.itp-loading body {
  overflow: hidden !important;
}

.itp-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--itp-fade-duration, .5s) ease, visibility var(--itp-fade-duration, .5s) ease;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.itp-preloader.itp-is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.itp-screen-reader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shared progress */
.itp-progress {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: min(78vw, 420px);
  transform: translateX(-50%);
}

.itp-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.itp-progress-bar span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#4de4ff,#2d7cff,#c4ff31);
  background-size: 200% 100%;
  animation: itp-load 2.2s ease-in-out infinite, itp-shift 2.5s linear infinite;
}

.itp-progress p {
  margin: 10px 0 0;
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* 01 Orbit */
.itp-style-orbit {
  background:
    radial-gradient(circle at 20% 20%, rgba(77,228,255,.10), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(45,124,255,.15), transparent 30%),
    linear-gradient(135deg,#07142e,#0f2455);
}

.itp-orbit-stage {
  position: relative;
  width: min(90vw, 540px);
  height: min(90vw, 540px);
  display: grid;
  place-items: center;
}

.itp-orbit-glow {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,124,255,.38), rgba(93,141,255,.12), transparent 70%);
  filter: blur(14px);
  animation: itp-pulse 3s ease-in-out infinite;
}

.itp-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
}

.itp-orbit-ring-one { width: 100%; height: 100%; animation: itp-spin 9s linear infinite; }
.itp-orbit-ring-two { width: 76%; height: 76%; border-style: dashed; animation: itp-spin-rev 6s linear infinite; }
.itp-orbit-ring-three { width: 54%; height: 54%; border-color: rgba(77,228,255,.35); animation: itp-spin 4s linear infinite; }

.itp-orbit-ring::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 7%;
  left: 50%;
  border-radius: 50%;
  background: linear-gradient(135deg,#4de4ff,#fff);
  box-shadow: 0 0 20px rgba(77,228,255,.9);
  transform: translateX(-50%);
}

.itp-orbit-ring-two::before {
  top: 50%;
  left: 8%;
  background: linear-gradient(135deg,#c4ff31,#fff);
  transform: translateY(-50%);
}

.itp-orbit-ring-three::before {
  top: 78%;
  left: 50%;
  background: linear-gradient(135deg,#2d7cff,#fff);
  transform: translateX(-50%);
}

.itp-orbit-core {
  position: relative;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transform-style: preserve-3d;
  animation: itp-tilt 5s ease-in-out infinite;
}

.itp-logo-badge {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#2d7cff,#5d8dff);
  border-radius: 24px;
  box-shadow: 0 20px 35px rgba(45,124,255,.45);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.06em;
}

.itp-wordmark {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .22em;
}

.itp-wordmark small {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .30em;
}

/* 02 Liquid */
.itp-style-liquid {
  background:
    radial-gradient(circle at 10% 10%, rgba(83,216,255,.28), transparent 22%),
    radial-gradient(circle at 90% 90%, rgba(106,92,255,.18), transparent 26%),
    linear-gradient(180deg,#f8fbff,#f3f7ff);
}

.itp-liquid-wrap {
  position: relative;
  width: min(92vw, 820px);
  text-align: center;
}

.itp-kicker {
  margin-bottom: 18px;
  color: #4e6ea8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.itp-liquid-logo-box {
  position: relative;
  padding: 28px 22px 40px;
}

.itp-liquid-word {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px rgba(8,22,51,.14);
  font-size: clamp(48px, 11vw, 112px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.06em;
}

.itp-liquid-fill,
.itp-liquid-shine {
  position: absolute;
  inset: 0;
}

.itp-liquid-fill {
  color: transparent;
  background: linear-gradient(90deg,#276dff,#6a5cff,#53d8ff,#b9ff36,#276dff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
  animation: itp-fill-up 2.8s ease-in-out infinite, itp-hue-shift 4s linear infinite;
}

.itp-liquid-shine {
  color: #fff;
  opacity: 0;
  clip-path: polygon(0 0,0 0,0 100%,0 100%);
  animation: itp-shine 2.8s ease-in-out infinite;
}

.itp-liquid-bubbles span {
  position: absolute;
  bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg,rgba(83,216,255,.8),rgba(39,109,255,.15));
  animation: itp-float-up 4s linear infinite;
}

.itp-liquid-bubbles span:nth-child(1){width:18px;height:18px;left:18%;animation-delay:.1s}
.itp-liquid-bubbles span:nth-child(2){width:12px;height:12px;left:28%;animation-delay:1s}
.itp-liquid-bubbles span:nth-child(3){width:24px;height:24px;left:44%;animation-delay:1.8s}
.itp-liquid-bubbles span:nth-child(4){width:14px;height:14px;left:61%;animation-delay:.5s}
.itp-liquid-bubbles span:nth-child(5){width:20px;height:20px;left:75%;animation-delay:2.2s}

.itp-liquid-desc {
  color: #5c6d92;
  font-size: 15px;
}

/* 03 Cube */
.itp-style-cube {
  background:
    radial-gradient(circle at 25% 20%, rgba(75,225,255,.10), transparent 22%),
    radial-gradient(circle at 80% 80%, rgba(109,92,255,.12), transparent 28%),
    linear-gradient(180deg,#071326,#040b1c);
  perspective: 1200px;
}

.itp-cube-scene {
  position: relative;
  width: min(92vw, 900px);
  min-height: 560px;
  display: grid;
  place-items: center;
}

.itp-cube-floor {
  position: absolute;
  bottom: 84px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(37,109,255,.22), transparent 60%);
  transform: rotateX(78deg);
}

.itp-cube-stack {
  position: relative;
  width: 260px;
  height: 260px;
  transform-style: preserve-3d;
  animation: itp-cube-spin 7s linear infinite;
}

.itp-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.itp-cube-1 { transform: translate3d(-50%,-50%,0) scale(1.15); }
.itp-cube-2 { transform: translate3d(-50%,-50%,60px) scale(.86); }
.itp-cube-3 { transform: translate3d(-50%,-50%,115px) scale(.58); }

.itp-face {
  position: absolute;
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, rgba(37,109,255,.95), rgba(109,92,255,.92));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 18px rgba(255,255,255,.10), 0 30px 60px rgba(0,0,0,.25);
}

.itp-front {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -.06em;
  transform: translateZ(65px);
}

.itp-back { transform: rotateY(180deg) translateZ(65px); }
.itp-right { transform: rotateY(90deg) translateZ(65px); }
.itp-left { transform: rotateY(-90deg) translateZ(65px); }
.itp-top { transform: rotateX(90deg) translateZ(65px); }
.itp-bottom { transform: rotateX(-90deg) translateZ(65px); }

.itp-cube-meta {
  position: absolute;
  bottom: 40px;
  text-align: center;
}

.itp-cube-meta h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .16em;
}

.itp-cube-meta p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.itp-cube-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.itp-cube-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  animation: itp-blink 1.4s infinite;
}

.itp-cube-dots span:nth-child(2){animation-delay:.2s}
.itp-cube-dots span:nth-child(3){animation-delay:.4s}

/* 04 Particle */
.itp-style-particle {
  background:
    radial-gradient(circle at 20% 20%, rgba(70,220,255,.09), transparent 20%),
    radial-gradient(circle at 80% 78%, rgba(106,92,255,.14), transparent 26%),
    linear-gradient(135deg,#0a1532,#102655);
}

.itp-particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.itp-particle-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
}

.itp-particle-overlay h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px,9vw,86px);
  font-weight: 900;
  letter-spacing: .10em;
}

.itp-particle-overlay p {
  margin: 12px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.itp-particle-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 16px;
  color: #d7e6ff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}

.itp-particle-badge i {
  width: 8px;
  height: 8px;
  background: #b9ff36;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(185,255,54,.12);
}

/* 05 Trace */
.itp-style-trace {
  background:
    radial-gradient(circle at 20% 20%, rgba(42,115,255,.10), transparent 18%),
    radial-gradient(circle at 80% 80%, rgba(114,93,255,.10), transparent 20%),
    linear-gradient(180deg,#f9fbff,#fff);
}

.itp-trace-wrap {
  position: relative;
  width: min(92vw, 900px);
  text-align: center;
}

.itp-trace-icon {
  display: grid;
  width: 110px;
  height: 110px;
  margin: 0 auto 28px;
  place-items: center;
  border-radius: 32px;
  background: linear-gradient(135deg,#2a73ff,#5f8cff);
  box-shadow: 0 20px 40px rgba(42,115,255,.25);
}

.itp-trace-icon svg {
  width: 52px;
  height: 52px;
}

.itp-trace-brand {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(9,21,47,.18);
  font-size: clamp(44px,10vw,104px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.06em;
}

.itp-trace-svg,
.itp-trace-fill-svg {
  position: absolute;
  inset: 0;
}

.itp-trace-svg text {
  fill: none;
  stroke: url(#itpTraceGrad);
  stroke-width: 2.5;
  stroke-dasharray: 860;
  stroke-dashoffset: 860;
  animation: itp-draw 3s ease-in-out infinite;
}

.itp-trace-fill-svg text {
  fill: url(#itpTraceGrad);
  opacity: 0;
  animation: itp-appear 3s ease-in-out infinite;
}

.itp-trace-sub {
  margin-top: 18px;
  color: #52627f;
  font-size: 15px;
}

.itp-trace-loader {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 24px auto 0;
}

.itp-trace-loader span {
  width: 12px;
  height: 12px;
  background: #d3dcf0;
  border-radius: 50%;
  animation: itp-jump 1.2s infinite;
}

.itp-trace-loader span:nth-child(2){animation-delay:.15s}
.itp-trace-loader span:nth-child(3){animation-delay:.3s}
.itp-trace-loader span:nth-child(4){animation-delay:.45s}

/* Animations */
@keyframes itp-spin { to { transform: rotate(360deg); } }
@keyframes itp-spin-rev { to { transform: rotate(-360deg); } }
@keyframes itp-pulse { 50% { transform: scale(1.08); opacity: .85; } }
@keyframes itp-tilt { 50% { transform: rotateX(12deg) rotateY(-12deg) translateY(-6px); } }
@keyframes itp-load { 0% { transform: translateX(-110%); } 60%,100% { transform: translateX(260%); } }
@keyframes itp-shift { to { background-position: 200% 0; } }
@keyframes itp-fill-up { 0%,10% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); } 55%,75% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 100% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); } }
@keyframes itp-hue-shift { to { background-position: 240% 0; } }
@keyframes itp-shine { 0%,20% { clip-path: polygon(0 0,0 0,0 100%,0 100%); opacity: 0; } 40%,58% { clip-path: polygon(35% 0,55% 0,30% 100%,10% 100%); opacity: .65; } 70%,100% { clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%); opacity: 0; } }
@keyframes itp-float-up { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-180px) scale(1.1); opacity: 0; } }
@keyframes itp-cube-spin { 0% { transform: rotateX(-24deg) rotateY(0deg); } 100% { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes itp-blink { 0%,100% { transform: scale(.8); background: rgba(255,255,255,.18); } 50% { transform: scale(1.3); background: #c4ff31; } }
@keyframes itp-draw { 0%,12% { stroke-dashoffset: 860; } 55%,75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -860; } }
@keyframes itp-appear { 0%,38% { opacity: 0; } 50%,80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes itp-jump { 0%,80%,100% { transform: translateY(0); background: #d3dcf0; } 40% { transform: translateY(-8px); background: #b9ff36; } }

@media (max-width: 600px) {
  .itp-orbit-core { width: 178px; height: 178px; border-radius: 30px; }
  .itp-logo-badge { width: 70px; height: 70px; font-size: 27px; }
  .itp-wordmark { font-size: 14px; letter-spacing: .16em; }
  .itp-wordmark small { font-size: 10px; }
  .itp-cube-meta h2 { font-size: 26px; }
  .itp-cube-meta p,
  .itp-particle-overlay p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .itp-preloader *,
  .itp-preloader *::before,
  .itp-preloader *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}