* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #03050b;
  color: #f7fbff;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.circuit-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(36, 145, 255, .33), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(112, 73, 255, .23), transparent 34%),
    radial-gradient(circle at 50% 90%, rgba(0, 210, 255, .12), transparent 38%),
    linear-gradient(rgba(68, 147, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 147, 255, .075) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
  z-index: -4;
}
.circuit-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(41, 151, 255, .18) 12% 12.25%, transparent 12.25% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(41, 151, 255, .12) 42% 42.25%, transparent 42.25% 100%);
  background-size: 260px 260px;
  opacity: .55;
  animation: circuitMove 18s linear infinite;
}
.circuit-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,5,11,.15), #03050b 92%);
}
.orb { position: fixed; border-radius: 50%; filter: blur(12px); z-index: -3; opacity: .65; }
.orb-one { width: 220px; height: 220px; right: 10%; top: 22%; background: rgba(28, 139, 255, .20); animation: float 7s ease-in-out infinite; }
.orb-two { width: 180px; height: 180px; left: 8%; bottom: 14%; background: rgba(120, 84, 255, .17); animation: float 9s ease-in-out infinite reverse; }
.nav {
  width: min(1120px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16, 24, 44, .75), rgba(5, 8, 18, .65));
  box-shadow: 0 18px 55px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 14px;
  z-index: 10;
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 900; letter-spacing: -.03em; }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.35), rgba(14,4,28,.75));
  box-shadow: 0 0 24px rgba(168,85,247,.75), inset 0 0 18px rgba(192,132,252,.25);
  overflow: hidden;
}
.brand-mark img { width: 150%; height: 150%; object-fit: contain; filter: drop-shadow(0 0 9px rgba(192,132,252,.8)); }
.nav nav { display: flex; gap: 24px; color: #b8c8e8; font-size: 14px; }
.nav nav a:hover { color: #fff; }
.section { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 88px 0; }
.hero { min-height: 82vh; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 52px; perspective: 1100px; }
.eyebrow { color: #c084fc; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: 12px; margin-bottom: 16px; text-shadow: 0 0 20px rgba(70,185,255,.35); }
h1 { font-size: clamp(44px, 7vw, 82px); line-height: .95; letter-spacing: -0.075em; margin-bottom: 24px; text-shadow: 0 12px 55px rgba(28,139,255,.2); }
h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -0.055em; text-align: center; max-width: 850px; margin: 0 auto 36px; }
.hero-text, .section p { color: #b8c8e8; font-size: 18px; line-height: 1.75; max-width: 650px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn { padding: 15px 22px; border-radius: 999px; font-weight: 900; border: 1px solid rgba(255,255,255,.16); transition: transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-4px); }
.primary { background: linear-gradient(135deg, #9333ea, #a855f7); box-shadow: 0 18px 50px rgba(21, 140, 255, .34), inset 0 1px 0 rgba(255,255,255,.32); }
.secondary { background: rgba(255,255,255,.07); color: #dce8ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.hero-visual { perspective: 1200px; }
.stage-3d { position: relative; min-height: 520px; transform-style: preserve-3d; animation: heroTilt 7s ease-in-out infinite; }
.logo-card {
  position: absolute; inset: 62px 26px auto auto; width: min(420px, 88%);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  border-radius: 34px;
  padding: 18px;
  box-shadow: 0 42px 120px rgba(0,0,0,.58), 0 0 110px rgba(40, 130, 255, .22), inset 0 1px 0 rgba(255,255,255,.18);
  transform: rotateY(-12deg) rotateX(8deg) translateZ(70px);
  backdrop-filter: blur(18px);
}
.logo-card img { width: 100%; border-radius: 24px; display: block; box-shadow: 0 25px 60px rgba(0,0,0,.45); }
.ring { position: absolute; border-radius: 50%; border: 2px solid rgba(76, 183, 255, .32); box-shadow: 0 0 55px rgba(42,157,255,.28), inset 0 0 35px rgba(108,84,255,.16); }
.ring-one { width: 410px; height: 410px; right: 6px; top: 42px; transform: rotateX(70deg) rotateZ(15deg); animation: spin 16s linear infinite; }
.ring-two { width: 300px; height: 300px; right: 60px; top: 98px; transform: rotateX(70deg) rotateZ(-25deg); animation: spin 11s linear infinite reverse; }
.mini-panel { position: absolute; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18); background: rgba(7, 13, 28, .72); backdrop-filter: blur(18px); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16); }
.mini-panel strong { display: block; font-size: 23px; color: #fff; }
.mini-panel span { color: #9fb9e6; font-size: 13px; font-weight: 700; }
.panel-one { left: 28px; top: 110px; transform: rotateY(18deg) translateZ(120px); }
.panel-two { right: 0; bottom: 88px; transform: rotateY(-18deg) translateZ(140px); }
.center { text-align: center; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; perspective: 900px; }
.card, .step-card {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}
.tilt { transform: rotateX(0) rotateY(0) translateZ(0); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.tilt:hover { transform: translateY(-12px) rotateX(7deg) rotateY(-7deg); border-color: rgba(82, 194, 255, .48); box-shadow: 0 34px 90px rgba(20, 130, 255, .18); }
.card span { font-size: 30px; filter: drop-shadow(0 0 16px rgba(70,185,255,.35)); }
.card h3 { font-size: 20px; margin: 18px 0 10px; }
.card p, .steps p { font-size: 15px; line-height: 1.65; color: #adc0e6; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.split h2 { text-align: left; margin-left: 0; }
.steps { display: grid; gap: 16px; perspective: 900px; }
.step-card { transform: rotateY(-5deg); }
.step-card:nth-child(2) { transform: rotateY(-2deg) translateX(20px); }
.step-card:nth-child(3) { transform: rotateY(3deg) translateX(40px); }
.steps strong { color: #c084fc; margin-right: 14px; text-shadow: 0 0 18px rgba(88,199,255,.45); }
.steps span { font-weight: 900; font-size: 20px; }
.pill-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.pill-row span { padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14); color: #dce8ff; box-shadow: 0 16px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.13); }
.cta { text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 34px; background: linear-gradient(145deg, rgba(23, 117, 255, .13), rgba(255,255,255,.05)); padding: 70px 24px; margin-bottom: 60px; box-shadow: 0 35px 120px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.13); position: relative; overflow: hidden; }
.cta::before { content:''; position:absolute; inset:-2px; background: radial-gradient(circle at 50% 0%, rgba(89,198,255,.25), transparent 38%); pointer-events:none; }
.cta > * { position: relative; }
.cta p { margin: 0 auto; }
.center-actions { justify-content: center; }
.reveal { animation: revealUp .8s ease both; }
footer { padding: 28px; text-align: center; color: #7f91b5; }
@keyframes circuitMove { from { background-position: 0 0; } to { background-position: 260px 260px; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
@keyframes heroTilt { 0%,100% { transform: rotateY(0deg) rotateX(0deg); } 50% { transform: rotateY(5deg) rotateX(-3deg); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .nav nav { display: none; }
  .stage-3d { min-height: 430px; }
  .logo-card { right: 50%; transform: translateX(50%) rotateY(-8deg) rotateX(7deg); }
  .panel-one { left: 0; }
  .panel-two { right: 0; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero { gap: 24px; }
  h1 { font-size: 44px; }
  .stage-3d { min-height: 360px; }
  .logo-card { width: 92%; top: 70px; }
  .ring-one { width: 300px; height: 300px; right: 24px; }
  .ring-two { width: 220px; height: 220px; right: 64px; }
  .mini-panel { display: none; }
  .step-card, .step-card:nth-child(2), .step-card:nth-child(3) { transform: none; }
}


/* 3-4 second cinematic startup animation - purple circuit reveal */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 28, 135, .25), transparent 24%),
    radial-gradient(circle at 20% 20%, rgba(168, 85, 247, .13), transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(126, 34, 206, .16), transparent 30%),
    #020108;
}
.intro.hidden {
  pointer-events: none;
  animation: introManualHide .55s ease forwards;
}
.intro.hidden .intro-circuit-svg,
.intro.hidden .intro-core,
.intro.hidden .intro-logo-wrap,
.intro.hidden .intro-ring,
.intro.hidden .intro-title,
.intro.hidden .intro-void {
  animation-play-state: paused !important;
}
.intro-playing { overflow: hidden; }
.intro-skip {
  position: absolute; right: 22px; top: 22px; z-index: 8;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(216,180,254,.22);
  background: rgba(30, 10, 55, .45); color: #eadcff;
  font-weight: 800; cursor: pointer; opacity: 0;
  animation: skipIn .35s ease 1s forwards; backdrop-filter: blur(14px);
}
.intro-void {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(168,85,247,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: scale(1.04);
  animation: introGridDrift 4s linear forwards;
}
.intro-void::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at center, transparent 0 20%, rgba(2,1,8,.2) 45%, #020108 86%);
}
.intro-circuit-svg {
  position: absolute;
  width: min(1100px, 112vw);
  height: min(640px, 80vh);
  overflow: visible;
  filter: url(#purpleGlow);
}
.trace {
  fill: none;
  stroke: #a855f7;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: .9;
  filter: drop-shadow(0 0 10px rgba(168,85,247,.9));
}
.trace-a { animation: drawTrace .8s ease .25s forwards; }
.trace-b { animation: drawTrace .8s ease .55s forwards; }
.trace-c { animation: drawTrace .85s ease .85s forwards; }
.trace-d { animation: drawTrace .85s ease 1.05s forwards; }
.trace-e { animation: drawTrace .75s ease 1.25s forwards; }
.trace-f { animation: drawTrace .75s ease 1.45s forwards; }
.node {
  fill: #d8b4fe;
  opacity: 0;
  filter: drop-shadow(0 0 13px rgba(216,180,254,.95));
  animation: nodePop .35s ease 1.4s forwards;
}
.node-2 { animation-delay: 1.55s; }
.node-3 { animation-delay: 1.7s; }
.node-4 { animation-delay: 1.85s; }
.node-5 { animation-delay: 2s; }
.node-6 { animation-delay: 2.1s; }
.intro-core {
  position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: #d8b4fe;
  box-shadow: 0 0 24px #d8b4fe, 0 0 90px rgba(168,85,247,.75), 0 0 180px rgba(126,34,206,.62);
  opacity: 0;
  animation: corePulse 1.4s ease 1.75s forwards;
}
.intro-logo-wrap {
  position: relative;
  width: min(360px, 56vw);
  height: min(300px, 46vw);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.72) rotateX(12deg);
  animation: logoReveal .8s cubic-bezier(.15,1.2,.25,1) 2.05s forwards, logoFloat 1.1s ease 2.85s forwards;
}
.intro-ring {
  position: absolute;
  width: 78%; height: 95%; border-radius: 50%;
  border: 2px solid rgba(192,132,252,.65);
  box-shadow: 0 0 36px rgba(168,85,247,.72), inset 0 0 34px rgba(192,132,252,.18);
  opacity: 0;
  animation: ringIn .55s ease 2.05s forwards, ringSpin 4s linear 2.05s infinite;
}
.intro-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(216,180,254,.95)) drop-shadow(0 0 60px rgba(168,85,247,.65));
}
.intro-title {
  position: absolute;
  text-align: center;
  top: calc(50% + 160px);
  opacity: 0;
  transform: translateY(18px);
  animation: titleReveal .55s ease 2.65s forwards, titleOut .45s ease 3.42s forwards;
}
.intro-title h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 5vw, 56px);
  letter-spacing: .14em;
  text-shadow: 0 0 34px rgba(192,132,252,.7);
}
.intro-title p {
  color: #d8b4fe;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
}
@keyframes skipIn { to { opacity: 1; } }
@keyframes introGridDrift { from { background-position: 0 0; } to { background-position: 144px 216px; } }
@keyframes drawTrace { to { stroke-dashoffset: 0; } }
@keyframes nodePop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes corePulse { 0% { opacity: 0; transform: scale(.1); } 45% { opacity: 1; transform: scale(2.5); } 100% { opacity: .18; transform: scale(32); } }
@keyframes ringIn { to { opacity: 1; } }
@keyframes ringSpin { to { rotate: 360deg; } }
@keyframes logoReveal { to { opacity: 1; transform: scale(1) rotateX(0); } }
@keyframes logoFloat { to { transform: scale(1.08) translateY(-8px); } }
@keyframes titleReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes titleOut { to { opacity: 0; transform: translateY(-16px); } }
@keyframes introManualHide { to { opacity: 0; visibility: hidden; transform: scale(1.02); } }
@media (max-width: 560px) {
  .intro-logo-wrap { width: 250px; height: 210px; }
  .intro-title { top: calc(50% + 118px); width: 92%; }
  .intro-title h2 { letter-spacing: .08em; }
  .intro-title p { letter-spacing: .14em; }
  .intro-circuit-svg { width: 140vw; height: 72vh; }
}