/* ─── DESIGN TOKENS ──────────────────────────────────────── */
    :root {
      --glass:        rgba(30,32,58,0.045);
      --glass-hover:  rgba(30,32,58,0.08);
      --glass-card:   rgba(255,255,255,0.62);
      --glass-border: rgba(30,32,58,0.09);
      --glass-strong: rgba(30,32,58,0.14);
      --blur:         blur(20px);
      --blur-light:   blur(10px);

      --a: #8b5cf6;
      --b: #0891b2;
      --c: #db2777;
      --d: #16a34a;

      --txt:   #2b2a3d;
      --txt-2: rgba(43,42,61,0.66);
      --txt-3: rgba(43,42,61,0.44);

      --r-lg: 24px;
      --r-md: 16px;
      --r-sm: 10px;
      --ease: cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }

    body {
      font-family: 'IBM Plex Sans', sans-serif;
      color: var(--txt);
      min-height: 100vh;
      overflow-x: hidden;
      background: #faf9f7;
    }

    /* ─── ANIMATED MESH BACKGROUND ──────────────────────────── */
    .bg-mesh {
      position: fixed; inset: 0; z-index: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%,  rgba(167,139,250,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 30%,  rgba(103,232,249,0.11) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 50% 85%,  rgba(249,168,212,0.11) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 70%,  rgba(134,239,172,0.1) 0%, transparent 55%),
        #faf9f7;
    }
    .bg-mesh::after {
      content:''; position:absolute; inset:0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity: 0.2; pointer-events:none;
    }
    .bg-orb {
      position: fixed; border-radius: 50%; filter: blur(80px);
      pointer-events: none; z-index: 0;
      animation: orbFloat 12s ease-in-out infinite;
    }
    .bg-orb-1 { width:500px; height:500px; top:-100px; left:-150px; background:rgba(139,92,246,0.15); animation-delay:0s; }
    .bg-orb-2 { width:400px; height:400px; top:30%; right:-100px; background:rgba(6,182,212,0.13); animation-delay:-4s; }
    .bg-orb-3 { width:350px; height:350px; bottom:-80px; left:30%; background:rgba(236,72,153,0.11); animation-delay:-8s; }

    @keyframes orbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(30px,-20px) scale(1.05); }
      66%      { transform: translate(-20px,15px) scale(0.97); }
    }

    .page { position:relative; z-index:1; }

    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:rgba(167,139,250,0.4); border-radius:3px; }

    /* ════════════════════════════════════════════════════════════
       NAV
    ════════════════════════════════════════════════════════════ */
    .hero-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem 2.5rem;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(30,32,58,0.07);
      transition: all 0.3s var(--ease);
    }
    .hero-nav.scrolled { background: rgba(255,255,255,0.85); box-shadow: 0 4px 30px rgba(30,32,58,0.08); }
    .nav-logo {
      font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--a), var(--b));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .nav-cta { display:flex; gap:0.75rem; align-items:center; }
    .nav-cta a {
      font-size: 0.85rem; color: var(--txt-2); text-decoration: none;
      padding: 0.45rem 1.1rem; border-radius: 50px;
      border: 1px solid var(--glass-border); background: var(--glass);
      transition: all 0.25s;
    }
    .nav-cta a:hover { background: var(--glass-hover); color: var(--txt); border-color: rgba(30,32,58,0.18); }
    .nav-cta .btn-cv {
      background: linear-gradient(135deg, #8b5cf6, #0891b2);
      border-color: transparent; color: #fff;
    }
    .nav-cta .btn-cv:hover { background: linear-gradient(135deg, #7c3aed, #0e7490); }

    /* ════════════════════════════════════════════════════════════
       HERO
    ════════════════════════════════════════════════════════════ */
    #hero {
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 6rem 2rem 4rem; position: relative;
    }
    .hero-body {
      display: grid; grid-template-columns: 1fr auto;
      gap: 5rem; align-items: center;
      max-width: 1100px; width: 100%; margin: 0 auto;
    }
    .hero-text { animation: fadeUp 0.9s var(--ease) both; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--b); background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.25);
      padding: 0.35rem 0.9rem; border-radius: 50px; margin-bottom: 1.5rem;
    }
    .hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--b); animation:pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

    .hero-name {
      font-family: 'IBM Plex Sans', sans-serif; font-weight: 800;
      font-size: clamp(2.6rem,5.5vw,4.2rem);
      line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 1rem;
    }
    .hero-name span {
      background: linear-gradient(135deg, var(--a) 0%, var(--b) 50%, var(--c) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-role {
      font-size: 1.1rem; font-weight: 300; color: var(--txt-2);
      margin-bottom: 1.8rem; line-height: 1.65; max-width: 520px;
    }
    .hero-stats { display:flex; gap:1.5rem; margin-bottom:2.5rem; flex-wrap:wrap; }
    .hero-stat {
      text-align:center; padding:1rem 1.4rem;
      background: var(--glass); border: 1px solid var(--glass-border);
      border-radius: var(--r-md);
      backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
    }
    .hero-stat-num {
      font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:1.6rem;
      background: linear-gradient(135deg, var(--a), var(--b));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-stat-lbl { font-size:0.75rem; color:var(--txt-3); margin-top:0.2rem; }
    .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

    .btn-primary {
      display:inline-flex; align-items:center; gap:0.5rem;
      padding:0.8rem 1.8rem; border-radius:50px; border:none; cursor:pointer;
      font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:0.95rem;
      text-decoration:none; color:#fff;
      background: linear-gradient(135deg, #7c3aed, #0891b2);
      box-shadow: 0 0 30px rgba(124,58,237,0.35);
      transition: all 0.3s var(--ease);
    }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 50px rgba(124,58,237,0.55); }
    .btn-ghost {
      display:inline-flex; align-items:center; gap:0.5rem;
      padding:0.8rem 1.8rem; border-radius:50px; cursor:pointer;
      font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:0.95rem;
      text-decoration:none; color:var(--txt);
      background: var(--glass); border: 1px solid var(--glass-border);
      backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
      transition: all 0.3s var(--ease);
    }
    .btn-ghost:hover { background:var(--glass-hover); border-color:rgba(30,32,58,0.18); transform:translateY(-2px); }

    /* photo */
    .hero-visual { animation: fadeRight 0.9s 0.2s var(--ease) both; transition: transform 0.3s var(--ease); perspective: 900px; }
    .hero-photo-wrap {
      position:relative; width:260px; height:330px;
      transition: transform 0.3s var(--ease); transform-style: preserve-3d; will-change: transform;
    }
    .hero-photo-wrap::before {
      content:''; position:absolute; inset:-2px; border-radius:28px; z-index:0;
      background: linear-gradient(135deg, var(--a), var(--b), var(--c));
      animation: gradRotate 6s linear infinite;
    }
    @keyframes gradRotate {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }
    .hero-photo-wrap img {
      position:relative; z-index:1; width:100%; height:100%;
      object-fit:cover; border-radius:26px; display:block;
    }
    .hero-badge {
      position:absolute; z-index:2;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border); border-radius: var(--r-sm);
      padding: 0.6rem 0.9rem;
      display:flex; align-items:center; gap:0.5rem;
      font-size:0.78rem; font-weight:500; white-space:nowrap;
      box-shadow: 0 8px 24px rgba(30,32,58,0.08);
    }
    .hero-badge-1 { top:-16px; right:-30px; color:var(--a); border-color:rgba(167,139,250,0.3); }
    .hero-badge-2 { bottom:-16px; left:-30px; color:var(--b); border-color:rgba(103,232,249,0.3); }
    .hero-badge i { font-size:1rem; }

    .hero-scroll {
      position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:0.4rem;
      cursor:pointer; opacity:0.45;
      animation: fadeUp 1s 1s var(--ease) both; transition:opacity 0.3s;
    }
    .hero-scroll:hover { opacity:0.8; }
    .hero-scroll span { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-3); }
    .scroll-line { width:1px; height:40px; background:linear-gradient(var(--a),transparent); animation:scrollDrop 1.8s ease-in-out infinite; }
    @keyframes scrollDrop {
      0%  { transform:scaleY(0); transform-origin:top; }
      50% { transform:scaleY(1); transform-origin:top; }
      51% { transform:scaleY(1); transform-origin:bottom; }
      100%{ transform:scaleY(0); transform-origin:bottom; }
    }

    /* ════════════════════════════════════════════════════════════
       TAB BAR
    ════════════════════════════════════════════════════════════ */
    #tab-bar {
      position: sticky; top: 64px; z-index: 90;
      padding: 1rem 2rem;
      display: flex; justify-content: center;
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(30,32,58,0.06);
    }
    .tab-list {
      display:flex; gap:0.4rem;
      background: rgba(30,32,58,0.04);
      border: 1px solid rgba(30,32,58,0.08);
      border-radius: 50px; padding: 0.35rem;
    }
    .tab-btn {
      display:flex; align-items:center; gap:0.5rem;
      padding:0.55rem 1.3rem; border-radius:50px; border:none; cursor:pointer;
      background:transparent; color:var(--txt-2);
      font-family:'IBM Plex Sans',sans-serif; font-size:0.875rem; font-weight:500;
      transition: all 0.3s var(--ease); white-space:nowrap;
    }
    .tab-btn:hover { color:var(--txt); background:rgba(30,32,58,0.05); }
    .tab-btn.active {
      background: linear-gradient(135deg, #8b5cf6, #0891b2);
      color:#fff; box-shadow: 0 4px 20px rgba(139,92,246,0.28);
    }
    .tab-btn i { font-size:0.8rem; }

    /* ════════════════════════════════════════════════════════════
       TAB CONTENT
    ════════════════════════════════════════════════════════════ */
    .tab-content {
      display:none; min-height:calc(100vh - 130px);
      padding:4rem 2rem 6rem;
      max-width:1100px; margin:0 auto;
    }
    .tab-content.active { display:block; animation: fadeUp 0.45s var(--ease) both; }

    @keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeRight{ from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

    /* ─── SECTION HEADING ───────────────────────────────────── */
    .sec-title {
      font-family:'IBM Plex Sans',sans-serif; font-weight:700;
      font-size:clamp(1.8rem,3.5vw,2.6rem); letter-spacing:-0.02em; margin-bottom:0.5rem;
    }
    .sec-title span {
      background: linear-gradient(135deg, var(--a), var(--b));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .sec-sub { color:var(--txt-2); font-size:1rem; margin-bottom:3rem; max-width:560px; line-height:1.65; }
    .sec-divider { width:48px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--a),var(--b)); margin:1rem 0 2.5rem; }

    /* ════════════════════════════════════════════════════════════
       ABOUT TAB
    ════════════════════════════════════════════════════════════ */
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:4rem; }
    .about-text p { color:var(--txt-2); line-height:1.75; margin-bottom:1.2rem; font-size:0.97rem; }
    .about-highlights { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
    .ahi {
      padding:1.2rem 1.4rem;
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-md);
      backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
    }
    .ahi-icon { font-size:1.3rem; margin-bottom:0.5rem; }
    .ahi-val {
      font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:1.35rem;
      background:linear-gradient(135deg,var(--a),var(--b));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .ahi-lbl { font-size:0.78rem; color:var(--txt-3); margin-top:0.15rem; }

    .about-img-panel { display:flex; align-items:center; justify-content:center; }
    .about-img-wrap {
      position:relative; width:100%; max-width:340px;
      border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-border);
    }
    .about-img-wrap img { width:100%; display:block; border-radius:var(--r-lg); }
    .about-img-glow {
      position:absolute; inset:0;
      background:linear-gradient(180deg,transparent 50%,rgba(124,58,237,0.35) 100%);
      pointer-events:none;
    }

    /* skills */
    .skills-heading { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1.3rem; margin-bottom:2rem; }
    .skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
    .skill-card {
      padding:1.5rem;
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-md);
      backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
      transition:all 0.3s var(--ease);
    }
    .skill-card:hover { background:var(--glass-hover); border-color:rgba(30,32,58,0.16); transform:translateY(-3px); }
    .skill-card-head { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.2rem; }
    .sk-icon {
      width:38px; height:38px; border-radius:var(--r-sm);
      display:flex; align-items:center; justify-content:center; font-size:1rem;
    }
    .sk-icon.vi { background:rgba(167,139,250,0.2); color:var(--a); border:1px solid rgba(167,139,250,0.3); }
    .sk-icon.cy { background:rgba(103,232,249,0.15); color:var(--b); border:1px solid rgba(103,232,249,0.3); }
    .sk-icon.ro { background:rgba(249,168,212,0.15); color:var(--c); border:1px solid rgba(249,168,212,0.3); }
    .sk-icon.mi { background:rgba(134,239,172,0.15); color:var(--d); border:1px solid rgba(134,239,172,0.3); }
    .skill-card-head h4 { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:0.9rem; }
    .stags { display:flex; flex-wrap:wrap; gap:0.4rem; }
    .stag {
      font-size:0.76rem; padding:0.28rem 0.7rem; border-radius:50px;
      background:rgba(30,32,58,0.05); border:1px solid rgba(30,32,58,0.09);
      color:var(--txt-2); transition:all 0.2s;
    }
    .stag:hover { background:rgba(167,139,250,0.18); border-color:rgba(167,139,250,0.4); color:var(--txt); }

    /* ════════════════════════════════════════════════════════════
       PROJECTS TAB
    ════════════════════════════════════════════════════════════ */
    .projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
    .proj-card {
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-lg);
      overflow:hidden; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
      transition:all 0.35s var(--ease); cursor:pointer;
    }
    .proj-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(30,32,58,0.14); border-color:rgba(30,32,58,0.16); }
    .proj-img { height:190px; overflow:hidden; position:relative; }
    .proj-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
    .proj-card:hover .proj-img img { transform:scale(1.06); }
    .proj-img-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(7,9,15,0.7) 100%); }
    .proj-ov {
      position:absolute; inset:0;
      background:rgba(124,58,237,0.75); backdrop-filter:blur(4px);
      display:flex; align-items:center; justify-content:center; gap:1rem;
      opacity:0; transition:opacity 0.3s var(--ease);
    }
    .proj-card:hover .proj-ov { opacity:1; }
    .proj-ov-btn {
      width:44px; height:44px; border-radius:50%;
      background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
      color:#fff; font-size:1rem;
      display:flex; align-items:center; justify-content:center;
      text-decoration:none; transition:all 0.2s; cursor:pointer;
    }
    .proj-ov-btn:hover { background:rgba(255,255,255,0.3); transform:scale(1.1); }
    .proj-body { padding:1.5rem; }
    .proj-title { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1rem; margin-bottom:0.5rem; }
    .proj-desc { font-size:0.83rem; color:var(--txt-2); line-height:1.6; margin-bottom:1.1rem; }
    .proj-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
    .ptag { font-size:0.72rem; padding:0.22rem 0.65rem; border-radius:50px; background:rgba(30,32,58,0.045); border:1px solid rgba(30,32,58,0.08); color:var(--txt-3); }
    .proj-github-footer { text-align:center; margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--glass-border); }
    .btn-github {
      display:inline-flex; align-items:center; gap:0.7rem;
      padding:0.9rem 2rem; border-radius:50px;
      background:rgba(30,32,58,0.05); border:1px solid rgba(30,32,58,0.1);
      color:var(--txt); font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:0.9rem;
      text-decoration:none; transition:all 0.3s var(--ease);
    }
    .btn-github:hover { background:rgba(30,32,58,0.09); border-color:rgba(30,32,58,0.18); transform:translateY(-2px); }

    /* ════════════════════════════════════════════════════════════
       CERTIFICATES TAB
    ════════════════════════════════════════════════════════════ */
    .cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
    .cert-card {
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-lg);
      overflow:hidden; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
      transition:all 0.3s var(--ease); cursor:pointer;
    }
    .cert-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(30,32,58,0.13); border-color:rgba(30,32,58,0.16); }
    .cert-hdr { padding:2.2rem 1.8rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
    .cert-hdr::before { content:''; position:absolute; inset:0; opacity:0.12; }
    .cert-hdr.vi::before { background:radial-gradient(circle at 50% 50%,var(--a),transparent 70%); }
    .cert-hdr.cy::before { background:radial-gradient(circle at 50% 50%,var(--b),transparent 70%); }
    .cert-ico {
      width:64px; height:64px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; font-size:1.6rem;
      margin:0 auto 1rem; position:relative; z-index:1;
    }
    .cert-ico.vi { background:rgba(167,139,250,0.2); border:1px solid rgba(167,139,250,0.35); color:var(--a); }
    .cert-ico.cy { background:rgba(103,232,249,0.15); border:1px solid rgba(103,232,249,0.3); color:var(--b); }
    .cert-hdr h3 { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1rem; position:relative; z-index:1; }
    .cert-body { padding:1.4rem 1.8rem 1.8rem; }
    .cert-name { font-weight:600; font-size:1rem; margin-bottom:0.3rem; }
    .cert-org { font-size:0.82rem; color:var(--a); font-weight:500; margin-bottom:0.5rem; }
    .cert-date { font-size:0.78rem; color:var(--txt-3); margin-bottom:1rem; }
    .cert-desc { font-size:0.83rem; color:var(--txt-2); line-height:1.6; margin-bottom:1.2rem; }
    .cert-acts { display:flex; gap:0.6rem; }
    .cbtn {
      display:inline-flex; align-items:center; gap:0.4rem;
      padding:0.45rem 1rem; border-radius:50px; font-size:0.78rem;
      font-family:'IBM Plex Sans',sans-serif; font-weight:500; text-decoration:none;
      transition:all 0.25s; cursor:pointer;
    }
    .cbtn-p { background:linear-gradient(135deg,#8b5cf6,#0891b2); border:1px solid transparent; color:#fff; }
    .cbtn-p:hover { background:linear-gradient(135deg,#7c3aed,#0e7490); }
    .cbtn-g { background:var(--glass); border:1px solid var(--glass-border); color:var(--txt-2); }
    .cbtn-g:hover { background:var(--glass-hover); color:var(--txt); }

    /* ════════════════════════════════════════════════════════════
       EXPERIENCE TAB
    ════════════════════════════════════════════════════════════ */
    .exp-list { display:flex; flex-direction:column; gap:1.2rem; }
    .exp-card {
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-lg);
      padding:1.8rem 2rem; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
      position:relative; overflow:hidden; transition:all 0.3s var(--ease);
    }
    .exp-card:hover { background:var(--glass-hover); border-color:rgba(30,32,58,0.16); transform:translateX(4px); }
    .exp-card::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
      background:linear-gradient(180deg,var(--a),var(--b)); border-radius:2px 0 0 2px;
    }
    .exp-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
    .exp-top-left { display:flex; align-items:flex-start; gap:1rem; }
    .exp-logo {
      width:44px; height:44px; border-radius:12px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:0.92rem; color:#fff;
      letter-spacing:-0.02em;
    }
    .exp-logo.el-1 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
    .exp-logo.el-2 { background:linear-gradient(135deg,#0891b2,#0e7490); }
    .exp-logo.el-3 { background:linear-gradient(135deg,#db2777,#be185d); }
    .exp-logo.el-4 { background:linear-gradient(135deg,#16a34a,#15803d); }
    .exp-logo.el-5 { background:linear-gradient(135deg,#f59e0b,#d97706); }
    .exp-logo.el-6 { background:linear-gradient(135deg,#6366f1,#4338ca); }
    .exp-logo.has-img { background:#fff; border:1px solid var(--glass-border); padding:6px; overflow:hidden; }
    .exp-logo img { width:100%; height:100%; object-fit:contain; border-radius:6px; }
    .exp-logo.zoom img { transform:scale(1.6); }
    .exp-logo.fill { padding:0; }
    .exp-logo.fill img { object-fit:cover; transform:none; }
    .exp-title { font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:0.25rem; }
    .exp-company { font-size:0.85rem; color:var(--a); font-weight:500; margin-bottom:0.25rem; }
    .exp-meta { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.4rem; }
    .exp-badge {
      font-size:0.75rem; padding:0.28rem 0.75rem; border-radius:50px;
      display:inline-flex; align-items:center; gap:0.35rem;
    }
    .ebp { background:rgba(167,139,250,0.15); border:1px solid rgba(167,139,250,0.25); color:var(--a); }
    .ebl { background:rgba(103,232,249,0.1); border:1px solid rgba(103,232,249,0.2); color:var(--b); }
    .exp-bullets { list-style:none; padding:0; }
    .exp-bullets li {
      position:relative; padding-left:1.4rem;
      font-size:0.86rem; color:var(--txt-2); line-height:1.65; margin-bottom:0.6rem;
    }
    .exp-bullets li::before { content:'▸'; position:absolute; left:0; color:var(--a); font-size:0.8rem; top:0.1rem; }

    /* ════════════════════════════════════════════════════════════
       CONTACT TAB
    ════════════════════════════════════════════════════════════ */
    .contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; }
    .contact-info-block { display:flex; flex-direction:column; gap:1rem; }
    .ci {
      display:flex; align-items:center; gap:1.1rem;
      padding:1.2rem 1.4rem;
      background:var(--glass-card); border:1px solid var(--glass-border); border-radius:var(--r-md);
      backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
      transition:all 0.25s;
    }
    .ci:hover { background:var(--glass-hover); border-color:rgba(30,32,58,0.16); }
    .ci-icon {
      width:42px; height:42px; border-radius:var(--r-sm);
      display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
    }
    .ci-icon.vi { background:rgba(167,139,250,0.2); border:1px solid rgba(167,139,250,0.3); color:var(--a); }
    .ci-icon.cy { background:rgba(103,232,249,0.15); border:1px solid rgba(103,232,249,0.3); color:var(--b); }
    .ci-icon.ro { background:rgba(249,168,212,0.15); border:1px solid rgba(249,168,212,0.3); color:var(--c); }
    .ci-icon.mi { background:rgba(134,239,172,0.15); border:1px solid rgba(134,239,172,0.3); color:var(--d); }
    .ci-lbl { font-size:0.73rem; color:var(--txt-3); margin-bottom:0.15rem; text-transform:uppercase; letter-spacing:0.07em; }
    .ci-val { font-size:0.92rem; font-weight:500; color:var(--txt); }
    .contact-socials { margin-top:1.5rem; }
    .contact-socials h4 { font-family:'IBM Plex Sans',sans-serif; font-size:0.85rem; color:var(--txt-3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.85rem; }
    .social-row { display:flex; gap:0.7rem; }
    .soc-btn {
      width:44px; height:44px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:var(--glass); border:1px solid var(--glass-border);
      color:var(--txt-2); font-size:1rem; text-decoration:none; transition:all 0.25s;
    }
    .soc-btn:hover { background:var(--glass-hover); color:var(--txt); transform:translateY(-2px); }
    .soc-btn.li:hover { border-color:rgba(103,232,249,0.5); color:var(--b); }
    .soc-btn.ig:hover { border-color:rgba(249,168,212,0.5); color:var(--c); }
    .contact-map-wrap { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-border); height:420px; }
    .contact-map-wrap iframe { width:100%; height:100%; border:none; display:block; }

    /* ════════════════════════════════════════════════════════════
       MODALS
    ════════════════════════════════════════════════════════════ */
    .modal-bd {
      display:none; position:fixed; inset:0; z-index:200;
      background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      align-items:center; justify-content:center; padding:1.5rem;
    }
    .modal-bd.open { display:flex; animation:fadeIn 0.25s var(--ease) both; }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    .modal-box {
      background:rgba(255,255,255,0.94);
      backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
      border:1px solid rgba(30,32,58,0.08); border-radius:var(--r-lg);
      box-shadow:0 24px 60px rgba(30,32,58,0.18);
      max-width:820px; width:100%; max-height:88vh; overflow-y:auto;
      padding:2.2rem; position:relative;
      animation:modalUp 0.3s var(--ease) both;
    }
    @keyframes modalUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
    .modal-x {
      position:absolute; top:1.2rem; right:1.2rem;
      width:36px; height:36px; border-radius:50%;
      background:var(--glass); border:1px solid var(--glass-border);
      color:var(--txt-2); font-size:1rem;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all 0.2s;
    }
    .modal-x:hover { background:var(--glass-hover); color:var(--txt); }
    .modal-title { font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:1.4rem; margin-bottom:0.3rem; }
    .modal-sub { font-size:0.85rem; color:var(--txt-2); margin-bottom:1.8rem; }
    .modal-gallery { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.8rem; }
    .mgimg {
      border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--glass-border);
      cursor:pointer; aspect-ratio:4/3; position:relative;
    }
    .mgimg img { width:100%; height:100%; object-fit:cover; transition:transform 0.35s; }
    .mgimg:hover img { transform:scale(1.05); }
    .mgimg-ov {
      position:absolute; inset:0; background:rgba(124,58,237,0.5);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity 0.25s;
    }
    .mgimg:hover .mgimg-ov { opacity:1; }
    .mgimg-ov i { font-size:1.5rem; color:#fff; }
    .modal-desc { font-size:0.88rem; color:var(--txt-2); line-height:1.72; margin-bottom:1.5rem; }
    .modal-desc p { margin-bottom:0.8rem; }
    .modal-tech { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.8rem; }
    .tc { font-size:0.76rem; padding:0.28rem 0.75rem; border-radius:50px; background:rgba(167,139,250,0.18); border:1px solid rgba(167,139,250,0.3); color:var(--a); }
    .modal-acts { display:flex; gap:0.75rem; flex-wrap:wrap; }

    /* ════════════════════════════════════════════════════════════
       LIGHTBOX
    ════════════════════════════════════════════════════════════ */
    .lightbox {
      display:none; position:fixed; inset:0; z-index:300;
      background:rgba(0,0,0,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      align-items:center; justify-content:center;
    }
    .lightbox.open { display:flex; animation:fadeIn 0.2s var(--ease) both; }
    .lb-wrap { position:relative; max-width:88vw; max-height:86vh; display:flex; align-items:center; justify-content:center; }
    .lb-wrap img { max-width:100%; max-height:86vh; border-radius:var(--r-md); object-fit:contain; }
    .lb-close {
      position:fixed; top:1.5rem; right:1.5rem; width:42px; height:42px; border-radius:50%;
      background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
      color:#fff; font-size:1.1rem;
      display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s;
    }
    .lb-close:hover { background:rgba(255,255,255,0.22); }
    .lb-nav {
      position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
      background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
      color:#fff; font-size:1.1rem;
      display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s;
    }
    .lb-nav:hover { background:rgba(255,255,255,0.2); }
    .lb-prev { left:1.5rem; } .lb-next { right:1.5rem; }
    .lb-counter {
      position:fixed; bottom:2rem; left:50%; transform:translateX(-50%);
      font-size:0.85rem; color:rgba(255,255,255,0.6);
      background:rgba(0,0,0,0.5); padding:0.4rem 1rem; border-radius:50px;
    }

    /* ─── SCROLL REVEAL ─────────────────────────────────────── */
    .reveal { opacity:0; transform:translateY(28px); }
    .reveal.in-view { animation: revealUp 0.7s var(--ease) forwards; }
    @keyframes revealUp { to { opacity:1; transform:translateY(0); } }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity:1; transform:none; animation:none; }
    }

    /* ─── RESPONSIVE ────────────────────────────────────────── */
    @media (max-width:900px) {
      .hero-body { grid-template-columns:1fr; text-align:center; gap:3rem; }
      .hero-visual { order:-1; display:flex; justify-content:center; }
      .hero-role { margin:0 auto 1.8rem; }
      .hero-stats { justify-content:center; }
      .hero-actions { justify-content:center; }
      .hero-badge-1 { right:-10px; }
      .hero-badge-2 { left:-10px; }
      .about-grid { grid-template-columns:1fr; }
      .contact-layout { grid-template-columns:1fr; }
      .hero-scroll { display:none; }
    }
    @media (max-width:700px) {
      .tab-list { gap:0.2rem; }
      .tab-btn { padding:0.45rem 0.85rem; font-size:0.78rem; }
      .tab-btn span { display:none; }
      .hero-stats { gap:0.8rem; }
      .modal-gallery { grid-template-columns:1fr; }
      .projects-grid { grid-template-columns:1fr; }
      .cert-grid { grid-template-columns:1fr; }
      .contact-map-wrap { height:280px; }
      .exp-top-left { gap:0.75rem; }
      .modal-box { padding:1.6rem; }
    }
    @media (max-width:480px) {
      .hero-nav { padding:0.9rem 1.2rem; }
      .nav-logo { font-size:1rem; }
      .nav-cta a { padding:0.4rem 0.85rem; font-size:0.8rem; }
      .hero-name { font-size:2.2rem; }
      .hero-photo-wrap { width:200px; height:255px; }
      #tab-bar { padding:0.75rem 1rem; top:48px; }
      .tab-content { padding:2.5rem 1rem 5rem; }
      .exp-card { padding:1.4rem 1.2rem; }
      .exp-logo { width:38px; height:38px; }
      .about-highlights { grid-template-columns:1fr 1fr; gap:0.75rem; }
      .contact-map-wrap { height:220px; }
      .modal-box { padding:1.2rem; }
      .modal-title { font-size:1.15rem; }
    }