:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface2: #1a1a28;
  --text: #e8e8f0;
  --text2: #9090a8;
  --accent: #6c63ff;
  --accent2: #ff6b9d;
  --accent3: #00d4aa;
  --gradient: linear-gradient(135deg, var(--accent), var(--accent2));
  --gradient2: linear-gradient(135deg, var(--accent3), var(--accent));
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}

.noise {
  position:fixed; inset:0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03; pointer-events:none; z-index:9999;
}

.cursor-ring {
  width:40px;height:40px;border:2px solid var(--accent);
  border-radius:50%;position:fixed;pointer-events:none;
  transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;
  z-index:10000;mix-blend-mode:difference;
}

/* === Navbar === */
.navbar {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 48px;
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(108,99,255,.1);
  transition:transform .3s;
}

.nav-logo {
  font-size:24px;font-weight:800;
  background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.nav-links { display:flex;list-style:none;gap:8px;flex-wrap:wrap; }

.nav-links a {
  color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:8px;transition:all .3s;
  position:relative;
}

.nav-links a:hover,
.nav-links a.active {
  color:var(--text);background:rgba(108,99,255,.15);
}

.nav-toggle { display:none;flex-direction:column;cursor:pointer;gap:5px; }
.nav-toggle span { width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s; }

/* === Hero === */
.hero {
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:120px 24px 80px;
}

.hero-bg { position:absolute;inset:0;overflow:hidden; }
.orb {
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.25;animation:orbFloat 20s infinite;
}
.orb-1 { width:500px;height:500px;background:var(--accent);top:-10%;left:-10%; }
.orb-2 { width:400px;height:400px;background:var(--accent2);bottom:-10%;right:-10%;animation-delay:-7s; }
.orb-3 { width:300px;height:300px;background:var(--accent3);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s; }

@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(60px,-60px) scale(1.1); }
  66% { transform:translate(-40px,40px) scale(.9); }
}

.hero-content {
  text-align:center;max-width:720px;
  animation:fadeUp 1s ease;
}

@keyframes fadeUp {
  from { opacity:0;transform:translateY(40px); }
  to { opacity:1;transform:translateY(0); }
}

.hero-image-wrapper {
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;
}

.hero-image {
  width:140px;height:140px;border-radius:50%;
  box-shadow:0 0 60px rgba(108,99,255,.3);
  position:relative;overflow:hidden;
  border:3px solid var(--accent);
}

.hero-photo {
  width:100%;height:100%;object-fit:cover;
  display:block;
}

.hero-status {
  font-size:13px;color:var(--accent3);display:flex;align-items:center;gap:8px;
  background:rgba(0,212,170,.1);padding:6px 16px;border-radius:20px;
}
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--accent3);animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

.hero-title { margin-bottom:20px; }
.greeting { display:block;font-size:18px;color:var(--text2);font-weight:400;margin-bottom:4px; }
.name { display:block;font-size:56px;font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1; }
.role { display:block;font-size:20px;color:var(--text2);font-weight:300;margin-top:8px; }

.hero-desc { font-size:16px;color:var(--text2);margin-bottom:32px;max-width:560px;margin-inline:auto; }

.hero-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px; }

.btn {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:12px;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;
  transition:all .3s;font-family:inherit;
}

.btn-primary {
  background:var(--gradient);color:#fff;
  box-shadow:0 4px 20px rgba(108,99,255,.3);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(108,99,255,.4); }

.btn-outline {
  background:transparent;color:var(--text);border:1px solid rgba(108,99,255,.3);
}
.btn-outline:hover { border-color:var(--accent);background:rgba(108,99,255,.1);transform:translateY(-2px); }

.hero-social { display:flex;gap:16px;justify-content:center; }
.social-link {
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:18px;
  background:var(--surface);border:1px solid rgba(255,255,255,.05);
  transition:all .3s;text-decoration:none;
}
.social-link:hover { color:var(--accent);border-color:var(--accent);transform:translateY(-3px); }

.scroll-indicator {
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text2);font-size:12px;animation:bounce 2s infinite;
}
@keyframes bounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(8px); } }

/* === Sections === */
.section {
  padding:100px 24px;position:relative;
}

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

.section-title {
  font-size:40px;font-weight:800;text-align:center;margin-bottom:8px;
  position:relative;
}
.section-title::after {
  content:attr(data-text);position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:80px;font-weight:800;color:rgba(108,99,255,.04);white-space:nowrap;
  pointer-events:none;
}

.section-subtitle {
  text-align:center;color:var(--text2);font-size:16px;margin-bottom:60px;
}

/* === About === */
.about-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}

.about-card {
  background:var(--surface);border-radius:var(--radius);padding:32px 24px;
  border:1px solid rgba(255,255,255,.04);transition:all .4s;
  position:relative;overflow:hidden;
}

.about-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gradient);transform:scaleX(0);transform-origin:left;
  transition:transform .4s;
}

.about-card:hover::before { transform:scaleX(1); }

.about-card:hover {
  transform:translateY(-6px);border-color:rgba(108,99,255,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.3);
}

.about-card i { font-size:32px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px; }
.about-card h3 { font-size:18px;margin-bottom:12px; }
.about-card p { font-size:14px;color:var(--text2); }

/* === Skills === */
.skills-section {
  background:linear-gradient(180deg,var(--bg),var(--surface),var(--bg));
}

.skills-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;
}

.skill-item {
  background:var(--surface2);border-radius:12px;padding:20px 16px;
  text-align:center;border:1px solid rgba(255,255,255,.04);
  transition:all .4s;cursor:default;
  position:relative;overflow:hidden;
}

.skill-item::after {
  content:'';position:absolute;inset:0;
  background:var(--gradient);opacity:0;transition:opacity .4s;
}

.skill-item:hover::after { opacity:.08; }

.skill-item:hover { transform:translateY(-4px) scale(1.02);border-color:rgba(108,99,255,.2); }

.skill-icon { font-size:32px;margin-bottom:8px;display:block; }
.skill-name { font-size:13px;font-weight:600;position:relative;z-index:1; }

.skill-bar {
  margin-top:8px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.06);overflow:hidden;
  position:relative;z-index:1;
}
.skill-fill {
  height:100%;border-radius:2px;
  background:var(--gradient);width:0;
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
}

/* === Timeline === */
.timeline { position:relative;max-width:800px;margin:0 auto; }

.timeline::before {
  content:'';position:absolute;top:0;bottom:0;left:24px;
  width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent2),transparent);
}

.timeline-item {
  position:relative;padding-left:60px;padding-bottom:40px;
  opacity:0;transform:translateX(-30px);
  transition:all .6s ease;
}

.timeline-item.visible { opacity:1;transform:translateX(0); }

.timeline-dot {
  position:absolute;left:14px;top:4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:3px solid var(--accent);
  z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--accent);
}

.timeline-content {
  background:var(--surface);border-radius:var(--radius);padding:24px;
  border:1px solid rgba(255,255,255,.04);
  transition:all .3s;
}

.timeline-content:hover {
  border-color:rgba(108,99,255,.2);transform:translateX(4px);
}

.timeline-date {
  font-size:12px;color:var(--accent);font-weight:600;
  display:inline-block;padding:2px 12px;
  background:rgba(108,99,255,.1);border-radius:20px;margin-bottom:8px;
}

.timeline-content h3 { font-size:18px;margin-bottom:4px; }
.timeline-content .sub { font-size:14px;color:var(--accent2);margin-bottom:8px; }
.timeline-content .loc { font-size:13px;color:var(--text2);margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.timeline-content ul { list-style:none;padding:0; }
.timeline-content li { font-size:14px;color:var(--text2);padding:3px 0;padding-left:16px;position:relative; }
.timeline-content li::before { content:'›';position:absolute;left:0;color:var(--accent);font-weight:700; }

/* === Projects === */
.projects-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
  margin-bottom:48px;
}

.project-card {
  background:var(--surface);border-radius:var(--radius);padding:28px 24px;
  border:1px solid rgba(255,255,255,.04);
  transition:all .4s;position:relative;overflow:hidden;
}

.project-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gradient2);
}

.project-card:hover {
  transform:translateY(-6px);border-color:rgba(0,212,170,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.3);
}

.project-icon { font-size:36px;margin-bottom:12px;display:block; }
.project-card h3 { font-size:18px;margin-bottom:6px; }
.project-card .tech { font-size:12px;color:var(--accent3);margin-bottom:10px; }
.project-card p { font-size:14px;color:var(--text2);margin-bottom:16px; }

.project-link {
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);text-decoration:none;font-size:13px;font-weight:600;
  transition:gap .3s;
}
.project-link:hover { gap:12px; }

.portfolio-cta {
  text-align:center;padding:40px;background:var(--surface);
  border-radius:var(--radius);border:1px solid rgba(108,99,255,.1);
}

.portfolio-cta p { margin-bottom:16px;color:var(--text2); }

/* === References === */
.refs-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
}

.ref-card {
  background:var(--surface);border-radius:var(--radius);padding:28px 24px;
  border:1px solid rgba(255,255,255,.04);
  transition:all .4s;position:relative;
}

.ref-card::before {
  content:'"';position:absolute;top:16px;right:24px;
  font-size:48px;color:rgba(108,99,255,.1);font-family:Georgia,serif;
}

.ref-card:hover {
  transform:translateY(-4px);border-color:rgba(108,99,255,.2);
}

.ref-card h3 { font-size:16px;margin-bottom:4px; }
.ref-card .title { font-size:13px;color:var(--accent2);margin-bottom:4px; }
.ref-card .company { font-size:13px;color:var(--text2);margin-bottom:8px; }
.ref-card .phone {
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--accent3);text-decoration:none;
}

/* === Contact === */
.contact-section {
  background:linear-gradient(180deg,var(--bg),var(--surface));
}

.contact-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:start;
}

.contact-info { display:flex;flex-direction:column;gap:20px; }

.contact-item {
  display:flex;align-items:center;gap:16px;
  background:var(--surface2);padding:20px;border-radius:12px;
  border:1px solid rgba(255,255,255,.04);
  transition:all .3s;
}

.contact-item:hover { border-color:rgba(108,99,255,.2);transform:translateX(4px); }

.contact-item i {
  width:44px;height:44px;border-radius:12px;
  background:rgba(108,99,255,.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  flex-shrink:0;
}

.contact-item div { display:flex;flex-direction:column; }
.contact-item strong { font-size:13px;color:var(--text2);font-weight:500; }
.contact-item span { font-size:15px; }
.contact-item a { color:var(--accent3);text-decoration:none; }

.contact-form {
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface);padding:32px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.04);
}

.contact-form input,
.contact-form textarea {
  padding:14px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:var(--surface2);color:var(--text);font-size:14px;
  font-family:inherit;outline:none;transition:border-color .3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color:var(--accent);
}

.contact-form button { align-self:flex-start; }

/* === Footer === */
.footer {
  text-align:center;padding:40px 24px;
  color:var(--text2);font-size:14px;
  border-top:1px solid rgba(255,255,255,.04);
}

.footer p { margin:4px 0; }

/* === Media Queries === */
@media (max-width:768px) {
  .navbar { padding:12px 20px; }
  .nav-links {
    position:fixed;top:0;right:-100%;width:280px;height:100vh;
    background:var(--surface);flex-direction:column;
    padding:80px 32px;gap:4px;
    transition:right .3s;backdrop-filter:blur(20px);
    border-left:1px solid rgba(108,99,255,.1);
  }
  .nav-links.open { right:0; }
  .nav-toggle { display:flex; }

  .name { font-size:36px; }
  .section-title { font-size:28px; }
  .section-title::after { font-size:48px;top:-12px; }

  .hero { padding:100px 20px 60px; }
  .hero-image { width:110px;height:110px; }
  .initials { font-size:36px; }

  .contact-grid { grid-template-columns:1fr; }

  .skills-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  .about-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .refs-grid { grid-template-columns:1fr; }
}

/* === Scroll reveal === */
.reveal {
  opacity:0;transform:translateY(40px);
  transition:all .7s ease;
}
.reveal.visible { opacity:1;transform:translateY(0); }

/* === Toast === */
.toast {
  position:fixed;bottom:32px;right:32px;
  padding:16px 24px;border-radius:12px;
  background:var(--surface2);border:1px solid var(--accent3);
  color:var(--accent3);font-size:14px;
  box-shadow:var(--shadow);
  transform:translateY(100px);opacity:0;
  transition:all .4s;z-index:10001;
}
.toast.show { transform:translateY(0);opacity:1; }