:root{
  --bg:#09090b;
  --bg2:#18181b;
  --w:#ffffff;
  --gray:#71717a;
  --purple:#7c3aed;
  --purple2:#a78bfa;
  --border:rgba(255,255,255,0.06);
  --font:'Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--w);overflow-x:hidden}

/* NAV */
nav{
  position:sticky;top:0;z-index:200;background:rgba(9,9,11,0.8);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 5%;border-bottom:1px solid var(--border);
}
.logo{font-size:1.4rem;font-weight:900;letter-spacing:-0.03em}
.logo span{color:var(--purple)}
.nav-links{display:flex;gap:2.5rem}
.nav-links a{color:var(--gray);text-decoration:none;font-size:0.88rem;font-weight:500;transition:color 0.2s}
.nav-links a:hover{color:var(--w)}
.nav-actions{display:flex;gap:1rem;align-items:center}
.nav-login{color:var(--gray);text-decoration:none;font-size:0.88rem;font-weight:500;transition:color 0.2s}
.nav-login:hover{color:var(--w)}
.nav-cta{
  padding:0.6rem 1.5rem;background:var(--purple);color:var(--w);text-decoration:none;
  border-radius:0.5rem;font-size:0.85rem;font-weight:600;transition:all 0.2s;
}
.nav-cta:hover{background:var(--purple2);color:var(--bg)}

/* HERO */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  padding:6rem 5%;position:relative;overflow:hidden;
}
.hero-glow{
  position:absolute;top:-200px;left:30%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(124,58,237,0.15),transparent 70%);
  pointer-events:none;
}
.hero-pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.5rem 1.2rem;background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.2);
  border-radius:2rem;font-size:0.8rem;font-weight:500;color:var(--purple2);margin-bottom:2rem;
}
.hero h1{font-size:clamp(3.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.04em;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--purple),var(--purple2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-content>p{font-size:1.1rem;color:var(--gray);line-height:1.6;max-width:460px;margin-bottom:2.5rem}
.hero-actions{display:flex;gap:1rem;margin-bottom:2.5rem}
.btn-main{
  padding:1rem 2.2rem;background:var(--purple);color:var(--w);text-decoration:none;
  border-radius:0.6rem;font-weight:700;font-size:0.9rem;transition:all 0.2s;
}
.btn-main:hover{background:var(--purple2);color:var(--bg);transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,58,237,0.3)}
.btn-main.big{padding:1.2rem 3rem;font-size:1rem}
.btn-alt{padding:1rem 2.2rem;color:var(--gray);text-decoration:none;font-weight:500;font-size:0.9rem;transition:color 0.2s}
.btn-alt:hover{color:var(--w)}
.hero-social{display:flex;align-items:center;gap:1rem}
.avatars{display:flex}
.av{width:32px;height:32px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px}
.av:first-child{margin-left:0}
.hero-social span{font-size:0.85rem;color:var(--gray)}
.hero-social strong{color:var(--w)}

/* MOCKUP */
.mockup-window{
  background:var(--bg2);border:1px solid var(--border);border-radius:1rem;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.dots{display:flex;gap:6px;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.1)}
.mock-body{display:flex;min-height:280px}
.mock-sidebar{width:50px;border-right:1px solid var(--border);padding:1rem 0.8rem;display:flex;flex-direction:column;gap:0.6rem}
.ms-item{width:100%;aspect-ratio:1;border-radius:0.4rem;background:rgba(255,255,255,0.05)}
.ms-item.active{background:rgba(124,58,237,0.3)}
.mock-content{flex:1;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.mc-row{display:flex;align-items:center;gap:1rem;padding:0.8rem 1rem;background:rgba(255,255,255,0.02);border-radius:0.5rem;border:1px solid var(--border)}
.mc-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.08)}
.w40{width:40%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.mc-tag{font-size:0.65rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:1rem;background:rgba(52,211,153,0.15);color:#34d399;white-space:nowrap}
.mc-tag.prog{background:rgba(124,58,237,0.15);color:var(--purple2)}

/* LOGOS */
.logos-strip{
  display:flex;justify-content:center;gap:4rem;padding:4rem 5%;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.logos-strip span{font-size:1.1rem;font-weight:700;color:rgba(255,255,255,0.15);letter-spacing:0.05em}

/* FEATURES */
.features{padding:6rem 5%}
.sec-head-center{text-align:center;margin-bottom:4rem}
.tag{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);margin-bottom:1rem}
.sec-head-center h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.sec-head-center h2 em{font-style:normal;color:var(--purple2)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.feat-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:1rem;
  padding:2.5rem 2rem;transition:all 0.3s;
}
.feat-card:hover{border-color:rgba(124,58,237,0.3);transform:translateY(-4px)}
.feat-icon{font-size:2rem;margin-bottom:1.5rem}
.feat-card h3{font-size:1.1rem;font-weight:700;margin-bottom:0.8rem}
.feat-card p{font-size:0.88rem;color:var(--gray);line-height:1.6}

/* PRICING */
.pricing{padding:6rem 5%;background:var(--bg2)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:900px;margin:0 auto}
.price-card{
  background:var(--bg);border:1px solid var(--border);border-radius:1rem;
  padding:3rem 2.5rem;position:relative;
}
.price-card.popular{border-color:var(--purple);box-shadow:0 0 40px rgba(124,58,237,0.15)}
.pop-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--purple);color:var(--w);font-size:0.7rem;font-weight:700;
  padding:0.3rem 1rem;border-radius:2rem;
}
.price-card h3{font-size:1.2rem;font-weight:700;margin-bottom:1rem}
.price-val{font-size:3rem;font-weight:900;letter-spacing:-0.03em;margin-bottom:0.5rem}
.price-val span{font-size:0.9rem;font-weight:400;color:var(--gray)}
.price-card>p{font-size:0.88rem;color:var(--gray);margin-bottom:2rem}
.price-card ul{list-style:none;margin-bottom:2.5rem;display:flex;flex-direction:column;gap:0.8rem}
.price-card li{font-size:0.88rem;color:var(--gray);padding-left:1.5rem;position:relative}
.price-card li::before{content:'✓';position:absolute;left:0;color:var(--purple2);font-weight:700}
.price-btn{
  display:block;text-align:center;padding:0.9rem;border:1px solid var(--border);
  border-radius:0.5rem;color:var(--w);text-decoration:none;font-weight:600;font-size:0.88rem;transition:all 0.2s;
}
.price-btn:hover{border-color:var(--purple);background:rgba(124,58,237,0.1)}
.price-btn.main{background:var(--purple);border-color:var(--purple)}
.price-btn.main:hover{background:var(--purple2);color:var(--bg)}

/* CTA */
.cta-final{text-align:center;padding:8rem 5%;position:relative}
.cta-final::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.1),transparent 70%);pointer-events:none;
}
.cta-final h2{font-size:clamp(2.2rem,4vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:2.5rem;letter-spacing:-0.02em}
.cta-final h2 em{font-style:normal;color:var(--purple2)}
.cta-final p{margin-top:1.5rem;font-size:0.88rem;color:var(--gray)}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:4rem 5% 2rem}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border)}
.f-brand h3{font-size:1.4rem;font-weight:900;margin-bottom:0.5rem}
.f-brand h3 span{color:var(--purple)}
.f-brand p{font-size:0.85rem;color:var(--gray)}
.f-col h4{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray);margin-bottom:1.2rem}
.f-col a{display:block;color:rgba(255,255,255,0.5);text-decoration:none;font-size:0.88rem;margin-bottom:0.8rem;transition:color 0.2s}
.f-col a:hover{color:var(--w)}
.f-bot{padding-top:2rem;text-align:center}
.f-bot p{font-size:0.75rem;color:var(--gray);opacity:0.5}

@media(max-width:900px){
  .nav-links,.nav-actions{display:none}
  .hero{grid-template-columns:1fr;gap:3rem}
  .logos-strip{flex-wrap:wrap;gap:2rem}
  .feat-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}