:root {
  --c-bg:         #060E16;
  --c-surface:    #0F1923;
  --c-surface-2:  #162230;
  --c-border:     #1E3044;
  --c-border-2:   #2A4060;

  --c-primary:    #00E5FF;
  --c-primary-dim:#0099BB;
  --c-primary-bg: rgba(0, 229, 255, 0.08);
  --c-primary-border: rgba(0, 229, 255, 0.25);

  --c-text:       #E8F0F8;
  --c-text-2:     #7A9AB8;
  --c-text-3:     #3D5A72;

  --f-display: 'Orbitron', sans-serif;
  --f-body:    'Instrument Sans', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;

  --shadow-glow: 0 0 24px rgba(0,229,255,0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(6, 14, 22, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-name {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-links .btn-primary {
  color: var(--c-surface);
}

.nav-links a:hover { color: var(--c-text); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 38px;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-primary);
  color: var(--c-surface);
}
.btn-primary:hover { background: #33EEFF; box-shadow: var(--shadow-glow); }

.btn-secondary {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border);
}
.btn-secondary:hover { background: var(--c-primary-bg); border-color: var(--c-primary); }

.btn-ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border-2); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 32px; font-size: 15px; border-radius: var(--r-lg); }
.btn-block { width: 100%; }

/* HERO */
.hero {
  padding: 160px 0 80px;
  text-align: center;
}

.hero-inner { max-width: 720px; margin: 0 auto; }

.hero-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-border);
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-text);
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 540px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 64px;
}

/* DEMO VISUAL */
.hero-demo {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px;
  text-align: center;
}

.demo-url {
  font-family: var(--f-mono);
  font-size: 16px;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  display: inline-block;
}

.demo-prefix { color: var(--c-text-3); }
.demo-domain { color: var(--c-primary); }

.demo-arrows {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.demo-target {
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-border);
  border-radius: var(--r-md);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.demo-platform {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.demo-store {
  font-size: 13px;
  color: var(--c-text-2);
}

/* SECTIONS */
.section-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.6;
  margin-bottom: 12px;
  text-align: center;
}

.section-title {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 48px;
  text-align: center;
}

/* FEATURES */
.features {
  padding: 80px 0;
  border-top: 1px solid var(--c-border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.15s;
}

.feature-card:hover {
  border-color: var(--c-border-2);
}

.feature-icon {
  font-size: 24px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.6;
}

/* PRICING */
.pricing {
  padding: 80px 0;
  border-top: 1px solid var(--c-border);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
}

.pricing-card-featured {
  border-color: var(--c-primary-border);
  box-shadow: var(--shadow-glow);
}

.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-surface);
  background: var(--c-primary);
  padding: 2px 12px;
  border-radius: 99px;
}

.pricing-plan {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}

.pricing-price {
  margin-bottom: 24px;
}

.price-amount {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.02em;
}

.price-period {
  font-size: 14px;
  color: var(--c-text-3);
}

.pricing-features {
  list-style: none;
  margin-bottom: 28px;
}

.pricing-features li {
  font-size: 13px;
  color: var(--c-text-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li::before {
  content: "\2713 ";
  color: var(--c-primary);
  margin-right: 8px;
}

/* FOOTER */
.footer {
  border-top: 1px solid var(--c-border);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-copy {
  font-size: 12px;
  color: var(--c-text-3);
}

/* PIPELINE */
.pipeline {
  padding: 80px 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  overflow: hidden;
  position: relative;
}

.pipeline::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,229,255,.08) 1px,transparent 1px);
  background-size:30px 30px;pointer-events:none;z-index:0;
}
.pipeline::after {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 40%,var(--c-bg) 100%);
  pointer-events:none;z-index:0;
}

.pipeline .eyebrow { font-family:var(--f-mono);font-size:10px;letter-spacing:.45em;color:rgba(0,229,255,.45);text-transform:uppercase;margin-bottom:8px; }
.pipeline h2 em { font-style:normal;color:var(--c-primary); }

.pipeline-scene { --T:7s; position:relative; width:900px; height:310px; z-index:1; }
.pipeline-scene .svg-layer { position:absolute;inset:0;overflow:visible; }

@keyframes segShow {
  0%       { opacity:0; }
  8%       { opacity:1; }
  75%      { opacity:1; }
  92%,100% { opacity:0; }
}
.pipeline-scene .bl  { fill:none;stroke:rgba(0,229,255,.22);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:segShow var(--T) ease-out infinite backwards; }
.pipeline-scene .ah  { opacity:0; animation:segShow var(--T) ease-out infinite backwards; }
.pipeline-scene .jd  { opacity:0; animation:segShow var(--T) ease-out infinite backwards; }
.pipeline-scene .lbl { font-family:var(--f-mono);font-size:8px;letter-spacing:.15em;fill:rgba(0,229,255,.45);opacity:0;animation:segShow var(--T) ease-out infinite backwards; }

#bl12,#ah12                          { animation-delay: 0s;   }
#bl23,#ah23,#bl24,#ah24,#jd_split    { animation-delay: 1.5s; }
#bl35,#bl45,#ah31,#ah32,#jd_merge    { animation-delay: 3.0s; }
#lbl_redirect                        { animation-delay: 1.5s; }
#lbl_attr                            { animation-delay: 3.0s; }

.pipeline-scene .node {
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  opacity:0;
  transform:translateX(-50%);
  animation: nodeShow var(--T) ease-out infinite backwards;
}
@keyframes nodeShow {
  0%       { opacity:0; }
  8%       { opacity:1; }
  75%      { opacity:1; }
  92%,100% { opacity:0; }
}

#n1 { left:70px;  top:110px; animation-delay:0s;   }
#n2 { left:255px; top:110px; animation-delay:1.5s; }
#n3 { left:525px; top:45px;  animation-delay:3.0s; }
#n4 { left:525px; top:185px; animation-delay:3.0s; }
#n5 { left:785px; top:103px; animation-delay:4.5s; }

.pipeline-scene .ncard { position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px; }

.pipeline-scene .halo { position:absolute;border-radius:50%;border:1px solid var(--c-primary);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none; }
.pipeline-scene .h1{width:96px;height:96px;}
.pipeline-scene .h2{width:130px;height:130px;}

#n1 .h1{animation:haloOut var(--T) ease-out infinite   .15s;}
#n1 .h2{animation:haloOut var(--T) ease-out infinite   .35s;}
#n2 .h1{animation:haloOut var(--T) ease-out infinite  1.65s;}
#n2 .h2{animation:haloOut var(--T) ease-out infinite  1.85s;}
#n3 .h1{animation:haloOut var(--T) ease-out infinite  3.15s;}
#n3 .h2{animation:haloOut var(--T) ease-out infinite  3.35s;}
#n4 .h1{animation:haloOut var(--T) ease-out infinite  3.15s;}
#n4 .h2{animation:haloOut var(--T) ease-out infinite  3.35s;}
#n5 .h1{animation:haloOut var(--T) ease-out infinite  4.65s;}
#n5 .h2{animation:haloOut var(--T) ease-out infinite  4.85s;width:170px;height:170px;}
@keyframes haloOut {
  0%  {transform:translate(-50%,-50%) scale(0);opacity:.9;}
  35% {transform:translate(-50%,-50%) scale(1);opacity:.35;}
  70% {transform:translate(-50%,-50%) scale(1.6);opacity:0;}
  100%{opacity:0;}
}

.pipeline-scene .nlbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-primary);opacity:.65;white-space:nowrap;}
.pipeline-scene .nstep{font-family:var(--f-mono);font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.28);white-space:nowrap;}

.pipeline-status{position:relative;z-index:1;height:14px;display:flex;align-items:center;}
.pipeline-status .sstep{position:absolute;font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;color:rgba(0,229,255,.4);text-transform:uppercase;opacity:0;white-space:nowrap;}
.pipeline-status .s1{animation:stepShow var(--T) ease infinite  0.0s;}
.pipeline-status .s2{animation:stepShow var(--T) ease infinite  1.5s;}
.pipeline-status .s3{animation:stepShow var(--T) ease infinite  3.0s;}
.pipeline-status .s4{animation:stepShow var(--T) ease infinite  4.5s;}
@keyframes stepShow{0%{opacity:0;transform:translateY(5px);}7%{opacity:1;transform:translateY(0);}18%{opacity:1;}24%{opacity:0;}100%{opacity:0;}}

.pipeline-dots{display:flex;gap:6px;position:relative;z-index:1;}
.pipeline-dots .dot{width:5px;height:5px;border-radius:50%;background:rgba(0,229,255,.18);}
.pipeline-dots .dot.a{animation:dotActive var(--T) ease infinite;}
.pipeline-dots .dot:nth-child(1).a{animation-delay:0s;}
.pipeline-dots .dot:nth-child(2).a{animation-delay:1.5s;}
.pipeline-dots .dot:nth-child(3).a{animation-delay:3.0s;}
.pipeline-dots .dot:nth-child(4).a{animation-delay:3.0s;}
.pipeline-dots .dot:nth-child(5).a{animation-delay:4.5s;}
@keyframes dotActive{0%{background:rgba(0,229,255,.18);}5%{background:var(--c-primary);box-shadow:0 0 6px var(--c-primary);}70%{background:var(--c-primary);box-shadow:0 0 6px var(--c-primary);}88%{background:rgba(0,229,255,.18);}100%{background:rgba(0,229,255,.18);}}

@media (max-width: 768px) {
  .pipeline-scene { transform: scale(0.45); transform-origin: top center; width: 900px; height: 140px; }
  .pipeline h2 { font-size: 22px; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-title { font-size: 36px; }
  .hero-subtitle { font-size: 15px; }
  .features-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .demo-arrows { flex-direction: column; align-items: center; }
  .nav-links a:not(.btn) { display: none; }
}