*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#e879c8;
  --pink-dim:rgba(232,121,200,0.18);
  --pink-glow:rgba(232,121,200,0.35);
  --cyan:#22d4f5;
  --cyan-dim:rgba(34,212,245,0.15);
  --cyan-glow:rgba(34,212,245,0.3);
  --glass-bg:rgba(12,6,32,0.55);
  --glass-bg-hi:rgba(18,8,48,0.70);
  --glass-border:rgba(255,255,255,0.10);
  --glass-border-hi:rgba(255,255,255,0.22);
  --glass-border-pk:rgba(232,121,200,0.30);
  --glass-shadow:0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.07) inset;
  --glass-shadow-lg:0 16px 56px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.10) inset;
  --glow-pk:0 0 20px rgba(232,121,200,0.25), 0 0 60px rgba(232,121,200,0.08);
  --glow-cy:0 0 20px rgba(34,212,245,0.2), 0 0 60px rgba(34,212,245,0.07);
  --text:#e8e0f8;
  --text-dim:rgba(220,210,245,0.70);
  --muted:rgba(200,190,230,0.50);
  --mono:'Space Mono',monospace;
  --sans:'Outfit',sans-serif;
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --out:cubic-bezier(0.16,1,0.3,1);
}

html,body{
  font-family:var(--sans);
  background:#0a0514;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

.bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(120,0,180,0.35) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(0,80,160,0.30) 0%,transparent 55%),
    radial-gradient(ellipse at 60% 80%,rgba(0,140,120,0.25) 0%,transparent 50%),
    #0a0514;
}
.bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 2% 11%,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 9% 7%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 14% 19%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 26% 13%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 34% 9%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 5%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 53% 21%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 64% 24%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 71% 3%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 8%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 91% 20%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 11% 38%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 37% 34%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 56% 28%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 75% 45%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 95% 40%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 16% 64%,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 23% 53%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 45% 71%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 63% 65%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 82% 37%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 85% 56%,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 9% 85%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 26% 89%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 86%,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(2px 2px at 74% 82%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(1px 1px at 90% 83%,rgba(255,255,255,0.7) 0%,transparent 100%);
  animation:starTwinkle 8s ease-in-out infinite alternate-reverse;
}
.bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 5% 8%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 30% 18%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 57% 2%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 70% 7%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 5%,rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(2px 2px at 22% 36%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 48% 33%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 68% 50%,rgba(255,255,255,0.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 10% 62%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 17% 70%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1px 1px at 52% 68%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 75%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(2px 2px at 13% 88%,rgba(255,255,255,0.6) 0%,transparent 100%),
    radial-gradient(2px 2px at 54% 90%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 79%,rgba(255,255,255,0.8) 0%,transparent 100%),
    radial-gradient(2px 2px at 93% 81%,rgba(255,255,255,0.5) 0%,transparent 100%);
  animation:starTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starTwinkle{from{opacity:0.5}to{opacity:1}}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:0.5px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.glass-shimmer{position:relative;overflow:hidden}
.glass-shimmer::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,transparent 60%);
  pointer-events:none;
}

nav{
  position:fixed;top:0;left:0;right:0;height:62px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;
  background:rgba(6,3,18,0.72);
  backdrop-filter:blur(40px) saturate(130%);
  -webkit-backdrop-filter:blur(40px) saturate(130%);
  border-bottom:0.5px solid rgba(232,121,200,0.10);
  z-index:1000;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);font-size:1.1rem;font-weight:700;
  font-family:var(--mono);letter-spacing:2px;
}
.nav-logo-icon{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:#fff;
  box-shadow:0 0 14px var(--pink-glow);
}
.nav-logo-text em{font-style:normal;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-links{list-style:none;display:flex;gap:0.2rem}
.nav-links a{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  font-size:0.78rem;font-weight:500;color:var(--muted);
  font-family:var(--mono);letter-spacing:0.5px;
  text-decoration:none;transition:color 0.2s,background 0.2s;
}
.nav-links a:hover{color:var(--text);background:rgba(232,121,200,0.07)}
.nav-links a.active{color:var(--pink)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;border-radius:100px;font-size:0.78rem;font-weight:700;
  font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  color:#fff;text-decoration:none;
  box-shadow:0 4px 18px var(--pink-glow);
  transition:opacity 0.2s,transform 0.15s;
}
.nav-cta:hover{opacity:0.85;transform:translateY(-1px)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:0.7rem 1.5rem;border-radius:100px;
  font-size:0.82rem;font-weight:700;
  font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;
  text-decoration:none;transition:all 0.22s var(--spring);
  cursor:pointer;border:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  color:#fff;box-shadow:0 4px 20px var(--pink-glow);
}
.btn-primary:hover{opacity:0.88;transform:translateY(-2px);box-shadow:0 8px 30px var(--pink-glow)}
.btn-glass{
  background:var(--glass-bg);
  border:0.5px solid var(--glass-border-pk);
  color:var(--text);
  backdrop-filter:blur(20px);
}
.btn-glass:hover{background:var(--pink-dim);border-color:rgba(232,121,200,0.4);transform:translateY(-2px)}

.proj-hero{
  min-height:60vh;display:flex;align-items:flex-end;
  padding:8rem 3.5rem 4rem;position:relative;z-index:1;overflow:hidden;
}
.proj-hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(232,121,200,0.07) 0%,rgba(34,212,245,0.04) 50%,transparent 70%);
  z-index:0;
}
.proj-hero-inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;width:100%}
.proj-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.75rem;font-weight:700;color:var(--muted);
  font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;
  text-decoration:none;margin-bottom:2rem;transition:color 0.2s;
}
.proj-back:hover{color:var(--pink)}
.proj-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.proj-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  font-family:var(--mono);
  padding:0.28rem 0.9rem;border-radius:100px;
  background:var(--pink-dim);color:var(--pink);border:0.5px solid var(--glass-border-pk);
}
.proj-badge.cy{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(34,212,245,0.30)}
.proj-owner{font-size:0.75rem;color:var(--muted);font-family:var(--mono);display:flex;align-items:center;gap:5px}
.proj-owner i{color:var(--pink);font-size:0.7rem}
.proj-hero h1{
  font-size:clamp(3rem,7vw,5.5rem);
  margin-bottom:1rem;line-height:1.04;font-weight:800;
  font-family:var(--sans);
}
.gradient-text{
  background:linear-gradient(90deg,var(--pink),#c084fc,var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.proj-hero .tagline{
  font-size:1.1rem;color:var(--muted);font-style:italic;margin-bottom:2rem;
  font-family:var(--mono);
}
.proj-hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.proj-icon-large{
  position:absolute;right:3.5rem;bottom:3rem;
  width:200px;height:200px;border-radius:40px;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;color:#fff;
  box-shadow:0 24px 60px var(--pink-glow),0 0 80px var(--cyan-glow);
  opacity:0.9;animation:floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}

.section{padding:5rem 3.5rem;position:relative;z-index:1}
.section-inner{max-width:1160px;margin:0 auto}
.section-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  font-family:var(--mono);color:var(--pink);margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem,4vw,2.8rem);font-weight:800;
  line-height:1.12;margin-bottom:1.2rem;
  font-family:var(--sans);
}
.section-sub{
  font-size:1rem;color:var(--muted);line-height:1.7;
  max-width:680px;margin-bottom:3rem;
  font-family:var(--sans);
}

.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.feat-card{padding:1.8rem;border-radius:16px}
.feat-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:1rem;
  background:var(--pink-dim);color:var(--pink);border:0.5px solid var(--glass-border-pk);
  transition:all 0.2s var(--spring);
}
.feat-card:hover .feat-icon{
  background:linear-gradient(135deg,var(--pink-dim),var(--cyan-dim));
  color:var(--cyan);border-color:rgba(34,212,245,0.3);
  box-shadow:var(--glow-cy);
}
.feat-name{font-family:var(--mono);font-weight:700;font-size:0.88rem;margin-bottom:0.35rem;letter-spacing:0.5px}
.feat-desc{font-size:0.83rem;color:var(--muted);line-height:1.62}

.deploy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.deploy-card{padding:1.5rem;text-align:center;border-radius:16px}
.deploy-card i{font-size:2rem;margin-bottom:0.8rem;display:block;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.deploy-name{font-family:var(--mono);font-weight:700;font-size:0.88rem;margin-bottom:0.3rem;letter-spacing:0.5px}
.deploy-desc{font-size:0.78rem;color:var(--muted)}

footer{
  padding:2.5rem 3.5rem;
  position:relative;z-index:1;
  background:rgba(6,3,18,0.60);
  backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(232,121,200,0.10);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-logo{
  font-family:var(--mono);font-size:1rem;font-weight:700;letter-spacing:2px;
}
.footer-logo em{
  font-style:normal;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{
  font-size:0.78rem;font-family:var(--mono);color:var(--muted);
  text-decoration:none;display:flex;align-items:center;gap:5px;
  letter-spacing:0.5px;transition:color 0.2s;
}
.footer-links a:hover{color:var(--pink)}
.footer-copy{font-family:var(--mono);font-size:0.72rem;color:var(--muted)}

.fade-up{animation:fadeUp 0.6s var(--out) both}
.d1{animation-delay:0.1s}.d2{animation-delay:0.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .proj-icon-large{display:none}
  .proj-hero{padding:8rem 1.4rem 4rem}
  .section{padding:3.5rem 1.4rem}
  .deploy-cards{grid-template-columns:1fr}
  nav .nav-links{display:none}
}