:root{
  --bg-1: #ffffff;
  --bg-2: #f8f9fa;
  --card: rgba(0,0,0,0.02);
  --muted: rgba(0,0,0,0.65);
  --muted-light: rgba(0,0,0,0.45);
  --glass: rgba(0,0,0,0.03);
  --purple: #7c3aed;
  --purple-light: #8b5cf6;
  --purple-dark: #6d28d9;
  --accent-a: #7c3aed;
  --accent-b: #8b5cf6;
  --accent-grad: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --border: rgba(0,0,0,0.08);
  --maxw: 1120px;
  --radius: 14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #ffffff;
  color: var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* NAV */
.nav{backdrop-filter: blur(6px);position:sticky;top:0;z-index:50;padding:18px 0;background:rgba(255,255,255,0.95);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{width:56px;height:56px;border-radius:10px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#ffffff;font-size:18px;box-shadow:0 4px 12px rgba(124,58,237,0.2)}
.brand-text .name{font-weight:700;font-size:18px}
.brand-text .dps-text{color:var(--purple)}
.brand-text .dynamics-text{color:#000000}
.brand-text .tag{font-size:12px;color:var(--muted)}

.links a{margin-left:18px;color:var(--text-secondary);text-decoration:none;font-weight:600;transition:color 0.2s}
.links a:hover{color:var(--purple)}
.btn{display:inline-block;padding:10px 20px;border-radius:999px;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none}
.btn-primary{background:var(--accent-grad);color:#ffffff !important;box-shadow:0 4px 16px rgba(124,58,237,0.25)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(124,58,237,0.35);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--purple);border:1.5px solid var(--purple)}
.btn-outline:hover{background:rgba(124,58,237,0.05)}
.btn-ghost{background:transparent;color:var(--text-secondary);border:none;padding:8px 16px}
.btn-ghost:hover{color:var(--purple);background:rgba(124,58,237,0.05)}
.btn-sm{padding:6px 14px;font-size:13px}

/* HERO */
.hero{padding:68px 0;min-height:72vh;display:flex;align-items:center;background:linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%)}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.hero-left h1{font-size:44px;line-height:1.05;margin:0 0 18px;color:var(--purple);font-weight:700}
.lead{color:var(--text-secondary);font-size:18px;max-width:700px;line-height:1.6}
.hero-ctas{margin-top:20px;display:flex;gap:12px;align-items:center}
.quick-stats{display:flex;gap:18px;margin-top:22px;list-style:none;padding:0}
.quick-stats li{background:var(--glass);padding:10px 14px;border-radius:10px;color:var(--text-secondary);font-weight:600;border:1px solid var(--border)}

/* HERO CARD */
.hero-card{background:#ffffff;border:1px solid var(--border);padding:18px;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.08)}
.card-header{display:flex;justify-content:space-between;align-items:center}
.small-muted{font-size:13px;color:var(--muted)}
.card-title{font-weight:700;font-size:16px;color:var(--text-primary)}
.chip{background:var(--accent-grad);padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:white}

/* job snippet */
.job-snippet{margin-top:12px}
.job-snippet .muted{color:var(--muted);font-size:13px}
.job-snippet p{color:var(--text-secondary);font-size:14px;line-height:1.5}

/* footer of card */
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.score{display:flex;align-items:center;gap:8px}
.score-value{background:var(--accent-grad);padding:8px 12px;border-radius:8px;color:#ffffff;font-weight:800}
.score-label{font-size:13px;color:var(--muted)}
.cta-row .btn{margin-left:8px}
.cta-row .btn.btn-sm{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.cta-row .btn.btn-sm:hover{background:rgba(124,58,237,0.05);border-color:var(--purple);color:var(--purple)}
.cta-row .btn-outline.btn-sm{color:var(--purple);border-color:var(--purple)}
.cta-row .btn-outline.btn-sm:hover{background:rgba(124,58,237,0.1)}

/* trust */
.trust{display:flex;gap:12px;margin-top:18px}
.trust-item{background:var(--glass);padding:10px 16px;border-radius:10px;border:1px solid var(--border)}
.trust-number{font-weight:800;color:var(--text-primary)}
.trust-label{font-size:13px;color:var(--muted)}

/* SECTIONS */
.section{padding:64px 0}
.features h2,.modes h2,.experience h2{font-size:28px;margin-bottom:10px;color:var(--text-primary);font-weight:700}
.section-lead{color:var(--text-secondary);margin-bottom:28px;font-size:16px}
.grid{display:grid;gap:20px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.feature{background:#ffffff;padding:22px;border-radius:12px;border:1px solid var(--border);transition:transform .25s,box-shadow .25s;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.feature:hover{transform:translateY(-8px);box-shadow:0 12px 32px rgba(124,58,237,0.12);border-color:var(--purple)}
.feature .icon{font-size:26px;margin-bottom:12px}
.feature h3{color:var(--text-primary);font-weight:600;margin-bottom:8px}
.feature p{color:var(--text-secondary);line-height:1.6}

/* modes */
.modes-inner .mode-card{background:#ffffff;padding:20px;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.25s}
.modes-inner .mode-card:hover{border-color:var(--purple);box-shadow:0 8px 24px rgba(124,58,237,0.1)}
.mode-title{color:var(--purple);font-weight:700;font-size:18px;margin-bottom:8px}
.modes-inner .mode-card p{color:var(--text-secondary);line-height:1.6}

/* experience split */
.experience .split{display:flex;gap:40px;align-items:center}
.experience .text{flex:1}
.experience .text .lead{color:var(--text-secondary);line-height:1.7}
.experience .text .bullets{color:var(--text-secondary);line-height:1.8}
.stats{display:flex;flex-direction:column;gap:12px;width:260px}
.stat{background:#ffffff;padding:18px;border-radius:12px;text-align:center;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.stat-number{font-weight:800;font-size:20px;color:var(--purple)}
.stat-label{color:var(--muted);font-size:13px}

/* demo panel */
.demo-panel{display:flex;gap:20px;align-items:flex-start;margin-top:18px}
.demo-controls{flex:1}
.demo-controls label{color:var(--text-primary);font-weight:600;display:block;margin-bottom:8px}
.profile-chip{background:rgba(124,58,237,0.1);padding:10px 12px;border-radius:999px;color:var(--purple);display:inline-block;font-weight:700;margin:10px 0;border:1px solid rgba(124,58,237,0.2)}
.control-row{display:flex;gap:12px;margin-top:12px}
.demo-screen{flex:1;background:#ffffff;padding:20px;border-radius:12px;border:1px solid var(--border);min-height:140px;display:flex;align-items:center;justify-content:center;color:var(--purple);font-weight:700;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.demo-screen .line{color:var(--text-secondary)}

/* CTA */
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:16px;background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(139,92,246,0.05));padding:36px;border-radius:12px;border:1px solid rgba(124,58,237,0.15);text-align:center}
.cta-inner h2{color:var(--text-primary);font-weight:700;margin-bottom:8px}
.cta-description{color:var(--text-secondary);font-size:16px;line-height:1.7;max-width:700px;margin:0 auto 20px}
.cta-inner .muted{color:var(--text-secondary)}

/* footer */
.footer{padding:32px 0;color:var(--muted);text-align:center;border-top:1px solid var(--border);background:#f8f9fa}
.footer-inner{display:flex;flex-direction:column;gap:12px;align-items:center}
.footer-brand{font-weight:600;color:var(--text-primary);font-size:15px}
.footer-contact{margin:4px 0}
.footer-email{color:var(--purple);text-decoration:none;font-weight:600;font-size:15px;transition:color 0.2s}
.footer-email:hover{color:var(--purple-dark);text-decoration:underline}
.footer .muted{font-size:13px;color:var(--muted)}

/* responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .experience .split{flex-direction:column}
  .stats{width:100%}
  .nav-inner{flex-direction:column;gap:12px}
}


/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

/* Modal content box */
.modal-content {
  background: #ffffff;
  margin: 10% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  position: relative;
  color: var(--text-primary);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-content h2 {
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 10px;
}

.modal-content .modal-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
}

/* Close button */
.close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.close:hover {
  color: var(--purple);
}

/* Input styling */
.modal-content input,
.modal-content select {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s;
}

.modal-content input:focus,
.modal-content select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Placeholder text */
.modal-content input::placeholder {
  color: var(--muted-light);
}

/* Submit button */
.modal-content button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: var(--accent-grad);
  color: #021428;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}


.modal-content select option {
  background: #ffffff;
  color: var(--text-primary);
  padding: 8px;
}