:root {
  --ink: #183142;
  --muted: #71808c;
  --paper: #f7f9f7;
  --line: rgba(42, 80, 98, 0.12);
  --shadow: 0 30px 90px rgba(30, 65, 83, 0.14);
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #eef2f2;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }

.sepec-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.98) 0 13%, rgba(255,255,255,.72) 33%, transparent 60%),
    linear-gradient(120deg, #f8f2e8 0%, #f7faf7 43%, #e9f3f9 72%, #edf6ef 100%);
  transition: opacity .95s var(--ease-premium), visibility .95s linear;
}

.sepec-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ambient-canvas,
.ambient-layer,
.ambient-layer > * {
  position: absolute;
  inset: 0;
}

.ambient-canvas {
  width: 100%;
  height: 100%;
  z-index: -2;
}

.ambient-layer {
  z-index: -3;
  overflow: hidden;
}

.aurora {
  width: min(66vw, 960px);
  height: min(66vw, 960px);
  border-radius: 50%;
  filter: blur(70px);
  opacity: .34;
  mix-blend-mode: multiply;
  will-change: transform;
}

.aurora-a {
  inset: -24% auto auto -16%;
  background: radial-gradient(circle, rgba(238, 160, 95, .58), transparent 68%);
  animation: float-a 18s ease-in-out infinite alternate;
}

.aurora-b {
  inset: auto -24% -36% auto;
  background: radial-gradient(circle, rgba(74, 158, 207, .58), transparent 68%);
  animation: float-b 22s ease-in-out infinite alternate;
}

.aurora-c {
  width: min(48vw, 720px);
  height: min(48vw, 720px);
  inset: 22% 12% auto auto;
  background: radial-gradient(circle, rgba(111, 166, 81, .48), transparent 70%);
  animation: float-c 16s ease-in-out infinite alternate;
}

.radial-grid {
  inset: 50% auto auto 50%;
  width: min(78vw, 1050px);
  height: min(78vw, 1050px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: .34;
  background:
    repeating-radial-gradient(circle at center, transparent 0 44px, rgba(48, 91, 109, .08) 45px 46px),
    repeating-conic-gradient(from 0deg, rgba(48, 91, 109, .055) 0 .65deg, transparent .65deg 15deg);
  mask-image: radial-gradient(circle, #000 0 44%, transparent 75%);
  animation: grid-turn 70s linear infinite;
}

.grain {
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.loader-shell {
  position: relative;
  width: min(92vw, 680px);
  display: grid;
  justify-items: center;
  transform-style: preserve-3d;
  perspective: 1100px;
}

.logo-stage {
  --mx: 0;
  --my: 0;
  position: relative;
  width: clamp(250px, 39vw, 430px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform:
    rotateX(calc(var(--my) * -4deg))
    rotateY(calc(var(--mx) * 5deg))
    translate3d(calc(var(--mx) * 5px), calc(var(--my) * 5px), 0);
  transition: transform .18s ease-out;
  will-change: transform;
}

.logo-stage::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 35px 80px rgba(42, 83, 104, .10);
  pointer-events: none;
}

.logo-stage::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(255,255,255,.2) 44%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
  animation: breathe 4.8s ease-in-out infinite;
}

.logo-canvas {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 28px 34px rgba(30, 73, 95, .18));
}

.orbit {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(53, 102, 122, .12);
  border-radius: 50%;
  pointer-events: none;
}

.orbit::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 50%;
  top: -4px;
  border-radius: 50%;
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 18px rgba(54, 146, 190, .7);
}

.orbit-a { animation: orbit 12s linear infinite; }
.orbit-b { inset: 2%; opacity: .48; animation: orbit 19s linear infinite reverse; }
.orbit-c { inset: 16%; opacity: .58; animation: orbit 9s linear infinite; }

.interaction-halo {
  position: absolute;
  z-index: 4;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.82);
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.08) 46%, transparent 68%);
  box-shadow: 0 0 40px rgba(72, 145, 180, .14);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.logo-stage.is-active .interaction-halo {
  opacity: 1;
  transform: scale(1);
}

.brand-lockup {
  position: relative;
  z-index: 5;
  margin-top: -12px;
  text-align: center;
}

.brand-lockup h1 {
  margin: 0;
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  color: #233e4f;
  text-shadow: 0 10px 30px rgba(35, 62, 79, .08);
}

.brand-lockup p {
  margin: 14px 0 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7b8a94;
}

.progress-wrap {
  width: min(76vw, 420px);
  margin-top: 31px;
}

.progress-track {
  position: relative;
  height: 2px;
  border-radius: 999px;
  overflow: visible;
  background: rgba(46, 82, 99, .12);
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #49a5ce 0%, #78a534 48%, #e6a72a 76%, #de7b38 100%);
  box-shadow: 0 0 18px rgba(73, 165, 206, .32);
  transition: width .55s var(--ease-premium);
}

.progress-glow {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 28px rgba(89, 167, 199, .86);
  transition: left .55s var(--ease-premium);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: #8a98a2;
}

.progress-value { letter-spacing: .08em; }

.corner-signature {
  position: absolute;
  left: clamp(24px, 4vw, 64px);
  bottom: clamp(22px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(47, 77, 92, .55);
}

.corner-signature span {
  width: 42px;
  height: 1px;
  background: currentColor;
}

.corner-signature small {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .19em;
}

.cursor-ring {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(43, 84, 103, .26);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, opacity .25s ease;
  backdrop-filter: blur(2px);
}

.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-color: rgba(43, 84, 103, .14);
}

.demo-content {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px;
  background:
    radial-gradient(circle at top, #fff, transparent 45%),
    linear-gradient(135deg, #eef4f2, #e7eff5);
}

.demo-content section {
  width: min(100%, 740px);
  padding: clamp(34px, 7vw, 74px);
  border: 1px solid rgba(48, 79, 94, .1);
  border-radius: 28px;
  text-align: center;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.demo-content .eyebrow {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .25em;
  color: #6b7c87;
}

.demo-content h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
}

.demo-content p { color: #667783; line-height: 1.7; }

.demo-content button {
  margin-top: 15px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #29485a;
  cursor: pointer;
}

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes grid-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.07); opacity: .72; } }
@keyframes float-a { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes float-b { to { transform: translate(-12vw, -10vh) scale(.9); } }
@keyframes float-c { to { transform: translate(-7vw, 13vh) scale(1.12); } }

@media (max-width: 680px) {
  .loader-shell { transform: translateY(-2vh); }
  .brand-lockup { margin-top: -4px; }
  .corner-signature { left: 50%; transform: translateX(-50%); width: max-content; }
  .corner-signature span { display: none; }
  .corner-signature small { letter-spacing: .12em; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .logo-stage { transition: none; }
}