/* ═══════════════════════════════════════════════
   Ayush Verma — Portfolio  |  style.css
═══════════════════════════════════════════════ */


    :root {
      --ink: #000000;
      --ink2: #0a0a0a;
      --ink3: #111111;
      --violet: #7c3aed;
      --violet2: #9b5cf6;
      --pink: #ec4899;
      --pink2: #f472b6;
      --teal: #14b8a6;
      --teal2: #2dd4bf;
      --amber: #f59e0b;
      --amber2: #fbbf24;
      --lime: #84cc16;
      --white: #ffffff;
      --muted: #aaaaaa;
      --muted2: #2a2a2a;
      --border: #222222;
      --border2: #333333;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Outfit', sans-serif;
      background: var(--ink);
      color: var(--white);
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* ═══ GLOBAL NOISE TEXTURE ═══ */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 1000;
      opacity: .4;
    }

    /* ═══ NAV ═══ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 500;
      padding: 0 5%;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, .8);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }

    .nav-logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 4px;
      color: var(--white);
      background: linear-gradient(90deg, var(--violet2), var(--pink), var(--teal2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

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

    .nav-links a {
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #cccccc;
      transition: color .2s;
      font-weight: 500;
    }

    .nav-links a:hover {
      color: var(--white);
    }

    .nav-pill {
      background: linear-gradient(135deg, var(--violet), var(--pink));
      color: #fff;
      padding: 9px 22px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .5px;
      transition: opacity .2s;
      box-shadow: 0 4px 20px rgba(124, 58, 237, .4);
    }

    .nav-pill:hover {
      opacity: .85;
    }

    /* ═══ HERO ═══ */
    .hero {
      min-height: 100vh;
      padding: 80px 5% 60px;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 60px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    /* aurora bg */
    .aurora {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .aurora-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
    }

    .ab1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(124, 58, 237, .35), transparent);
      top: -100px;
      left: -100px;
      animation: auroraFloat1 12s ease-in-out infinite;
    }

    .ab2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(236, 72, 153, .25), transparent);
      top: 20%;
      right: -80px;
      animation: auroraFloat2 10s ease-in-out infinite;
    }

    .ab3 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(20, 184, 166, .2), transparent);
      bottom: -50px;
      left: 30%;
      animation: auroraFloat3 14s ease-in-out infinite;
    }

    @keyframes auroraFloat1 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(40px, 30px);
      }
    }

    @keyframes auroraFloat2 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(-30px, 40px);
      }
    }

    @keyframes auroraFloat3 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(20px, -30px);
      }
    }

    /* star grid */
    .star-grid {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .15) 1px, transparent 1px);
      background-size: 40px 40px;
      z-index: 0;
      opacity: .3;
    }

    .hero-left {
      position: relative;
      z-index: 1;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(124, 58, 237, .15);
      border: 1px solid rgba(124, 58, 237, .3);
      padding: 7px 16px;
      border-radius: 30px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--violet2);
      margin-bottom: 28px;
    }

    .tag-pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--teal2);
      box-shadow: 0 0 8px var(--teal2);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 4px var(--teal2);
      }

      50% {
        box-shadow: 0 0 16px var(--teal2);
      }
    }

    .hero-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 110px;
      line-height: .88;
      letter-spacing: 4px;
      margin-bottom: 12px;
    }

    .hero-name .l1 {
      display: block;
      color: var(--white);
    }

    .hero-name .l2 {
      display: block;
      background: linear-gradient(90deg, var(--violet2), var(--pink), var(--amber));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-role-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
    }

    .role-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--violet), transparent);
      max-width: 60px;
    }

    .hero-role {
      font-family: 'Playfair Display', sans-serif;
      font-size: 18px;
      font-style: italic;
      color: var(--pink2);
      font-weight: 400;
    }

    .hero-desc {
      font-size: 15px;
      color: #bbbbbb;
      line-height: 1.85;
      max-width: 520px;
      margin-bottom: 40px;
      font-weight: 300;
    }

    .hero-desc strong {
      color: var(--white);
      font-weight: 500;
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      margin-bottom: 52px;
      flex-wrap: wrap;
    }

    .hbtn-v {
      background: linear-gradient(135deg, var(--violet), var(--violet2));
      color: #fff;
      padding: 14px 32px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .5px;
      box-shadow: 0 8px 24px rgba(124, 58, 237, .4);
      transition: all .25s;
    }

    .hbtn-v:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(124, 58, 237, .55);
    }

    .hbtn-t {
      background: transparent;
      border: 1px solid rgba(20, 184, 166, .5);
      color: var(--teal2);
      padding: 14px 32px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .5px;
      transition: all .25s;
    }

    .hbtn-t:hover {
      background: rgba(20, 184, 166, .1);
      border-color: var(--teal2);
    }

    .hero-contact-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hc-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: #bbbbbb;
    }

    .hc-item a {
      color: var(--muted);
      transition: color .2s;
    }

    .hc-item a:hover {
      color: var(--teal2);
    }

    .hc-ico {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .hc-ico.v {
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(124, 58, 237, .3);
    }

    .hc-ico.p {
      background: rgba(236, 72, 153, .15);
      border: 1px solid rgba(236, 72, 153, .25);
    }

    .hc-ico.t {
      background: rgba(20, 184, 166, .15);
      border: 1px solid rgba(20, 184, 166, .25);
    }

    /* RIGHT SIDE CARDS */
    .hero-right {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .hcard {
      border-radius: 16px;
      padding: 22px;
      border: 1px solid var(--border);
      backdrop-filter: blur(10px);
    }

    .hcard.glass {
      background: rgba(10, 10, 10, .7);
    }

    /* big stat card */
    .stat-card {
      background: linear-gradient(135deg, rgba(124, 58, 237, .2), rgba(236, 72, 153, .12));
      border-color: rgba(124, 58, 237, .3);
    }

    .stat-row {
      display: flex;
      gap: 0;
    }

    .stat-item {
      flex: 1;
      text-align: center;
      padding: 12px 8px;
      border-right: 1px solid var(--border);
    }

    .stat-item:last-child {
      border-right: none;
    }

    .stat-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 36px;
      letter-spacing: 2px;
      background: linear-gradient(135deg, var(--violet2), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-l {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 2px;
    }

    /* skills pill card */
    .skills-card {
      background: rgba(20, 184, 166, .06);
      border-color: rgba(20, 184, 166, .2);
    }

    .sc-title {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--teal2);
      margin-bottom: 14px;
    }

    .pills-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pill {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .3px;
    }

    .pill.v {
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(124, 58, 237, .4);
      color: var(--violet2);
    }

    .pill.p {
      background: rgba(236, 72, 153, .15);
      border: 1px solid rgba(236, 72, 153, .3);
      color: var(--pink2);
    }

    .pill.t {
      background: rgba(20, 184, 166, .15);
      border: 1px solid rgba(20, 184, 166, .3);
      color: var(--teal2);
    }

    .pill.a {
      background: rgba(245, 158, 11, .15);
      border: 1px solid rgba(245, 158, 11, .3);
      color: var(--amber2);
    }

    .pill.l {
      background: rgba(132, 204, 22, .15);
      border: 1px solid rgba(132, 204, 22, .3);
      color: var(--lime);
    }

    /* cert card */
    .cert-mini {
      background: rgba(245, 158, 11, .06);
      border-color: rgba(245, 158, 11, .2);
    }

    .cm-title {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--amber2);
      margin-bottom: 14px;
    }

    .cm-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .cm-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cm-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amber);
      flex-shrink: 0;
    }

    .cm-name {
      font-size: 12px;
      color: var(--white);
      font-weight: 500;
    }

    .cm-org {
      font-size: 10px;
      color: var(--muted);
      margin-top: 1px;
    }

    /* ═══ MARQUEE ═══ */
    .mq-wrap {
      position: relative;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 0;
      overflow: hidden;
    }

    .mq-wrap::before,
    .mq-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      z-index: 2;
    }

    .mq-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--ink), transparent);
    }

    .mq-wrap::after {
      right: 0;
      background: linear-gradient(-90deg, var(--ink), transparent);
    }

    .mq-inner {
      display: flex;
    }

    .mq-track {
      display: inline-flex;
      animation: mq 20s linear infinite;
      padding: 16px 0;
    }

    .mq-track2 {
      display: inline-flex;
      animation: mq2 25s linear infinite;
      padding: 16px 0;
    }

    .mq-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 24px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      white-space: nowrap;
      font-weight: 600;
    }

    .mi-v {
      color: rgba(155, 92, 246, .85);
    }

    .mi-p {
      color: rgba(244, 114, 182, .85);
    }

    .mi-t {
      color: rgba(45, 212, 191, .85);
    }

    .mi-a {
      color: rgba(251, 191, 36, .85);
    }

    .mq-sep {
      color: var(--muted);
      font-size: 8px;
      opacity: .4;
    }

    @keyframes mq {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes mq2 {
      0% {
        transform: translateX(-50%);
      }

      100% {
        transform: translateX(0);
      }
    }

    /* ═══ SECTION WRAPPER ═══ */
    .section {
      padding: 100px 5%;
      position: relative;
    }

    .sec-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .ew-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: 3px;
      color: var(--muted);
    }

    .ew-line {
      flex: 0 0 32px;
      height: 1px;
    }

    .ew-line.v {
      background: var(--violet);
    }

    .ew-line.p {
      background: var(--pink);
    }

    .ew-line.t {
      background: var(--teal);
    }

    .ew-line.a {
      background: var(--amber);
    }

    .ew-tag {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 600;
    }

    .ew-tag.v {
      color: var(--violet2);
    }

    .ew-tag.p {
      color: var(--pink2);
    }

    .ew-tag.t {
      color: var(--teal2);
    }

    .ew-tag.a {
      color: var(--amber2);
    }

    .sec-h {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 64px;
      letter-spacing: 3px;
      line-height: .95;
      margin-bottom: 8px;
      color: var(--white);
    }

    .sec-h span {
      background: linear-gradient(90deg, var(--violet2), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sec-sub {
      font-size: 15px;
      color: #bbbbbb;
      font-weight: 300;
      max-width: 460px;
    }

    /* ═══ ABOUT ═══ */
    .about-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-top: 52px;
      align-items: start;
    }

    .about-text {
      font-size: 15px;
      color: #cccccc;
      line-height: 1.9;
      font-weight: 300;
    }

    .about-text strong {
      color: var(--white);
      font-weight: 500;
    }

    .about-text p+p {
      margin-top: 16px;
    }

    .about-quote {
      margin-top: 28px;
      padding: 24px 28px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(236, 72, 153, .08));
      border: 1px solid rgba(124, 58, 237, .25);
      position: relative;
    }

    .quote-mark {
      font-family: 'Playfair Display', serif;
      font-size: 80px;
      font-style: italic;
      color: var(--violet2);
      opacity: .2;
      line-height: .5;
      position: absolute;
      top: 16px;
      left: 16px;
    }

    .about-quote p {
      font-size: 14px;
      font-style: italic;
      color: var(--white);
      line-height: 1.75;
      position: relative;
      z-index: 1;
      opacity: .8;
    }

    .about-cards {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .abt-card {
      background: var(--ink2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all .25s;
    }

    .abt-card:hover {
      border-color: var(--violet);
      transform: translateX(6px);
    }

    .abt-card-ico {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .ico-v {
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(124, 58, 237, .3);
    }

    .ico-p {
      background: rgba(236, 72, 153, .15);
      border: 1px solid rgba(236, 72, 153, .25);
    }

    .ico-t {
      background: rgba(20, 184, 166, .15);
      border: 1px solid rgba(20, 184, 166, .25);
    }

    .ico-a {
      background: rgba(245, 158, 11, .15);
      border: 1px solid rgba(245, 158, 11, .25);
    }

    .abt-lbl {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #999999;
      margin-bottom: 3px;
    }

    .abt-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--white);
    }

    /* ═══ SERVICES ═══ */
    .services-section {
      background: var(--ink2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .srv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      margin-top: 52px;
    }

    .srv-card {
      background: var(--ink2);
      padding: 40px 34px;
      position: relative;
      overflow: hidden;
      transition: background .3s;
      group;
    }

    .srv-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s;
    }

    .srv-card.c1::before {
      background: linear-gradient(135deg, rgba(124, 58, 237, .08), transparent);
    }

    .srv-card.c2::before {
      background: linear-gradient(135deg, rgba(236, 72, 153, .08), transparent);
    }

    .srv-card.c3::before {
      background: linear-gradient(135deg, rgba(20, 184, 166, .08), transparent);
    }

    .srv-card:hover::before {
      opacity: 1;
    }

    .srv-card:hover {
      background: var(--ink3);
    }

    .srv-top-bar {
      height: 2px;
      margin-bottom: 28px;
      border-radius: 1px;
    }

    .bar-v {
      background: linear-gradient(90deg, var(--violet), var(--violet2));
    }

    .bar-p {
      background: linear-gradient(90deg, var(--pink), var(--pink2));
    }

    .bar-t {
      background: linear-gradient(90deg, var(--teal), var(--teal2));
    }

    .srv-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: 3px;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .srv-ico {
      font-size: 32px;
      margin-bottom: 16px;
    }

    .srv-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 2px;
      color: var(--white);
      margin-bottom: 12px;
    }

    .srv-desc {
      font-size: 13px;
      color: #aaaaaa;
      line-height: 1.8;
      margin-bottom: 28px;
    }

    .srv-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 600;
      transition: gap .2s;
    }

    .srv-link.lv {
      color: var(--violet2);
    }

    .srv-link.lp {
      color: var(--pink2);
    }

    .srv-link.lt {
      color: var(--teal2);
    }

    .srv-link:hover {
      gap: 14px;
    }

    /* ═══ PROJECTS ═══ */
    .proj-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 52px;
    }

    .proj-card {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--border);
      transition: all .3s;
      position: relative;
      background: var(--ink2);
    }

    .proj-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    }

    .proj-card:hover .pc-glow {
      opacity: 1;
    }

    .pc-glow {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }

    .pc-glow.gv {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124, 58, 237, .18), transparent);
    }

    .pc-glow.gp {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(236, 72, 153, .15), transparent);
    }

    .pc-glow.gt {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(20, 184, 166, .12), transparent);
    }

    .pc-glow.ga {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 158, 11, .12), transparent);
    }

    .pc-header {
      padding: 28px 28px 0;
      position: relative;
      z-index: 1;
    }

    .pc-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .pc-type {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
    }

    .pct-v {
      background: rgba(124, 58, 237, .2);
      color: var(--violet2);
      border: 1px solid rgba(124, 58, 237, .3);
    }

    .pct-p {
      background: rgba(236, 72, 153, .15);
      color: var(--pink2);
      border: 1px solid rgba(236, 72, 153, .3);
    }

    .pct-t {
      background: rgba(20, 184, 166, .15);
      color: var(--teal2);
      border: 1px solid rgba(20, 184, 166, .3);
    }

    .pct-a {
      background: rgba(245, 158, 11, .15);
      color: var(--amber2);
      border: 1px solid rgba(245, 158, 11, .3);
    }

    .pc-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 52px;
      color: var(--border);
      letter-spacing: 2px;
      line-height: 1;
    }

    .pc-body {
      padding: 0 28px 28px;
      position: relative;
      z-index: 1;
    }

    .pc-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 32px;
      letter-spacing: 2px;
      color: var(--white);
      margin-bottom: 10px;
      line-height: 1;
    }

    .pc-desc {
      font-size: 13px;
      color: #aaaaaa;
      line-height: 1.75;
      margin-bottom: 18px;
    }

    .pc-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .pc-tag {
      font-size: 10px;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 4px;
      border: 1px solid var(--border2);
      color: var(--muted);
      font-weight: 500;
    }

    .pc-arrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
      transition: gap .2s;
    }

    .pc-arrow:hover {
      gap: 14px;
    }

    .pa-v {
      color: var(--violet2);
    }

    .pa-p {
      color: var(--pink2);
    }

    /* ═══ SKILLS ═══ */
    .skills-section {
      background: var(--ink2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 52px;
    }

    .sk-card {
      background: var(--ink3);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 30px;
      transition: all .3s;
    }

    .sk-card:hover {
      transform: translateY(-4px);
    }

    .sk-card.skv:hover {
      border-color: rgba(124, 58, 237, .4);
      box-shadow: 0 12px 40px rgba(124, 58, 237, .12);
    }

    .sk-card.skp:hover {
      border-color: rgba(236, 72, 153, .4);
      box-shadow: 0 12px 40px rgba(236, 72, 153, .1);
    }

    .sk-card.ska:hover {
      border-color: rgba(245, 158, 11, .4);
      box-shadow: 0 12px 40px rgba(245, 158, 11, .1);
    }

    .sk-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .sk-ico-wrap {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .siw-v {
      background: linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(124, 58, 237, .1));
      border: 1px solid rgba(124, 58, 237, .3);
    }

    .siw-p {
      background: linear-gradient(135deg, rgba(236, 72, 153, .25), rgba(236, 72, 153, .08));
      border: 1px solid rgba(236, 72, 153, .3);
    }

    .siw-a {
      background: linear-gradient(135deg, rgba(245, 158, 11, .25), rgba(245, 158, 11, .08));
      border: 1px solid rgba(245, 158, 11, .3);
    }

    .sk-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 2px;
      color: var(--white);
    }

    .sk-bars {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .sb-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sb-top {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
    }

    .sb-name {
      color: var(--muted);
      font-weight: 500;
      letter-spacing: .3px;
    }

    .sb-pct {
      font-weight: 700;
    }

    .pct-v {
      color: var(--violet2);
    }

    .pct-p {
      color: var(--pink2);
    }

    .pct-a {
      color: var(--amber2);
    }

    .sb-track {
      height: 4px;
      background: var(--muted2);
      border-radius: 2px;
      overflow: hidden;
    }

    .sb-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 1.8s cubic-bezier(.4, 0, .2, 1);
    }

    .fill-v {
      background: linear-gradient(90deg, var(--violet), var(--violet2));
    }

    .fill-p {
      background: linear-gradient(90deg, var(--pink), var(--pink2));
    }

    .fill-a {
      background: linear-gradient(90deg, var(--amber), var(--amber2));
    }

    /* ═══ EXPERIENCE ═══ */
    .exp-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 60px;
      margin-top: 52px;
    }

    .exp-nav {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .etab {
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: all .2s;
      position: relative;
    }

    .etab::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--violet), var(--pink));
      border-radius: 2px;
      opacity: 0;
      transition: opacity .3s;
    }

    .etab.active::before {
      opacity: 1;
    }

    .etab-co {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      color: var(--muted);
      transition: color .2s;
    }

    .etab.active .etab-co {
      color: var(--white);
    }

    .etab-r {
      font-size: 11px;
      color: var(--muted2);
      margin-top: 4px;
      letter-spacing: .5px;
    }

    .etab.active .etab-r {
      color: var(--violet2);
    }

    .etab-p {
      font-size: 10px;
      color: var(--muted2);
      margin-top: 3px;
    }

    .exp-panel {
      display: none;
    }

    .exp-panel.active {
      display: block;
    }

    .ep-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      letter-spacing: 3px;
      color: var(--white);
      margin-bottom: 12px;
    }

    .ep-bdgs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 30px;
    }

    .ep-bdg {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 20px;
      font-weight: 600;
    }

    .bdg-v {
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(124, 58, 237, .3);
      color: var(--violet2);
    }

    .bdg-g {
      background: rgba(132, 204, 22, .15);
      border: 1px solid rgba(132, 204, 22, .25);
      color: var(--lime);
    }

    .bdg-m {
      background: var(--ink3);
      border: 1px solid var(--border2);
      color: var(--muted);
    }

    .ep-points {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .epoint {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .ep-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      margin-top: 1px;
      background: rgba(124, 58, 237, .15);
      border: 1px solid rgba(124, 58, 237, .25);
    }

    .ep-txt {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.75;
    }

    .ep-txt strong {
      color: var(--white);
      font-weight: 500;
    }

    /* ═══ EDUCATION ═══ */
    .edu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 52px;
    }

    .edu-card {
      border-radius: 16px;
      padding: 36px;
      border: 1px solid var(--border);
      background: var(--ink2);
      position: relative;
      overflow: hidden;
      transition: all .3s;
    }

    .edu-card:hover {
      transform: translateY(-4px);
    }

    .edu-card.eca:hover {
      border-color: rgba(124, 58, 237, .4);
      box-shadow: 0 12px 40px rgba(124, 58, 237, .12);
    }

    .edu-card.ecb:hover {
      border-color: rgba(236, 72, 153, .3);
    }

    .edu-card-glow {
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      pointer-events: none;
    }

    .ecg-v {
      background: radial-gradient(circle, rgba(124, 58, 237, .15), transparent);
    }

    .ecg-p {
      background: radial-gradient(circle, rgba(236, 72, 153, .1), transparent);
    }

    .edu-yr {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 14px;
      font-weight: 600;
    }

    .eyr-v {
      color: var(--violet2);
    }

    .eyr-p {
      color: var(--pink2);
    }

    .edu-deg {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      letter-spacing: 2px;
      color: var(--white);
      margin-bottom: 6px;
      line-height: 1.2;
    }

    .edu-sch {
      font-size: 13px;
      margin-bottom: 3px;
    }

    .esch-v {
      color: var(--violet2);
    }

    .esch-p {
      color: var(--pink2);
    }

    .edu-loc {
      font-size: 12px;
      color: var(--muted);
    }

    .edu-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 20px;
      font-weight: 600;
    }

    .ebdg-v {
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(124, 58, 237, .3);
      color: var(--violet2);
    }

    .ebdg-m {
      background: var(--ink3);
      border: 1px solid var(--border2);
      color: var(--muted);
    }

    /* ═══ CERTS ═══ */
    .cert-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    .ct-card {
      border-radius: 14px;
      padding: 28px;
      border: 1px solid var(--border);
      background: var(--ink2);
      transition: all .3s;
      position: relative;
      overflow: hidden;
    }

    .ct-card:hover {
      transform: translateY(-4px);
    }

    .ct-card.ctv:hover {
      border-color: rgba(245, 158, 11, .4);
      box-shadow: 0 10px 32px rgba(245, 158, 11, .1);
    }

    .ct-card {
      cursor: pointer;
      position: relative;
    }

    .ct-card::after {
      content: "Click to view ↗";
      position: absolute;
      bottom: 14px;
      right: 18px;
      font-size: 10px;
      letter-spacing: 1px;
      color: rgba(245, 158, 11, 0.5);
      opacity: 0;
      transition: opacity .3s;
    }

    .ct-card:hover::after {
      opacity: 1;
    }

    .ct-glow {
      position: absolute;
      bottom: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 158, 11, .12), transparent);
      pointer-events: none;
    }

    .ct-ico-wrap {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(245, 158, 11, .25), rgba(245, 158, 11, .08));
      border: 1px solid rgba(245, 158, 11, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px;
    }

    .ct-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 17px;
      letter-spacing: 1.5px;
      color: var(--white);
      margin-bottom: 7px;
      line-height: 1.25;
    }

    .ct-org {
      font-size: 12px;
      color: var(--amber2);
      margin-bottom: 3px;
      font-weight: 500;
    }

    .ct-date {
      font-size: 11px;
      color: var(--muted);
    }

    /* ═══ CONTACT ═══ */
    .contact-section {
      background: var(--ink2);
      border-top: 1px solid var(--border);
    }

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      min-height: 500px;
    }

    .ct-left {
      padding: 80px 5%;
      border-right: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    .ct-left-bg {
      position: absolute;
      top: -80px;
      left: -80px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124, 58, 237, .12), transparent);
      pointer-events: none;
    }

    .ct-left-bg2 {
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(236, 72, 153, .08), transparent);
      pointer-events: none;
    }

    .ct-h {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 62px;
      letter-spacing: 3px;
      line-height: .9;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .ct-h span {
      background: linear-gradient(90deg, var(--violet2), var(--pink), var(--teal2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .ct-sub {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.8;
      max-width: 360px;
      margin-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    .ct-links {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      z-index: 1;
    }

    .ctlnk {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
      transition: all .25s;
    }

    .ctlnk:hover {
      padding-left: 8px;
    }

    .ctlnk-l {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .ctlnk-ico {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }

    .ctlnk-lbl {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted2);
      margin-bottom: 2px;
    }

    .ctlnk-val {
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }

    .ctlnk:hover .ctlnk-val {
      color: var(--white);
    }

    .ctlnk-arr {
      font-size: 16px;
      color: var(--muted2);
      transition: all .25s;
    }

    .ctlnk:hover .ctlnk-arr {
      color: var(--violet2);
      transform: rotate(-45deg);
    }

    .ct-right {
      padding: 80px 5%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .avail-card {
      background: linear-gradient(135deg, rgba(132, 204, 22, .1), rgba(20, 184, 166, .08));
      border: 1px solid rgba(132, 204, 22, .25);
      border-radius: 14px;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 28px;
    }

    .avail-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 10px rgba(132, 204, 22, .6);
      flex-shrink: 0;
    }

    .avail-t {
      font-size: 14px;
      font-weight: 600;
      color: var(--lime);
    }

    .avail-s {
      font-size: 11px;
      color: rgba(132, 204, 22, .6);
      margin-top: 2px;
    }

    .fact-list {
      display: flex;
      flex-direction: column;
      background: var(--ink3);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }

    .fact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }

    .fact:last-child {
      border-bottom: none;
    }

    .fact-l {
      font-size: 12px;
      color: var(--muted);
    }

    .fact-v {
      font-size: 13px;
      font-weight: 600;
      color: var(--white);
    }

    .big-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 28px;
      background: linear-gradient(135deg, var(--violet), var(--pink));
      color: #fff;
      padding: 18px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: all .3s;
      box-shadow: 0 8px 24px rgba(124, 58, 237, .3);
    }

    .big-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(124, 58, 237, .45);
    }

    /* ═══ FOOTER ═══ */
    footer {
      padding: 28px 5%;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--ink);
    }

    .f-logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 4px;
      background: linear-gradient(90deg, var(--violet2), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .f-copy {
      font-size: 11px;
      color: var(--muted2);
      letter-spacing: .5px;
    }

    .f-links {
      display: flex;
      gap: 20px;
    }

    .f-links a {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted2);
      transition: color .2s;
    }

    .f-links a:hover {
      color: var(--violet2);
    }

    /* ═══ ANIMATIONS ═══ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(32px);
      }

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

    .hero-left {
      animation: fadeUp 1s ease both;
    }

    .hero-right {
      animation: fadeUp 1s .2s ease both;
    }

    .anim {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .anim.in {
      opacity: 1;
      transform: translateY(0);
    }

    .d1 {
      transition-delay: .08s;
    }

    .d2 {
      transition-delay: .16s;
    }

    .d3 {
      transition-delay: .24s;
    }

    .d4 {
      transition-delay: .32s;
    }

    .d5 {
      transition-delay: .40s;
    }

    .d6 {
      transition-delay: .48s;
    }

    /* ═══ LIGHT THEME ═══ */
    body.light-theme {
      --ink: #f0eeff;
      --ink2: #e8e3ff;
      --ink3: #ddd6ff;
      --white: #0e0b1e;
      --muted: #5a5280;
      --muted2: #7b6faa;
      --border: #c9bfee;
      --border2: #b8aee0;
      background: var(--ink);
      color: var(--white);
    }

    body.light-theme nav {
      background: rgba(240, 238, 255, .92);
    }

    body.light-theme .mq-wrap::before {
      background: linear-gradient(90deg, var(--ink), transparent);
    }

    body.light-theme .mq-wrap::after {
      background: linear-gradient(-90deg, var(--ink), transparent);
    }

    body.light-theme footer {
      background: var(--ink);
    }

    body.light-theme .pc-num {
      color: var(--border);
    }

    body.light-theme .hcard {
      background: rgba(255, 255, 255, .6);
    }

    body.light-theme .abt-card {
      background: var(--ink2);
    }

    body.light-theme .sk-card {
      background: var(--ink3);
    }

    body.light-theme .proj-card {
      background: var(--ink2);
    }

    body.light-theme .ct-card {
      background: var(--ink2);
    }

    body.light-theme .exp-panel,
    .light-theme .exp-nav {
      background: transparent;
    }

    body.light-theme .fact-list {
      background: var(--ink3);
    }

    body.light-theme .modal-box {
      background: var(--ink2);
    }

    body.light-theme .srv-grid {
      background: var(--border);
    }

    body.light-theme .srv-card {
      background: var(--ink2);
    }

    body.light-theme .about-quote {
      background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(236, 72, 153, .06));
    }

    body.light-theme

    /* Theme Toggle Button */
    .theme-toggle {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 600;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--violet), var(--pink));
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      box-shadow: 0 4px 20px rgba(124, 58, 237, .4);
      transition: all .3s;
    }

    .theme-toggle:hover {
      transform: scale(1.1) rotate(20deg);
      box-shadow: 0 6px 28px rgba(124, 58, 237, .6);
    }

    .theme-toggle .icon-dark {
      display: block;
    }

    .theme-toggle .icon-light {
      display: none;
    }

    body.light-theme .theme-toggle .icon-dark {
      display: none;
    }

    body.light-theme .theme-toggle .icon-light {
      display: block;
    }


    /* ── CERT VIEWER MODAL ── */
    .cv-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      backdrop-filter: blur(16px);
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .cv-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .cv-box {
      background: var(--ink2);
      border: 1px solid rgba(124, 58, 237, .3);
      border-radius: 20px;
      width: min(860px, 95vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: scale(.96);
      transition: transform .3s;
    }

    .cv-overlay.open .cv-box {
      transform: scale(1);
    }

    .cv-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .cv-title {
      font-family: "Bebas Neue", sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      color: var(--white);
    }

    .cv-close {
      background: var(--border2);
      border: none;
      color: var(--muted);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      flex-shrink: 0;
    }

    .cv-close:hover {
      background: rgba(124, 58, 237, .4);
      color: var(--white);
    }

    .cv-body {
      flex: 1;
      overflow: hidden;
      background: #fff;
    }

    .cv-body iframe {
      width: 100%;
      height: 74vh;
      border: none;
      display: block;
    }


    /* Gadget animations */
    @keyframes gadgetFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    @keyframes phoneFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    /* 3D TILT on cards */
    .proj-card,
    .hcard,
    .abt-card,
    .ct-card {
      transform-style: preserve-3d;
      transition: transform .15s ease, box-shadow .15s ease;
      will-change: transform;
    }

    .proj-card:hover,
    .hcard:hover {
      box-shadow: 0 24px 50px rgba(0, 0, 0, .7);
    }

    /* Hero name morph */
    .hero-name .l1,
    .hero-name .l2 {
      display: block;
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      animation: morphReveal 1.4s cubic-bezier(.16, 1, .3, 1) forwards;
    }

    .hero-name .l1 {
      animation-delay: 3.1s;
    }

    .hero-name .l2 {
      animation-delay: 3.5s;
    }

    @keyframes morphReveal {
      0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: blur(10px);
      }

      40% {
        opacity: 1;
        filter: blur(2px);
      }

      100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
        filter: blur(0);
      }
    }

    /* SPLASH */
    #splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity .7s, visibility .7s;
    }

    #splash.hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .sp-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      pointer-events: none;
    }

    .sp-blob.b1 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(124, 58, 237, .35), transparent);
      top: -150px;
      left: -150px;
      animation: spF1 4s ease-in-out infinite;
    }

    .sp-blob.b2 {
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(236, 72, 153, .25), transparent);
      bottom: -100px;
      right: -100px;
      animation: spF2 5s ease-in-out infinite;
    }

    .sp-blob.b3 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(20, 184, 166, .15), transparent);
      top: 40%;
      left: 40%;
      animation: spF3 6s ease-in-out infinite;
    }

    @keyframes spF1 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(30px, 20px);
      }
    }

    @keyframes spF2 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(-20px, 30px);
      }
    }

    @keyframes spF3 {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(-30px, -20px);
      }
    }

    .sp-content {
      position: relative;
      z-index: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sp-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(60px, 14vw, 160px);
      letter-spacing: 8px;
      line-height: 1;
      color: #fff;
      animation: spUp .9s cubic-bezier(.16, 1, .3, 1) .3s both;
      opacity: 0;
    }

    .sp-name span {
      background: linear-gradient(90deg, var(--violet2), var(--pink), var(--amber));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sp-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(14px, 2.5vw, 26px);
      letter-spacing: 12px;
      color: #666;
      animation: spUp .9s cubic-bezier(.16, 1, .3, 1) .55s both;
      opacity: 0;
      margin-top: 8px;
    }

    .sp-line {
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--violet2), var(--pink), transparent);
      margin: 22px auto;
      animation: spDiv 1s cubic-bezier(.16, 1, .3, 1) .75s both;
    }

    .sp-tag {
      font-family: 'Playfair Display', sans-serif;
      font-style: italic;
      font-size: clamp(13px, 2vw, 20px);
      color: var(--pink2);
      letter-spacing: 2px;
      animation: spFade 1s ease 1.05s both;
      opacity: 0;
    }

    .sp-dots {
      position: absolute;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

    .sp-d {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      animation: spDot 1.4s ease-in-out infinite;
    }

    .sp-d:nth-child(1) {
      background: var(--violet2);
    }

    .sp-d:nth-child(2) {
      background: var(--pink);
      animation-delay: .2s;
    }

    .sp-d:nth-child(3) {
      background: var(--teal2);
      animation-delay: .4s;
    }

    @keyframes spUp {
      from {
        opacity: 0;
        transform: translateY(60px);
      }

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

    @keyframes spDiv {
      from {
        width: 0;
        opacity: 0;
      }

      to {
        width: min(320px, 70vw);
        opacity: 1;
      }
    }

    @keyframes spFade {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

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

    @keyframes spDot {

      0%,
      80%,
      100% {
        transform: scale(1);
        opacity: .4;
      }

      40% {
        transform: scale(1.5);
        opacity: 1;
      }
    }



    /* ── PREMIUM CURSOR ── */
    * {
      cursor: none !important;
    }

    #cur-dot {
      position: fixed;
      width: 8px;
      height: 8px;
      background: #ffffff;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      transition: width .15s, height .15s, background .2s, transform .15s;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }

    #cur-ring {
      position: fixed;
      width: 38px;
      height: 38px;
      border: 1.5px solid rgba(155, 92, 246, 0.7);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99998;
      transform: translate(-50%, -50%);
      transition: left .05s ease, top .05s ease, width .3s, height .3s, border-color .3s, opacity .3s;
    }

    #cur-trail {
      position: fixed;
      width: 56px;
      height: 56px;
      border: 1px solid rgba(155, 92, 246, 0.2);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99997;
      transform: translate(-50%, -50%);
      transition: left .08s ease, top .08s ease, width .4s, height .4s;
    }

    /* hover state */
    body.cur-hover #cur-dot {
      width: 14px;
      height: 14px;
      background: #9b5cf6;
      box-shadow: 0 0 20px rgba(155, 92, 246, 0.8);
    }

    body.cur-hover #cur-ring {
      width: 54px;
      height: 54px;
      border-color: rgba(236, 72, 153, 0.8);
      border-width: 2px;
    }

    body.cur-hover #cur-trail {
      width: 72px;
      height: 72px;
      border-color: rgba(236, 72, 153, 0.15);
    }

    /* click state */
    body.cur-click #cur-dot {
      width: 6px;
      height: 6px;
      transform: translate(-50%, -50%) scale(0.6);
    }

    body.cur-click #cur-ring {
      width: 28px;
      height: 28px;
      border-color: rgba(20, 184, 166, 0.9);
    }

    /* text hover */
    body.cur-text #cur-dot {
      width: 3px;
      height: 24px;
      border-radius: 2px;
      background: #fff;
    }

    body.cur-text #cur-ring {
      opacity: 0;
    }

    /* light theme */
    body.light-theme #cur-dot {
      background: #000000;
      mix-blend-mode: normal;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    body.light-theme #cur-ring {
      border-color: rgba(124, 58, 237, 0.6);
    }


    /* MUSIC WIDGET */
    #music-widget {
      position: fixed;
      bottom: 68px;
      right: 24px;
      z-index: 9997;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #0a0a0a;
      border: 1px solid #333;
      border-radius: 40px;
      padding: 8px 12px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
      cursor: pointer;
      transition: all .3s;
    }

    #music-widget:hover {
      background: #111;
      transform: translateY(-2px);
    }

    body.light-theme #music-widget {
      background: #f5f5f5;
      border-color: #ddd;
    }

    .mw-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 16px;
    }

    .mwb {
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--violet2), var(--pink));
      height: 4px;
    }

    .mwb.on {
      animation: mwbA .7s ease-in-out infinite;
    }

    .mwb:nth-child(2) {
      animation-delay: .12s;
    }

    .mwb:nth-child(3) {
      animation-delay: .24s;
    }

    .mwb:nth-child(4) {
      animation-delay: .36s;
    }

    .mwb:nth-child(5) {
      animation-delay: .18s;
    }

    @keyframes mwbA {

      0%,
      100% {
        height: 3px;
      }

      50% {
        height: 14px;
      }
    }

    .mw-info {}

    .mw-name {
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      letter-spacing: .5px;
    }

    .mw-status {
      font-size: 8px;
      color: rgba(255, 255, 255, .35);
      letter-spacing: 1px;
      margin-top: 1px;
    }

    body.light-theme .mw-name {
      color: #000;
    }

    body.light-theme .mw-status {
      color: rgba(0, 0, 0, .35);
    }

    .mw-icon {
      font-size: 13px;
      color: #fff;
      margin-left: 3px;
    }

    body.light-theme .mw-icon {
      color: #000;
    }

    /* THEME TOGGLE */
    #theme-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9997;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #111;
      border: 1px solid #333;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
      transition: all .3s;
    }

    #theme-btn:hover {
      transform: scale(1.12) rotate(20deg);
    }

    body.light-theme #theme-btn {
      background: #f0f0f0;
      border-color: #ddd;
      color: #000;
    }

    /* LIGHT THEME */
    body.light-theme {
      background: #fff !important;
      color: #000 !important;
    }

    /* Hero + About text visible in light theme */
    body.light-theme .hero-desc {
      color: #222222 !important;
    }

    body.light-theme .hero-name .l1 {
      color: #000000 !important;
    }

    body.light-theme .hero-name .l2 {
      color: transparent !important;
    }

    body.light-theme .hero-role {
      color: #444444 !important;
    }

    body.light-theme .hero-greeting {
      color: #333333 !important;
    }

    body.light-theme .hero-tag {
      color: #333333 !important;
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.15) !important;
    }

    body.light-theme .hero-contact-row .hc-item {
      color: #333333 !important;
    }

    body.light-theme .hero-contact-row .hc-item a {
      color: #333333 !important;
    }

    body.light-theme .about-text {
      color: #222222 !important;
    }

    body.light-theme .about-text strong {
      color: #000000 !important;
    }

    body.light-theme .about-quote p {
      color: #222222 !important;
    }

    body.light-theme .quote-mark {
      color: #000 !important;
    }

    body.light-theme .sec-sub {
      color: #333333 !important;
    }

    body.light-theme .sec-h {
      color: #000000 !important;
    }

    body.light-theme .ew-num {
      color: #555555 !important;
    }

    body.light-theme .ew-tag {
      color: #333333 !important;
    }

    body.light-theme .hero-desc strong {
      color: #000000 !important;
    }

    body.light-theme .nav-logo {
      color: #000000 !important;
    }

    body.light-theme .nav-links a {
      color: #333333 !important;
    }

    body.light-theme .nav-pill {
      color: #ffffff !important;
    }

    body.light-theme .hc-item {
      color: #333333 !important;
    }

    body.light-theme .hc-item a {
      color: #333333 !important;
    }

    body.light-theme .tag-pulse {
      box-shadow: 0 0 8px var(--teal2) !important;
    }

    body.light-theme .abt-val {
      color: #000000 !important;
    }

    body.light-theme .abt-lbl {
      color: #555555 !important;
    }

    body.light-theme .about-text p {
      color: #222222 !important;
    }

    body.light-theme .pill {
      color: #333 !important;
    }

    body.light-theme .sc-title {
      color: var(--teal) !important;
    }

    body.light-theme .hero-role-row .hero-role {
      color: #444 !important;
    }

    body.light-theme .stat-n {
      -webkit-text-fill-color: unset !important;
      background: linear-gradient(135deg, var(--violet2), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    body.light-theme .stat-l {
      color: #555 !important;
    }

    body.light-theme .cm-name {
      color: #000 !important;
    }

    body.light-theme .cm-org {
      color: #555 !important;
    }

    body.light-theme nav {
      background: rgba(255, 255, 255, .92) !important;
      border-bottom: 1px solid #eee !important;
    }

    body.light-theme .hcard,
    .light-theme .abt-card,
    .light-theme .sk-card {
      background: #f5f5f5 !important;
      border-color: #e5e5e5 !important;
    }

    body.light-theme .srv-card,
    .light-theme .services-section {
      background: #f5f5f5 !important;
    }

    body.light-theme .proj-card {
      background: #f5f5f5 !important;
      border-color: #e5e5e5 !important;
    }

    body.light-theme .modal-box,
    .light-theme .cv-box {
      background: #fff !important;
      border-color: #e5e5e5 !important;
    }

    body.light-theme footer {
      background: #f5f5f5 !important;
    }

    body.light-theme .exp-layout,
    .light-theme .etab {
      background: #f5f5f5 !important;
      border-color: #e5e5e5 !important;
    }

    body.light-theme .cert-grid .ct-card {
      background: #f5f5f5 !important;
      border-color: #e5e5e5 !important;
    }

    body.light-theme .mq-wrap::before {
      background: linear-gradient(90deg, #fff, transparent) !important;
    }

    body.light-theme .mq-wrap::after {
      background: linear-gradient(-90deg, #fff, transparent) !important;
    }

    /* What I Do / Services - light theme */
    body.light-theme .srv-title {
      color: #000000 !important;
    }

    body.light-theme .srv-desc {
      color: #222222 !important;
    }

    body.light-theme .srv-n {
      color: #555555 !important;
    }

    body.light-theme .srv-link {
      color: var(--violet) !important;
    }

    body.light-theme .srv-card {
      background: #f5f5f5 !important;
    }

    body.light-theme .srv-ico {
      color: #000 !important;
    }

    body.light-theme .srv-top-bar {
      opacity: 1 !important;
    }

    /* Projects - light theme */
    body.light-theme .pc-title {
      color: #000000 !important;
    }

    body.light-theme .pc-desc {
      color: #222222 !important;
    }

    body.light-theme .pc-type {
      color: #555555 !important;
    }

    body.light-theme .pc-num {
      color: #555555 !important;
    }

    body.light-theme .proj-card {
      background: #f0f0f0 !important;
      border-color: #ddd !important;
    }

    body.light-theme .pc-header {
      background: #e5e5e5 !important;
    }

    body.light-theme .proj-detail-btn {
      color: #000 !important;
      border-color: #333 !important;
    }

    body.light-theme .proj-detail-btn:hover {
      background: #000 !important;
      color: #fff !important;
    }

    body.light-theme .pc-arrow {
      color: #000 !important;
    }

    /* Modal - light theme */
    body.light-theme .modal-title {
      color: #000000 !important;
    }

    body.light-theme .modal-desc {
      color: #222222 !important;
    }

    body.light-theme .modal-section-title {
      color: #000 !important;
    }

    body.light-theme .modal-feat {
      color: #222 !important;
    }

    body.light-theme .modal-feat strong {
      color: #000 !important;
    }

    body.light-theme .modal-box {
      background: #ffffff !important;
      color: #000 !important;
    }

    body.light-theme .modal-close {
      background: #eee !important;
      color: #000 !important;
    }

    /* Skills section - light theme */
    body.light-theme .sk-title {
      color: #000000 !important;
    }

    body.light-theme .sk-card {
      background: #f0f0f0 !important;
      border-color: #ddd !important;
    }

    /* Experience - light theme */
    body.light-theme .tl-role {
      color: #000000 !important;
    }

    body.light-theme .tl-desc {
      color: #222222 !important;
    }

    body.light-theme .tl-company {
      color: var(--violet) !important;
    }

    body.light-theme .etab-co {
      color: #000 !important;
    }

    body.light-theme .etab-r {
      color: #444 !important;
    }

    body.light-theme .epoint {
      color: #222 !important;
    }

    body.light-theme .exp-panel p {
      color: #222 !important;
    }

    body.light-theme .exp-panel strong {
      color: #000 !important;
    }

    /* Certs - light theme */
    body.light-theme .ct-name {
      color: #000000 !important;
    }

    body.light-theme .ct-org {
      color: #444 !important;
    }

    body.light-theme .ct-date {
      color: #555 !important;
    }

    /* Contact - light theme */
    body.light-theme .ctlnk-lbl {
      color: #000 !important;
    }

    body.light-theme .ctlnk-val {
      color: #333 !important;
    }

    body.light-theme .ctlnk {
      border-color: #ddd !important;
    }

    body.light-theme .ctlnk:hover {
      border-color: #000 !important;
    }

    body.light-theme .ct-h2 {
      color: #000 !important;
    }

    body.light-theme .big-cta {
      color: #fff !important;
    }

    /* Footer - light theme */
    body.light-theme footer {
      color: #333 !important;
    }

    body.light-theme .ft-copy {
      color: #555 !important;
    }

    /* General muted text */
    body.light-theme [style*="color:var(--muted)"] {
      color: #333333 !important;
    }

    body.light-theme [style*="color:var(--white)"] {
      color: #000000 !important;
    }


    /* Counter */
    .stat-n {
      transition: all .3s;
    }
  

/* ══════════════════════════════════════════════
   Modals · Splash · Cursor · Music Widget
══════════════════════════════════════════════ */


    .proj-detail-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: gap .2s;
      padding: 0;
    }

    .proj-detail-btn:hover {
      gap: 14px;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(12px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-box {
      background: var(--ink2);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: min(660px, 92vw);
      max-height: 85vh;
      overflow-y: auto;
      padding: 40px;
      position: relative;
      transform: translateY(24px);
      transition: transform .3s;
    }

    .modal-overlay.open .modal-box {
      transform: translateY(0);
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--border);
      border: none;
      color: var(--muted);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
    }

    .modal-close:hover {
      background: rgba(124, 58, 237, .3);
      color: var(--white);
    }

    .modal-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .modal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 46px;
      letter-spacing: 3px;
      color: var(--white);
      line-height: 1;
      margin-bottom: 16px;
    }

    .modal-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.85;
      margin-bottom: 24px;
    }

    .modal-section-title {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 12px;
      margin-top: 24px;
    }

    .modal-features {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal-feat {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
    }

    .modal-feat-ico {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .modal-feat strong {
      color: var(--white);
    }

    .modal-tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .modal-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 28px;
      background: linear-gradient(135deg, var(--violet), var(--pink));
      color: #fff;
      padding: 13px 28px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-decoration: none;
      transition: all .3s;
      box-shadow: 0 6px 20px rgba(124, 58, 237, .3);
    }

    .modal-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(124, 58, 237, .45);
    }

    /* ── CERT VIEWER MODAL ── */
    .cv-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      backdrop-filter: blur(16px);
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .cv-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .cv-box {
      background: var(--ink2);
      border: 1px solid rgba(124, 58, 237, .3);
      border-radius: 20px;
      width: min(860px, 95vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: scale(.96);
      transition: transform .3s;
    }

    .cv-overlay.open .cv-box {
      transform: scale(1);
    }

    .cv-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .cv-title {
      font-family: "Bebas Neue", sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      color: var(--white);
    }

    .cv-close {
      background: var(--border2);
      border: none;
      color: var(--muted);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      flex-shrink: 0;
    }

    .cv-close:hover {
      background: rgba(124, 58, 237, .4);
      color: var(--white);
    }

    .cv-body {
      flex: 1;
      overflow: hidden;
      background: #fff;
    }

    .cv-body iframe {
      width: 100%;
      height: 74vh;
      border: none;
      display: block;
    }
  

/* ══════════════════════════════════════════════
   SECTION 3: Project Detail Buttons & Cert Viewer Modal
══════════════════════════════════════════════ */


    .proj-detail-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: gap .2s;
      padding: 0;
    }

    .proj-detail-btn:hover {
      gap: 14px;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(12px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-box {
      background: var(--ink2);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: min(660px, 92vw);
      max-height: 85vh;
      overflow-y: auto;
      padding: 40px;
      position: relative;
      transform: translateY(24px);
      transition: transform .3s;
    }

    .modal-overlay.open .modal-box {
      transform: translateY(0);
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--border);
      border: none;
      color: var(--muted);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
    }

    .modal-close:hover {
      background: rgba(124, 58, 237, .3);
      color: var(--white);
    }

    .modal-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .modal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 46px;
      letter-spacing: 3px;
      color: var(--white);
      line-height: 1;
      margin-bottom: 16px;
    }

    .modal-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.85;
      margin-bottom: 24px;
    }

    .modal-section-title {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 12px;
      margin-top: 24px;
    }

    .modal-features {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal-feat {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
    }

    .modal-feat-ico {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .modal-feat strong {
      color: var(--white);
    }

    .modal-tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .modal-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 28px;
      background: linear-gradient(135deg, var(--violet), var(--pink));
      color: #fff;
      padding: 13px 28px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-decoration: none;
      transition: all .3s;
      box-shadow: 0 6px 20px rgba(124, 58, 237, .3);
    }

    .modal-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(124, 58, 237, .45);
    }

    /* ── CERT VIEWER MODAL ── */
    .cv-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      backdrop-filter: blur(16px);
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .cv-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .cv-box {
      background: var(--ink2);
      border: 1px solid rgba(124, 58, 237, .3);
      border-radius: 20px;
      width: min(860px, 95vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: scale(.96);
      transition: transform .3s;
    }

    .cv-overlay.open .cv-box {
      transform: scale(1);
    }

    .cv-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .cv-title {
      font-family: "Bebas Neue", sans-serif;
      font-size: 18px;
      letter-spacing: 2px;
      color: var(--white);
    }

    .cv-close {
      background: var(--border2);
      border: none;
      color: var(--muted);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      flex-shrink: 0;
    }

    .cv-close:hover {
      background: rgba(124, 58, 237, .4);
      color: var(--white);
    }

    .cv-body {
      flex: 1;
      overflow: hidden;
      background: #fff;
    }

    .cv-body iframe {
      width: 100%;
      height: 74vh;
      border: none;
      display: block;
    }