:root {
    --bg: #21113d;
    --surface: #ffffff;
    --surface-soft: #f0e9ff;
    --text: #000000;
    --muted: #171717;
    --accent: #c084fc;
    --accent-strong: #a855f7;
    --line: rgba(216, 201, 239, .24);
    --sans: "Manrope", sans-serif;
    --mono: "DM Mono", monospace;
    --radius: 18px;
    --shadow: 0 18px 44px rgba(15, 31, 42, .08);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 8%, rgba(126, 34, 206, .34), transparent 27rem),
      radial-gradient(circle at 88% 78%, rgba(168, 85, 247, .24), transparent 30rem),
      var(--bg);
    color: var(--text);
    font: 400 16px/1.65 var(--sans);
  }
  body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .3;
    background-image:
      linear-gradient(rgba(216, 201, 239, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(216, 201, 239, .035) 1px, transparent 1px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='360' viewBox='0 0 420 360'%3E%3Cg fill='none' stroke='%23d8c9ef' stroke-opacity='.2' stroke-width='1.2'%3E%3Cpath d='M30 82 112 36l88 48-24 106-106 22Z'/%3E%3Cpath d='M112 36 166 8l96 54-62 22'/%3E%3Cpath d='M200 84 298 42l92 70-48 104-104-24'/%3E%3Cpath d='M24 274 112 212l90 48-20 88H72Z'/%3E%3Cpath d='M202 260 300 216l94 70-62 70-110-36Z'/%3E%3C/g%3E%3Cg fill='%23c084fc' fill-opacity='.7'%3E%3Ccircle cx='30' cy='82' r='3'/%3E%3Ccircle cx='112' cy='36' r='3'/%3E%3Ccircle cx='200' cy='84' r='3'/%3E%3Ccircle cx='166' cy='8' r='2.5'/%3E%3Ccircle cx='298' cy='42' r='3'/%3E%3Ccircle cx='390' cy='112' r='3'/%3E%3Ccircle cx='24' cy='274' r='3'/%3E%3Ccircle cx='112' cy='212' r='3'/%3E%3Ccircle cx='202' cy='260' r='3'/%3E%3Ccircle cx='300' cy='216' r='3'/%3E%3Ccircle cx='394' cy='286' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 42px 42px;
    background-size: 42px 42px, 42px 42px, 420px 360px;
  }
  body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .5;
    background:
      radial-gradient(circle at 18% 28%, rgba(192, 132, 252, .11), transparent 8rem),
      radial-gradient(circle at 78% 68%, rgba(168, 85, 247, .1), transparent 9rem);
    background-size: 260px 260px, 340px 340px;
  }
  body:not(.light) { --bg: #120b24; --surface: #211538; --surface-soft: #2d2149; --text: #000000; --muted: #171717; --line: #41345b; --shadow: 0 18px 44px rgba(0, 0, 0, .2); }
  a { color: inherit; text-decoration: none; }
  button, input, textarea { font: inherit; }
  button { cursor: pointer; }
  .container { width: min(1120px, calc(100% - 48px)); margin: auto; }
  .scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 100; width: 0; height: 3px; background: var(--accent); }
  .page-glow { position: fixed; z-index: -1; width: 300px; height: 300px; border-radius: 50%; filter: blur(110px); opacity: .08; pointer-events: none; }
  .page-glow-one { top: 5%; left: -200px; background: var(--accent); }
  .page-glow-two { top: 48%; right: -210px; background: var(--accent); }

  .site-header { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .25s, box-shadow .25s; }
  .site-header.scrolled { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px); }
  .navbar { display: flex; align-items: center; justify-content: space-between; height: 76px; }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 800; }
  .brand > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font: 500 12px var(--mono); }
  .brand b { font-weight: 800; }.brand b span, h1 span, h2 span { color: var(--accent); }
  .nav-links { display: flex; align-items: center; gap: 25px; color: var(--muted); font-size: 13px; font-weight: 700; }
  .nav-links a { position: relative; padding: 9px 0; transition: color .2s; }.nav-links a:hover, .nav-links a.active { color: var(--text); }
  .nav-links a.active::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 2px; content: ""; background: var(--accent); }
  .nav-resume { padding: 9px 14px !important; border: 1px solid var(--accent); border-radius: 9px; color: var(--accent) !important; }.nav-resume:hover { background: var(--accent); color: #fff !important; }
  .theme-toggle { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); }.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }.theme-toggle svg { width: 16px; fill: currentColor; }
  .menu-toggle { display: none; border: 0; background: transparent; }.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px; background: var(--text); }

  .section { padding: 112px 0; background: rgba(15, 11, 25, .12); }
  .section-border { border-top: 1px solid var(--line); background: rgba(15, 11, 25, .18); }
  .hero {
    position: relative;
    min-height: 780px;
    padding-top: 175px;
    background: radial-gradient(circle at 72% 38%, rgba(192, 132, 252, .12), transparent 28rem);
    --hero-white: #fff;
    --hero-lavender: #e9d5ff;
    --hero-muted: #d8c9ef;
    --hero-purple: #c084fc;
  }
  .hero::before {
    position: absolute;
    top: 76px;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: min(62%, 760px);
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, rgba(7, 3, 18, .62), rgba(13, 5, 30, .34) 68%, transparent);
  }
  .hero-grid, .about-grid, .journey-grid, .education-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .hero-grid { position: relative; z-index: 1; }
  .eyebrow, .section-label, .project-type, .timeline-date, .edu-year { color: var(--accent); font: 800 12px var(--mono); letter-spacing: .13em; }
  .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; }.eyebrow i, .activity-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .hero-kicker { color: var(--hero-lavender); font: 500 12px var(--mono); letter-spacing: .15em; }.hero h1 { margin: 12px 0 15px; color: var(--hero-white); text-shadow: 0 0 24px rgba(192, 132, 252, .18); font-size: clamp(64px, 9vw, 108px); line-height: .92; letter-spacing: -.09em; }.hero h1 span { color: var(--hero-purple); }.hero h2 { min-height: 48px; color: var(--hero-lavender); font-size: clamp(21px, 3vw, 31px); font-weight: 600; letter-spacing: -.04em; }.typing-cursor { color: var(--hero-purple); animation: blink 1s infinite; }
  .hero-text { max-width: 520px; margin: 22px 0 30px; color: var(--hero-muted); font-size: 16px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .button { display: inline-flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 9px; font-size: 12px; font-weight: 800; transition: transform .2s, background .2s, border-color .2s; }.button span { font-size: 17px; }.hero .button-primary { border: 1px solid var(--hero-purple); background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; box-shadow: 0 10px 24px rgba(76, 29, 149, .3); }.hero .button-primary:hover { transform: translateY(-3px); background: linear-gradient(135deg, #6d28d9, #9333ea); }.hero .button-ghost { border: 1px solid rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .92); color: #171022; }.hero .button-ghost:hover { transform: translateY(-3px); border-color: var(--hero-purple); }
  .hero .eyebrow { color: var(--hero-lavender); }.hero .hero-meta { color: var(--hero-muted); }.hero .hero-meta b { color: var(--hero-white); }.hero .connect-link { color: var(--hero-muted); border-color: rgba(216, 201, 239, .42); }.hero .connect-logo { background: rgba(22, 8, 43, .6); color: var(--hero-lavender); border-color: var(--hero-purple); }.hero .connect-arrow { color: var(--hero-purple); }.hero .connect-socials a { background: rgba(22, 8, 43, .58); border-color: rgba(216, 201, 239, .4); color: var(--hero-lavender); }.hero .scroll-note { color: var(--hero-muted); }
  .site-header:not(.scrolled) .brand, .site-header:not(.scrolled) .nav-links { color: #f7f0ff; }.site-header:not(.scrolled) .brand > span { color: #e9d5ff; border-color: #c084fc; }.site-header:not(.scrolled) .brand b span { color: #c084fc; }.site-header:not(.scrolled) .nav-links a:hover, .site-header:not(.scrolled) .nav-links a.active { color: #fff; }.site-header:not(.scrolled) .theme-toggle, .site-header:not(.scrolled) .menu-toggle { color: #e9d5ff; }
  .connect-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; }.connect-link { display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; transition: color .2s, border-color .2s; }.connect-link:hover { border-color: var(--accent); color: var(--text); }.connect-logo { display: grid; place-items: center; width: 32px; height: 32px; margin-right: 2px; border: 2px solid var(--accent); border-radius: 9px; background: var(--surface); color: var(--accent); font: 800 11px var(--mono); letter-spacing: -.08em; transition: transform .25s, background .2s, color .2s; }.connect-link:hover .connect-logo { transform: rotate(-8deg) translateY(-2px); background: var(--accent); color: #fff; }.connect-arrow { color: var(--accent); font-size: 16px; transition: transform .2s; }.connect-link:hover .connect-arrow { transform: translateX(3px); }.connect-socials { display: flex; align-items: center; gap: 8px; }.connect-socials a { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font: 800 12px var(--mono); transition: transform .2s, border-color .2s, background .2s, color .2s; }.connect-socials a svg, .socials a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }.connect-socials a.github-social-link svg, .socials a.github-social-link svg { fill: currentColor; stroke: none; }.connect-socials a:hover, .connect-socials a:focus-visible { transform: translateY(-3px); border-color: var(--accent); background: var(--accent); color: #fff; outline: none; }.socials a { font-weight: 800; }.socials a svg { width: 19px; height: 19px; }.hero-meta { display: flex; gap: 32px; margin-top: 58px; color: var(--muted); font-size: 11px; }.hero-meta b { display: block; color: var(--text); font: 500 18px var(--mono); }
  .hero-visual { position: relative; display: grid; min-height: 470px; place-items: center; }.profile-photo-card { position: relative; z-index: 2; width: min(100%, 355px); padding: 11px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); transform: rotate(2deg); animation: float 6s ease-in-out infinite; }.profile-photo { display: block; width: 100%; aspect-ratio: 4/5; border-radius: 17px; object-fit: cover; object-position: center 25%; }.profile-photo-caption { display: flex; justify-content: space-between; padding: 12px 4px 2px; font-size: 13px; }.profile-photo-caption span { color: var(--muted); font-size: 11px; }
  .profile-tech-orbit { position: absolute; z-index: 3; width: 410px; height: 335px; pointer-events: none; }.profile-tech { position: absolute; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 18px rgba(15,31,42,.08); color: var(--muted); font: 9px var(--mono); animation: badgeFloat 3.5s ease-in-out infinite; }.profile-tech b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-soft); color: var(--accent); font: 700 9px var(--mono); }.tech-python { top: 20px; right: 12px; }.tech-html { top: 124px; left: 0; animation-delay: -.8s; }.tech-css { right: 0; bottom: 54px; animation-delay: -1.7s; }.tech-javascript { bottom: 2px; left: 47px; animation-delay: -2.5s; }.scroll-note { margin-top: 28px; color: var(--muted); text-align: center; font: 10px var(--mono); letter-spacing: .14em; }.scroll-note span { margin-left: 8px; color: var(--accent); }

  .section-heading h2, .section-top h2, .contact-copy h2 { margin-top: 16px; font-size: clamp(28px, 3.4vw, 43px); line-height: 1.08; letter-spacing: -.055em; }.heading-line { width: 56px; height: 3px; margin-top: 26px; background: var(--accent); }
  .about-content .lead { margin-bottom: 20px; color: var(--text); font-size: 22px; line-height: 1.45; font-weight: 800; letter-spacing: -.03em; }.about-content > p:not(.lead), .skills-section-intro, .project-info > p:not(.project-type), .timeline ul, .contact-copy > p:not(.section-label), .cert-card p:not(.project-type), .service-card p { color: var(--muted); font-size: 14px; }
  .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }.about-stats strong { display: block; margin-bottom: 5px; font: 500 18px var(--mono); }.about-stats span, .grade small, .footer p { color: var(--muted); font-size: 11px; }
  #about { position: relative; isolation: isolate; }
  #about::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background: linear-gradient(90deg, rgba(9, 3, 22, .28), transparent 72%); }
  #about .section-label { color: #c084fc; }
  #about .heading-line { background: #c084fc; }
  #about .section-heading h2 { color: #fff; }
  #about .section-heading h2 span { color: #e9d5ff; }
  #about .about-content .lead { color: #fff; }
  #about .about-content > p:not(.lead) { color: #d8c9ef; }
  #about .about-stats { border-color: rgba(216, 201, 239, .3); }
  #about .about-stats strong { color: #fff; }
  #about .about-stats span { color: #d8c9ef; }

  .skills-section { background: var(--surface); }.skills-section-title { max-width: 600px; margin-bottom: 36px; }.skills-section-title h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 43px); line-height: 1.08; letter-spacing: -.055em; }.skills-section-intro { max-width: 480px; }.skills-grid-modern { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
  .skill-card-modern { min-height: 164px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 22px rgba(15,31,42,.04); transition: transform .3s, box-shadow .3s, border-color .3s; }.skill-card-modern:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }.skill-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }.skill-symbol { display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 9px; border-radius: 10px; background: var(--surface-soft); color: var(--accent); font: 800 14px var(--mono); }.skill-symbol svg { width: 30px; height: 30px; }.skill-level { color: var(--accent); font: 500 11px var(--mono); }.skill-card-modern h3 { margin-bottom: 3px; font-size: 16px; }.skill-card-modern p { color: var(--muted); font-size: 12px; }.skill-progress { height: 4px; margin-top: 20px; overflow: hidden; border-radius: 10px; background: var(--surface-soft); }.skill-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 1.1s ease; }.skill-card-modern.progress-visible .skill-progress span { width: var(--skill-level); }

  .section-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }.filter-group { display: flex; flex-wrap: wrap; gap: 7px; }.filter { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font: 10px var(--mono); }.filter:hover, .filter.active { border-color: var(--accent); color: var(--accent); }
  .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.project-card, .cert-card, .service-card, .education-card, .contact-form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.project-card { overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }.project-card:hover, .cert-card:hover, .service-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }.project-featured { grid-row: span 2; }.project-preview { position: relative; min-height: 230px; overflow: hidden; padding: 20px; background: #32145f; }.project-number { color: #d8c9ef; font: 11px var(--mono); }.preview-top { display: flex; justify-content: space-between; color: #eadcff; font: 11px var(--mono); }.mini-dot { width: 7px; height: 7px; margin-right: auto; border-radius: 50%; background: var(--accent); }.network { position: absolute; inset: 30px; opacity: .8; background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px) 20% 40%/80px 80px, radial-gradient(circle, #c084fc 0 3px, transparent 4px) 75% 65%/100px 100px; }.preview-label { position: absolute; right: 22px; bottom: 20px; color: #fff; font: 11px var(--mono); letter-spacing: .12em; }.preview-label strong { color: #e9d5ff; font-size: 19px; }.ecommerce { background: #40206b; }.portfolio { background: #2c1b55; }.store-ui, .portfolio-ui { display: grid; gap: 18px; color: #fff; font: 11px var(--mono); }.store-ui strong, .portfolio-ui strong { font-size: 34px; line-height: 1.02; letter-spacing: -.07em; }.store-product { width: 110px; height: 110px; align-self: end; justify-self: end; border-radius: 50%; background: rgba(255,255,255,.25); }.portfolio-ui em { color: #e9d5ff; font-style: normal; }.project-info { padding: 21px; }.project-info h3 { margin: 10px 0; font-size: 24px; }.project-info > p:not(.project-type) { margin-bottom: 17px; }.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }.project-tags span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font: 10px var(--mono); }.project-links { display: flex; gap: 18px; margin-top: 20px; color: var(--accent); font: 11px var(--mono); }.project-links a:hover { color: var(--accent-strong); }
  .project-card, .cert-card, .service-card, .education-card, .contact-form { --text: #000000; --muted: #171717; --accent: #7c3aed; --accent-strong: #6424c8; --line: #ddd0f5; }
  .project-card, .cert-card, .service-card, .education-card, .contact-form { color: #000; }
  .project-card h3, .cert-card h3, .service-card h3, .education-card h3 { color: #000; }
  .project-card p:not(.project-type), .cert-card p:not(.project-type), .service-card p, .education-card p { color: #171717; }

  .timeline { position: relative; padding-left: 27px; border-left: 1px solid var(--line); }.timeline-item { position: relative; padding: 0 0 34px 20px; }.timeline-marker { position: absolute; top: 5px; left: -33px; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }.timeline h3 { margin: 10px 0 3px; font-size: 23px; }.timeline h4 { color: var(--muted); font-size: 13px; font-weight: 500; }.timeline ul { margin: 15px 0 0 17px; }.timeline li { margin-top: 6px; }
  .education-list { display: grid; gap: 13px; }.education-card { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; padding: 23px; }.edu-content h3 { margin: 8px 0; font-size: 23px; line-height: 1.2; }.edu-content > p:last-child { color: var(--muted); font-size: 13px; }.grade { text-align: right; }.grade strong { font: 500 22px var(--mono); }
  .cert-grid, .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.cert-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 20px; transition: transform .3s, box-shadow .3s, border-color .3s; }.cert-mark, .cert-arrow { color: var(--accent); font-size: 22px; }.cert-card h3 { margin: 8px 0; font-size: 16px; }.cert-arrow { font-size: 16px; }.services-grid { grid-template-columns: repeat(4, 1fr); }.service-card { padding: 20px; transition: transform .3s, box-shadow .3s, border-color .3s; }.service-card > span { color: var(--muted); font: 11px var(--mono); }.service-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 24px 0 17px; border-radius: 10px; background: var(--surface-soft); color: var(--accent); font: 18px var(--mono); }.service-card h3 { margin-bottom: 8px; font-size: 16px; }.service-card a { display: inline-block; margin-top: 20px; color: var(--accent); font: 11px var(--mono); }

  .contact-copy h2 { font-size: clamp(28px, 3.4vw, 43px); }.contact-copy > p:not(.section-label) { max-width: 430px; margin: 24px 0; }.contact-details { display: grid; gap: 12px; }.contact-details a, .contact-details > span { display: grid; gap: 2px; color: var(--muted); font: 800 15px var(--mono); }.contact-details a:hover { color: var(--accent); }.contact-details a > span, .contact-details > span > span { color: var(--accent); font-size: 11px; }.contact-form { display: grid; gap: 16px; padding: 25px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.contact-form label { display: grid; gap: 7px; color: var(--muted); font: 11px var(--mono); }.contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--surface-soft); color: var(--text); font-size: 13px; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }.form-status { color: var(--accent); font-size: 12px; }
  .footer { padding: 25px 0; border-top: 1px solid var(--line); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.socials { display: flex; gap: 8px; }.socials a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font: 11px var(--mono); }.socials a:hover { border-color: var(--accent); color: var(--accent); }.back-to-top { position: fixed; right: 28px; bottom: 25px; z-index: 10; display: none; width: 39px; height: 39px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; }.back-to-top.show { display: block; }
  #projects, #experience, #education, #certifications, #services, #contact, .footer { color: #fff; }
  #projects .section-top h2, #experience .section-heading h2, #education .section-heading h2, #certifications .section-top h2, #services .section-top h2, #contact .contact-copy h2 { color: #fff; }
  #projects .section-top h2 span, #experience .section-heading h2 span, #education .section-heading h2 span, #certifications .section-top h2 span, #services .section-top h2 span, #contact .contact-copy h2 span { color: #e9d5ff; }
  #projects .section-label, #experience .section-label, #education .section-label, #certifications .section-label, #services .section-label, #contact .section-label { color: #c084fc; }
  #experience .timeline, #experience .timeline h4, #experience .timeline ul, #education .edu-content > p:last-child, #contact .contact-copy > p:not(.section-label), #contact .contact-details a, #contact .contact-details > span { color: #d8c9ef; }
  #experience .timeline h3 { color: #fff; }
  #experience .timeline-marker { background: var(--bg); }
  #education .edu-year, #education .project-type { color: #c084fc; }
  #education .edu-content h3, #education .edu-content > p:last-child, #education .grade strong, #education .grade small { color: #000; }
  #education .education-card { border-color: rgba(216, 201, 239, .28); }
  #projects .filter { color: #d8c9ef; border-color: rgba(216, 201, 239, .35); }
  #projects .filter:hover, #projects .filter.active { color: #c084fc; border-color: #c084fc; }
  .footer { background: rgba(9, 3, 22, .18); }
  .footer p, .footer .socials a { color: #d8c9ef; }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.reveal-delay { transition-delay: .12s; }
  @keyframes blink { 50% { opacity: 0; } } @keyframes float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } } @keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

  @media (max-width: 980px) {
    .nav-links { gap: 14px; }.hero-grid, .about-grid, .journey-grid, .education-grid, .contact-grid { grid-template-columns: 1fr; gap: 42px; }.hero { min-height: auto; padding-bottom: 95px; }.hero-visual { min-height: 390px; }.skills-grid-modern { grid-template-columns: repeat(3, 1fr); }.services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 650px) {
    .container { width: min(100% - 32px, 520px); }.navbar { height: 64px; }.menu-toggle { display: block; }.nav-links { position: absolute; top: 70px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }.nav-links.open { display: flex; }.nav-links a, .theme-toggle { padding: 11px; }.theme-toggle { width: 100%; }.hero { padding-top: 125px; }.hero h1 { font-size: 66px; }.hero-meta { gap: 18px; margin-top: 40px; }.hero-visual { min-height: 360px; }.profile-photo-card { width: min(100%, 275px); }.profile-tech-orbit { width: 300px; height: 290px; transform: scale(.8); }.skills-grid-modern, .projects-grid, .cert-grid, .services-grid { grid-template-columns: 1fr; }.project-featured { grid-row: auto; }.about-stats { grid-template-columns: repeat(2, 1fr); }.education-card { grid-template-columns: 1fr; gap: 9px; }.grade { text-align: left; }.form-row { grid-template-columns: 1fr; }.section-top { display: block; }.filter-group { margin-top: 20px; }.footer-inner { flex-wrap: wrap; }.footer-inner p { order: 3; width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.typing-cursor, .profile-photo-card, .profile-tech { animation: none; }
  }

  /* Premium skills motion and presentation */
  .skills-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(32, 11, 58, .94), rgba(76, 29, 149, .92) 48%, rgba(25, 16, 42, .98));
    color: var(--text);
  }
  .skills-section::before,
  .skills-section::after {
    position: absolute;
    z-index: -1;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    filter: blur(70px);
    opacity: .22;
    animation: skillsBlobDrift 15s ease-in-out infinite alternate;
  }
  .skills-section::before { top: -160px; right: -80px; background: #8b5cf6; }
  .skills-section::after { bottom: -180px; left: -100px; background: #c084fc; animation-delay: -7s; }
  .skills-section-title h2 { color: #fff; }
  .skills-section-title h2 span { color: #e9d5ff; }
  .skills-section-title .section-label { color: #c084fc; }
  .skills-section-intro { color: #e9d5ff; }
  .skills-grid-modern { grid-template-columns: repeat(4, minmax(0, 1fr)); perspective: 1100px; }
  .skill-card-modern {
    position: relative;
    min-height: 164px;
    perspective: 1200px;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .65s ease, transform .6s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .skill-card-modern::before {
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    content: "";
    background: linear-gradient(135deg, rgba(192, 132, 252, .4), rgba(124, 58, 237, .9), rgba(192, 132, 252, .4));
    opacity: 0;
    transition: opacity .35s ease;
  }
  .skill-card-modern.visible { opacity: 1; transform: translateY(0) scale(1); }
  .skill-card-modern:nth-child(1) { transition-delay: .03s; }
  .skill-card-modern:nth-child(2) { transition-delay: .08s; }
  .skill-card-modern:nth-child(3) { transition-delay: .13s; }
  .skill-card-modern:nth-child(4) { transition-delay: .18s; }
  .skill-card-modern:nth-child(5) { transition-delay: .23s; }
  .skill-card-modern:nth-child(6) { transition-delay: .28s; }
  .skill-card-modern:nth-child(7) { transition-delay: .33s; }
  .skill-card-modern:nth-child(8) { transition-delay: .38s; }
  .skill-card-modern:nth-child(9) { transition-delay: .43s; }
  .skill-card-modern:nth-child(10) { transition-delay: .48s; }
  .skill-card-modern:nth-child(11) { transition-delay: .53s; }
  .skill-card-modern:nth-child(12) { transition-delay: .58s; }
  .skill-card-modern:nth-child(13) { transition-delay: .63s; }
  .skill-card-modern:nth-child(14) { transition-delay: .68s; }
  .skill-card-modern:nth-child(15) { transition-delay: .73s; }
  .skill-card-modern:hover,
  .skill-card-modern:focus-within {
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 24px 42px rgba(76, 29, 149, .22), 0 0 24px rgba(192, 132, 252, .25);
  }
  .skill-card-modern:hover::before,
  .skill-card-modern:focus-within::before { opacity: 1; }
  .skill-card-inner {
    position: relative;
    width: 100%;
    min-height: 164px;
    transition: transform .7s ease;
    transform-style: preserve-3d;
  }
  .skill-card-modern:hover .skill-card-inner,
  .skill-card-modern:focus-within .skill-card-inner {
    transform: rotateY(180deg);
  }
  .skill-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: inherit;
    padding: 21px;
  }
  .skill-card-front {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(168, 85, 247, .18);
    border-radius: inherit;
  }
  .skill-card-back {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, rgba(76, 29, 149, .96), rgba(168, 85, 247, .9));
    border: 1px solid rgba(233,213,255,.35);
    color: #fff;
    transform: rotateY(180deg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }
  .skill-badge {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #f5e9ff;
    font: 700 9px var(--mono);
    letter-spacing: .12em;
  }
  .skill-card-back h3,
  .skill-card-back p,
  .skill-card-back .skill-badge { color: #fff; }
  .skill-card-back .skill-badge { opacity: 1; }
  .skill-card-back p { font-size: 12px; line-height: 1.55; }
  .skill-card-top { position: relative; z-index: 1; }
  .skill-symbol { background: #eee7ff; color: #6d28d9; }
  .python-symbol { padding: 6px; background: #eef6ff; }
  .python-symbol svg { display: block; width: 30px; height: 30px; }
  .python-symbol .python-blue { fill: #3776ab; }
  .python-symbol .python-yellow { fill: #ffd343; }
  .js-symbol { padding: 5px; background: #fff7cf; }
  .js-symbol svg { display: block; width: 30px; height: 30px; fill: #f7df1e; }
  .js-symbol path { fill: #111; }
  .html-symbol { padding: 5px; background: #fff0ea; }
  .html-symbol svg { display: block; width: 30px; height: 30px; fill: #e34f26; }
  .html-symbol .html-cutout { fill: #fff; }
  .css-symbol { padding: 5px; background: #edf2ff; }
  .css-symbol svg { display: block; width: 30px; height: 30px; fill: #264de4; }
  .css-symbol .css-cutout { fill: #fff; }
  .skill-level { color: #6d28d9; }
  .skill-card-modern h3 { color: var(--text); }
  .skill-card-modern p { color: var(--muted); }
  .bootstrap-symbol { position: relative; overflow: hidden; background: #7d12f9; color: #fff; }
  .bootstrap-symbol svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #7d12f9; }
  .bootstrap-symbol b { position: relative; z-index: 1; color: #fff; font: 700 31px/1 var(--sans); letter-spacing: -.12em; }
  .mongodb-symbol { padding: 5px 9px; background: #eee7ff; }
  .mongodb-symbol svg { display: block; width: 24px; height: 30px; fill: #001e2b; }
  .mongodb-symbol .mongodb-stem { fill: #00ed64; }
  .mysql-symbol { position: relative; gap: 2px; padding: 4px 6px; overflow: hidden; background: #4b82a8; }
  .mysql-symbol svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #4b82a8; }
  .mysql-symbol .mysql-dolphin { fill: none; stroke: #fff; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
  .mysql-symbol .mysql-line { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; }
  .mysql-symbol b { position: relative; z-index: 1; color: #fff; font: 500 13px var(--sans); letter-spacing: -.08em; }
  .mysql-symbol b::after { color: #f29111; content: "SQL"; }
  .mysql-symbol b { font-size: 0; }
  .mysql-symbol b::before { color: #fff; content: "My"; font-size: 13px; }
  .github-symbol { padding: 5px; background: #f0f1f3; color: #171515; }
  .github-symbol svg { display: block; width: 30px; height: 30px; fill: currentColor; }
  .skill-progress { background: #e8defb; }
  .skill-progress span { background: linear-gradient(90deg, #7c3aed, #c084fc); }
  @keyframes skillsBlobDrift { to { transform: translate3d(35px, 22px, 0) scale(1.08); } }
  @media (max-width: 980px) { .skills-grid-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 650px) { .skills-grid-modern { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) {
    .skills-section::before, .skills-section::after, .skill-card-modern::before { animation: none; }
    .skill-card-modern { opacity: 1; transform: none; transition: none; }
  }