:root {
  --bg-color: #060912;
  --text-color: #f1f5f9;
  --eyebrow-color: rgba(241, 245, 249, 0.3);
  --hint-color: rgba(241, 245, 249, 0.22);
  --accent: #60a5fa;
  --glow: rgba(96,165,250,.38);
  --card-w: 380px;
  --card-h: 230px;
  
  --front-bg: linear-gradient(140deg,#111827 0%,#1c2a44 55%,#14213d 100%);
  --front-border: rgba(255,255,255,.1);
  --dot-grid: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  --name-color: #f1f5f9;
  --badge-color: rgba(255,255,255,.28);
  --tag-bg: rgba(96,165,250,.12);
  --tag-border: rgba(96,165,250,.28);

  --back-bg: linear-gradient(140deg,#0d1524 0%,#1a2840 100%);
  --back-border: rgba(255,255,255,.08);
  --stripe-bg: linear-gradient(90deg,rgba(96,165,250,.06),rgba(139,92,246,.12),rgba(96,165,250,.06));
  --stripe-border: rgba(255,255,255,.06);
  --blabel-color: rgba(255,255,255,.22);
  --sk-bg: rgba(255,255,255,.06);
  --sk-border: rgba(255,255,255,.11);
  --sk-color: rgba(241,245,249,.72);
  --socials-color: rgba(255,255,255,.32);
  
  --toggle-bg: rgba(255, 255, 255, 0.06);
  --toggle-border: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] {
  --bg-color: #f8fafc;
  --text-color: #0f172a;
  --eyebrow-color: rgba(15, 23, 42, 0.4);
  --hint-color: rgba(15, 23, 42, 0.4);
  --accent: #2563eb;
  --glow: rgba(37,99,235,.22);

  --front-bg: linear-gradient(140deg,#ffffff 0%,#f1f5f9 55%,#e2e8f0 100%);
  --front-border: rgba(0,0,0,.08);
  --dot-grid: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  --name-color: #0f172a;
  --badge-color: rgba(15,23,42,.4);
  --tag-bg: rgba(37,99,235,.08);
  --tag-border: rgba(37,99,235,.2);

  --back-bg: linear-gradient(140deg,#f1f5f9 0%,#e2e8f0 100%);
  --back-border: rgba(0,0,0,.08);
  --stripe-bg: linear-gradient(90deg,rgba(37,99,235,.04),rgba(124,58,237,.08),rgba(37,99,235,.04));
  --stripe-border: rgba(0,0,0,.06);
  --blabel-color: rgba(15,23,42,.4);
  --sk-bg: rgba(0,0,0,.04);
  --sk-border: rgba(0,0,0,.08);
  --sk-color: rgba(15,23,42,.78);
  --socials-color: rgba(15,23,42,.5);

  --toggle-bg: rgba(0, 0, 0, 0.05);
  --toggle-border: rgba(0, 0, 0, 0.1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100%;background:var(--bg-color);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;color:var(--text-color);overflow-x:hidden;user-select:none;-webkit-user-select:none;transition:background .3s, color .3s;}

.blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.15;pointer-events:none;transition:background .3s;}
.b1{width:480px;height:480px;background:#3b82f6;top:-130px;left:-120px;animation:bm 15s ease-in-out infinite alternate;}
.b2{width:340px;height:340px;background:#7c3aed;bottom:-90px;right:-90px;animation:bm 11s ease-in-out infinite alternate-reverse;}
.b3{width:260px;height:260px;background:#0891b2;top:55%;left:58%;animation:bm 18s ease-in-out infinite alternate;}
@keyframes bm{from{transform:translate(0,0) scale(1)}to{transform:translate(35px,50px) scale(1.12)}}

.top-actions{position:absolute;top:24px;right:24px;display:flex;gap:10px;z-index:10;}
.action-btn{background:var(--toggle-bg);border:1px solid var(--toggle-border);padding:8px 14px;border-radius:30px;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--text-color);text-transform:uppercase;letter-spacing:1px;transition:all .2s;}
.action-btn:hover{transform:translateY(-1px);background:var(--tag-bg);}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--eyebrow-color);margin-bottom:44px;text-align:center;animation:fi .9s ease both;transition:color .3s;}
@keyframes fi{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.scene{perspective:1000px;width:var(--card-w);height:var(--card-h);position:relative;animation:ci .9s cubic-bezier(.2,0,0,1) .1s both;}
@keyframes ci{from{opacity:0;transform:translateY(28px) scale(.93)}to{opacity:1;transform:none}}
.scene::after{content:'';position:absolute;inset:-10px;border-radius:28px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 28px 64px var(--glow);transition:box-shadow .4s;}

.wrap{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;}
.face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transition:background .3s, border-color .3s;}

.front{background:var(--front-bg);border:1px solid var(--front-border);padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between;}
.front::before{content:'';position:absolute;inset:0;background-image:var(--dot-grid);background-size:22px 22px;pointer-events:none;border-radius:20px;}

.holo{position:absolute;inset:0;border-radius:20px;pointer-events:none;background:linear-gradient(var(--h-angle,45deg),#ff0066,#ff8c00,#ffed00,#00ff88,#00cfff,#cc00ff,#ff0066);mix-blend-mode:screen;opacity:0;transition:opacity .35s ease;}
.scene:hover .holo{opacity:.19;}

.shine{position:absolute;inset:0;border-radius:20px;pointer-events:none;background:radial-gradient(ellipse 70% 60% at var(--h-x,50%) var(--h-y,50%),rgba(255,255,255,.17) 0%,transparent 68%);opacity:0;transition:opacity .3s ease;}
.scene:hover .shine{opacity:1;}

.fr{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;color:#fff;transition:background .3s;}
.badge{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--badge-color);text-align:right;line-height:1.7;transition:color .3s;}
.fm{position:relative;z-index:1;}
.name{font-family:'Syne',sans-serif;font-size:2.05rem;font-weight:800;letter-spacing:-.5px;line-height:1;color:var(--name-color);transition:color .3s;}
.sub{font-size:.8rem;color:var(--accent);font-weight:500;margin-top:5px;transition:color .3s;}
.fb{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;}
.tags{display:flex;gap:7px;flex-wrap:wrap;}
.tag{font-family:'JetBrains Mono',monospace;font-size:.57rem;padding:3px 9px;border-radius:6px;background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--accent);text-transform:uppercase;letter-spacing:.3px;transition:background .3s,border-color .3s,color .3s;}
.nfc-ico{width:28px;height:28px;color:var(--badge-color);transition:color .3s;}

.back{background:var(--back-bg);border:1px solid var(--back-border);transform:rotateY(180deg);padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;}
.stripe{position:absolute;left:0;top:30px;right:0;height:42px;background:var(--stripe-bg);border-top:1px solid var(--stripe-border);border-bottom:1px solid var(--stripe-border);transition:background .3s, border-color .3s;}
.blabel{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blabel-color);padding-top:52px;transition:color .3s;display:flex;justify-content:space-between;align-items:center;}
.back-actions{display:flex;gap:6px;}

@keyframes pulseGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); }
  50% { transform: scale(1.04); box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); }
}

@keyframes linkFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.mini-btn {
  background: var(--tag-bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all .2s;
  animation: pulseGlow 2.5s infinite ease-in-out;
}
.mini-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.skills{display:flex;gap:7px;flex-wrap:wrap;}
.sk{font-size:.7rem;font-weight:500;padding:4px 12px;border-radius:20px;background:var(--sk-bg);border:1px solid var(--sk-border);color:var(--sk-color);transition:background .3s, border-color .3s, color .3s;}

.bbot{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2;}
.socials{font-family:'JetBrains Mono',monospace;font-size:.63rem;line-height:2.1;color:var(--socials-color);letter-spacing:.3px;transition:color .3s;}
.socials a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.socials a:hover {
  color: var(--accent);
  transform: translateX(3px);
}
.socials a em {
  color: var(--accent);
  font-style: normal;
  text-decoration: underline;
  text-decoration-style: dotted;
  animation: linkFloat 2s infinite ease-in-out;
  display: inline-block;
}

.blogo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:#fff;transition:background .3s;}

.qr-modal{position:fixed;inset:0;background:rgba(6,9,18,0.85);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:99999;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.qr-modal.active{opacity:1;pointer-events:auto;}
.qr-card{background:var(--front-bg);border:1px solid var(--front-border);padding:24px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 20px 40px rgba(0,0,0,0.5);}
#qrcode{background:#fff;padding:10px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
#qrcode img{display:block;}
.close-qr{background:var(--accent);border:none;color:#fff;padding:8px 20px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.7rem;cursor:pointer;text-transform:uppercase;font-weight:700;letter-spacing:1px;transition:opacity .2s;}
.close-qr:hover{opacity:.85;}

.controls{margin-top:50px;display:flex;flex-direction:column;align-items:center;gap:13px;animation:fi .9s ease both;}
.clabel{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--hint-color);transition:color .3s;}
.swatches{display:flex;gap:11px;}
.sw{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;}
.sw.on{border-color:var(--text-color);transform:scale(1.22);}
.hint{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--hint-color);letter-spacing:.3px;text-align:center;transition:color .3s;}

@media(max-width:440px){
  :root{--card-w:316px;--card-h:194px;}
  .name{font-size:1.7rem;}
  .controls{margin-top:34px;}
  .eyebrow{margin-bottom:30px;}
  .top-actions{top:14px;right:14px;gap:6px;}
  .action-btn{padding:6px 10px;font-size:.6rem;}
}