:root {
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Light Theme */
  --color-background-primary: #ffffff;
  --color-background-secondary: rgba(248, 250, 252, 0.8);
  --color-background-tertiary: #f8fafc;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-border-tertiary: rgba(226, 232, 240, 0.5);
  --color-border-secondary: rgba(203, 213, 225, 0.3);
  --color-background-success: rgba(236, 253, 245, 0.9);
  --color-text-success: #166534;
  --color-background-info: rgba(239, 246, 255, 0.9);
  --color-text-info: #1e40af;
  --color-glass-bg: rgba(255, 255, 255, 0.25);
  --color-glass-border: rgba(255, 255, 255, 0.18);
  --color-neon: #a78bfa;
  --color-gradient: linear-gradient(135deg, #5b4ef8 0%, #7c3aed 50%, #a78bfa 100%);
}

[data-theme="dark"] {
  --color-background-primary: #0a0f2e;
  --color-background-secondary: rgba(16, 26, 58, 0.8);
  --color-background-tertiary: #1a1b2e;
  --color-text-primary: #ffffff;
  --color-text-secondary: #c4b5fd;
  --color-border-tertiary: rgba(91, 78, 248, 0.2);
  --color-border-secondary: rgba(196, 181, 253, 0.1);
  --color-background-success: rgba(34, 197, 94, 0.2);
  --color-text-success: #22c55e;
  --color-background-info: rgba(59, 130, 246, 0.2);
  --color-text-info: #60a5fa;
  --color-glass-bg: rgba(0, 0, 0, 0.4);
  --color-glass-border: rgba(167, 139, 250, 0.2);
}


*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--color-background-tertiary);color:var(--color-text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh}
.site-wrapper{max-width:100%;width:100%;margin:0 auto;background:var(--color-background-primary);min-height:100vh;padding:0 1rem}
nav{background:#0a0f2e;padding:1rem 1rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-sizing:border-box}
.nav-logo{color:#fff;font-size:20px;font-weight:500;letter-spacing:1px}
.nav-logo span{color:#a78bfa}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{color:#c4b5fd;font-size:13px;text-decoration:none;cursor:pointer;transition:color .2s}
.nav-links a:hover{color:#fff}
.hero{background:linear-gradient(135deg,#0a0f2e 0%,#1e1b4b 60%,#2e1065 100%);padding:3.5rem 2rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}

.hero-text{flex:1;min-width:220px}

.hero h1 span{background:linear-gradient(135deg,#a78bfa,#5b4ef8,#7c3aed);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#a78bfa;animation:shimmer 3s ease-in-out infinite}

@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-avatar{animation:float 6s ease-in-out infinite;flex-shrink:0}

@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(2deg)}}

@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

.hero-avatar:hover{animation-play-state:paused;transform:scale(1.1) !important}

.stat-num{counter-reset:stat-counter 0;transition:0s 0.5s linear;opacity:1}

.stat.animate .stat-num{counter-increment:stat-counter;counter-reset:stat-counter 0;transition:0s 1s linear !important}

.stat-num:after{content:counter(stat-counter);font-size:inherit}
.hero-text{flex:1;min-width:220px}
.hero-badge{display:inline-block;background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);color:#c4b5fd;font-size:11px;padding:4px 12px;border-radius:20px;margin-bottom:1rem;letter-spacing:.5px}
.hero h1{color:#fff;font-size:2.2rem;font-weight:500;line-height:1.2;margin-bottom:.5rem}
.hero h1 span{color:#a78bfa}
.hero p{color:#9ca3af;font-size:15px;line-height:1.7;margin-bottom:1.5rem}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-primary{background:#5b4ef8;color:#fff;border:none;padding:10px 22px;border-radius:8px;font-size:14px;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:#4f46e5}
.btn-outline{background:transparent;color:#c4b5fd;border:1px solid rgba(167,139,250,.4);padding:10px 22px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}
.btn-outline:hover{background:rgba(167,139,250,.1)}
.hero-avatar{width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,#5b4ef8,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:500;color:#fff;border:4px solid rgba(167,139,250,.3);flex-shrink:0}
.hero-stats{display:flex;gap:2rem;margin-top:1.5rem}
.stat{text-align:center}
.stat-num{color:#a78bfa;font-size:1.4rem;font-weight:500}
.stat-label{color:#6b7280;font-size:11px}
section{padding:2rem 1rem}
.section-title{font-size:1.4rem;font-weight:500;margin-bottom:.4rem;color:var(--color-text-primary)}
.section-sub{color:var(--color-text-secondary);font-size:14px;margin-bottom:2rem}
.accent-line{width:40px;height:3px;background:#5b4ef8;border-radius:2px;margin:.5rem 0 1.5rem}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.skills-grid{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards}.skills-grid.animate{animation-delay:.2s}.skill-card{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.2rem;text-align:center;transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.skill-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(91,78,248,0.1),transparent);transition:left .5s}.skill-card:hover::before{left:100%}.skill-card:hover{transform:translateY(-8px) scale(1.02);border-color:#5b4ef8;box-shadow:0 12px 30px rgba(91,78,248,0.3)}
.skill-card:hover{transform:translateY(-3px);border-color:#5b4ef8}
.skill-icon{font-size:28px;margin-bottom:.5rem}
.skill-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.skill-level{font-size:11px;color:var(--color-text-secondary);margin-top:3px}
.skill-bar{height:4px;background:var(--color-border-tertiary);border-radius:2px;margin-top:8px;overflow:hidden}
.skill-fill{height:100%;background:#5b4ef8;border-radius:2px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.services-grid{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards}.services-grid.animate{animation-delay:.3s}.service-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.5rem;transition:all .4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.service-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:#5b4ef8;transition:width .4s ease}.service-card:hover::after{width:100%}.service-card:hover{border-color:#5b4ef8;transform:translateY(-5px) scale(1.01);box-shadow:0 15px 40px rgba(91,78,248,0.2)}
.service-card:hover{border-color:#5b4ef8;transform:translateY(-2px)}
.service-icon{width:44px;height:44px;border-radius:10px;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:1rem}
.service-card h3{font-size:15px;font-weight:500;margin-bottom:.4rem}
.service-card p{font-size:13px;color:var(--color-text-secondary);line-height:1.6}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.pricing-grid{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards}.pricing-grid.animate{animation-delay:.4s}.price-card{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:14px;padding:1.5rem;position:relative;transition:all .3s ease;cursor:pointer;perspective:1000px}.price-card:hover{ border:2px solid #5b4ef8; box-shadow:0 20px 50px rgba(91,78,248,0.3); transform:translateY(-10px) rotateX(5deg);}
.price-card:hover{ border:2px solid #5b4ef8; box-shadow:0 8px 20px rgba(91,78,248,0.2); transform:translateY(-3px) }
.price-card.featured{ border:2px solid #5b4ef8; box-shadow:0 12px 30px rgba(91,78,248,0.4); transform:translateY(-5px) }
.price-card.featured{ border:2px solid #5b4ef8; box-shadow:0 10px 25px rgba(91,78,248,0.3); transform:translateY(-5px) }
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#5b4ef8;color:#fff;font-size:11px;padding:3px 14px;border-radius:20px;white-space:nowrap}
.price-name{font-size:14px;color:var(--color-text-secondary);margin-bottom:.5rem}
.price-amount{font-size:1.8rem;font-weight:500;color:var(--color-text-primary)}
.price-amount span{font-size:13px;color:var(--color-text-secondary);font-weight:400}
.price-features{list-style:none;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}
.price-features li{font-size:13px;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px}
.check{color:#5b4ef8;font-size:14px;font-weight:500}
.price-btn{width:100%;background:var(--color-background-secondary);border:0.5px solid var(--color-border-secondary);color:var(--color-text-primary);padding:10px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s;margin-top:.5rem}
.price-btn:hover{background:#5b4ef8;color:#fff;border-color:#5b4ef8}
.price-card.featured .price-btn{background:#5b4ef8;color:#fff;border-color:#5b4ef8}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.portfolio-grid{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards}.portfolio-grid.animate{animation-delay:.5s}.portfolio-card{background:var(--color-background-secondary);border-radius:12px;overflow:hidden;border:0.5px solid var(--color-border-tertiary);transition:all .4s ease;position:relative}.portfolio-card:hover{transform:translateY(-10px) scale(1.05);border-color:#5b4ef8;box-shadow:0 20px 50px rgba(91,78,248,0.25)}.portfolio-info{transform:translateY(100%);transition:all .4s ease}.portfolio-card:hover .portfolio-info{transform:translateY(0)}
.portfolio-card:hover{transform:translateY(-3px)}
.portfolio-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.portfolio-info{padding:1rem}
.portfolio-info h4{font-size:14px;font-weight:500;margin-bottom:3px}
.portfolio-info p{font-size:12px;color:var(--color-text-secondary)}
.port-tag{display:inline-block;background:var(--color-background-info);color:var(--color-text-info);font-size:10px;padding:2px 8px;border-radius:20px;margin-top:.4rem}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;opacity:0;transform:translateX(-30px);animation:slideInLeft 0.8s ease forwards}.testimonial-grid.animate{animation-delay:.6s}.testimonial-card{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.25rem;transition:all .3s ease;animation:slideUp 0.6s ease forwards}.testimonial-card:nth-child(1){animation-delay:.7s}.testimonial-card:nth-child(2){animation-delay:.8s}.testimonial-card:nth-child(3){animation-delay:.9s}@keyframes slideInLeft{to{opacity:1;transform:translateX(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.testimonial-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 40px rgba(91,78,248,0.2)}
.testimonial-card{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.25rem}
.stars{color:#f59e0b;font-size:14px;margin-bottom:.5rem;letter-spacing:2px}
.testi-text{font-size:13px;color:var(--color-text-secondary);line-height:1.7;font-style:italic;margin-bottom:.75rem}
.testi-author{display:flex;align-items:center;gap:.5rem}
.testi-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#fff;flex-shrink:0}
.testi-name{font-size:13px;font-weight:500}
.testi-loc{font-size:11px;color:var(--color-text-secondary)}
.about-inner{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;opacity:0;animation:fadeInScale 1s ease forwards;animation-delay:.2s}.about-av{animation:pulse 2s infinite}@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.about-av{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#5b4ef8,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:500;color:#fff;flex-shrink:0}
.about-text p{font-size:14px;color:var(--color-text-secondary);line-height:1.8;margin-bottom:.75rem}
.about-text strong{color:var(--color-text-primary)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:1024px){
  .site-wrapper{padding:0 .5rem;max-width:900px}
  nav{padding:0.75rem 1rem}
  section{padding:1.5rem 1rem}
  .hero{padding:2.5rem 1rem}
  .services-grid,.pricing-grid,.portfolio-grid,.testimonial-grid,.skills-grid{grid-template-columns:1fr;gap:1rem}
  .hero h1{font-size:1.8rem}
  .hero-stats{gap:1rem;flex-wrap:wrap;justify-content:center}
}

@media(max-width:480px){
  .site-wrapper{padding:0}
  nav{padding:0.5rem;flex-direction:column;gap:1rem;padding-bottom:1rem}
  .nav-links{gap:1rem;flex-wrap:wrap;justify-content:center}
  section{padding:1.5rem 0.5rem}
  .hero{padding:2rem 0.5rem;flex-direction:column;text-align:center;gap:1.5rem}
  .hero-avatar{order:-1}
  .hero h1{font-size:1.5rem}
  .hero-btns{justify-content:center;flex-direction:column}
  .about-inner, .contact-inner{flex-direction:column;gap:1.5rem;text-align:center}
}

@media(max-width:600px){.contact-inner{grid-template-columns:1fr}}
.contact-info h3{font-size:15px;font-weight:500;margin-bottom:.75rem}
.contact-item{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:13px;color:var(--color-text-secondary)}
.contact-icon{width:36px;height:36px;background:var(--color-background-secondary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.contact-form{display:flex;flex-direction:column;gap:.75rem}
.contact-form{opacity:0;animation:fadeInUp 0.8s ease forwards;animation-delay:.3s}.contact-form input,.contact-form textarea{border-radius:8px;font-size:13px;padding:10px 12px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-secondary);color:var(--color-text-primary);width:100%;transition:all .3s ease}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#5b4ef8;transform:scale(1.02);box-shadow:0 0 20px rgba(91,78,248,0.3)}.submit-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 25px rgba(91,78,248,0.4)}
.contact-form textarea{height:90px;resize:vertical}
.submit-btn{background:#5b4ef8;color:#fff;border:none;padding:11px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500}
.submit-btn:hover{background:#4f46e5}

/* Premium Feedback Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(6px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: linear-gradient(145deg, #1e1b4b, #0a0f2e);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 24px;
  padding: 2.5rem;
  width: 90%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal h2 {
  font-size: 1.6rem; color: #fff; margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #a78bfa, #5b4ef8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.modal p { font-size: 0.9rem; color: #9ca3af; margin-bottom: 1.5rem; }
.modal-close {
  position: absolute; top: 1rem; right: 1.5rem;
  background: none; border: none; color: #9ca3af; font-size: 1.6rem;
  cursor: pointer; transition: all .2s;
}
.modal-close:hover { color: #a78bfa; transform: rotate(90deg); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.85rem; color: #c4b5fd; margin-bottom: 0.5rem; font-weight: 500; }
.form-group input, .form-group textarea {
  width: 100%; padding: 12px 16px; border: 1px solid rgba(167,139,250,0.3);
  border-radius: 12px; background: rgba(255,255,255,0.05);
  color: #fff; font-size: 0.9rem; transition: all .2s;
  backdrop-filter: blur(10px);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9ca3af; }
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: #5b4ef8; box-shadow: 0 0 0 3px rgba(91,78,248,0.2);
  transform: translateY(-1px);
}
.form-group textarea { resize: vertical; min-height: 100px; }

.star-row {
  display: flex; gap: 8px; margin-top: 12px; padding: 16px;
  background: rgba(91,78,248,0.1); border: 1px solid rgba(167,139,250,0.3);
  border-radius: 16px; align-items: center;
}
.star-btn {
  background: none; border: none; font-size: 2rem; cursor: pointer;
  color: #6b7280; transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  padding: 8px; line-height: 1; border-radius: 8px;
}
.star-btn:hover, .star-btn.active { color: #fbbf24 !important; transform: scale(1.2); }
.rating-label { margin-left: 16px; font-size: 0.9rem; color: #9ca3af; font-weight: 500; }

.feedback-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px; margin-top: 3rem;
}
.feedback-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(167,139,250,0.2);
  border-radius: 20px; padding: 2rem; backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}
.feedback-card:hover {
  transform: translateY(-8px); border-color: #5b4ef8;
  box-shadow: 0 20px 40px rgba(91,78,248,0.2);
}
.feedback-stars { font-size: 1.1rem; margin-bottom: 1rem; }
.feedback-author { display: flex; align-items: center; gap: 12px; margin-top: 1.5rem; }
.author-avatar { 
  width: 40px; height: 40px; border-radius: 50%; 
  background: linear-gradient(135deg, #5b4ef8, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: white; font-size: 0.9rem;
}
.author-info h4 { font-size: 0.95rem; color: #fff; margin: 0; }
.author-info p { font-size: 0.8rem; color: #9ca3af; margin: 0; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

footer{background:#0a0f2e;padding:1.5rem 2rem;text-align:center}

/* Star Rating */
.star-rating{display:flex;gap:4px;cursor:pointer;font-size:20px}
.star-rating .star{color:#d1d5db;transition:all .2s;cursor:pointer}
.star-rating .star:hover,.star-rating .star.filled{color:#fbbf24 !important}
.star-rating .star.half{color:#f59e0b}
.star-rating input{display:none}


footer p{color:#6b7280;font-size:12px}
footer span{color:#a78bfa}
.bg1{background:linear-gradient(135deg,#ede9fe,#ddd6fe)}
.bg2{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
.bg3{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.bg4{background:linear-gradient(135deg,#fee2e2,#fecaca)}
.bg5{background:linear-gradient(135deg,#e0f2fe,#bae6fd)}
.bg6{background:linear-gradient(135deg,#f0fdf4,#bbf7d0)}