/* ── Variables ─────────────────────────────────────── */
:root {
   --bg: #050a0f;
   --panel: #0c1520;
   --panel2: #0f1d2a;
   --border: #1a3a52;
   --border-glow: #0ea5e9;
   --accent: #0ea5e9;
   --accent2: #38bdf8;
   --accent3: #7dd3fc;
   --green: #22d3a5;
   --text: #e2f0ff;
   --text-dim: #7a9bb5;
   --text-muted: #3d6480;
   --glow: 0 0 30px rgba(14, 165, 233, 0.25);
   --glow-strong: 0 0 60px rgba(14, 165, 233, 0.4);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
   height: 100%;
   background: var(--bg);
   color: var(--text);
   font-family: 'Rajdhani', sans-serif;
   overflow: hidden;
}

/* ── Animated background ───────────────────────────── */
.bg-scene {
   position: fixed;
   inset: 0;
   z-index: 0;
   overflow: hidden;
}

.bg-scene::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(14, 165, 233, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 165, 233, 0.04) 1px, transparent 1px);
   background-size: 50px 50px;
}

.bg-scene::after {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14,165,233,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 20% 80%, rgba(34,211,165,0.05) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 80% 20%, rgba(167,139,250,0.04) 0%, transparent 60%);
}

/* Floating orbs */
.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: 0.12;
   animation: drift linear infinite;
}
.orb1 { width: 500px; height: 500px; background: #0ea5e9; top: -150px; left: -100px; animation-duration: 25s; }
.orb2 { width: 400px; height: 400px; background: #22d3a5; bottom: -100px; right: -100px; animation-duration: 30s; animation-delay: -10s; }
.orb3 { width: 300px; height: 300px; background: #a78bfa; top: 40%; right: 15%; animation-duration: 20s; animation-delay: -5s; }

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

/* Scanlines */
.scanlines {
   position: fixed;
   inset: 0;
   z-index: 1;
   background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.03) 3px,
      rgba(0,0,0,0.03) 4px
   );
   pointer-events: none;
}

/* ── Layout ────────────────────────────────────────── */
.page {
   position: relative;
   z-index: 2;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

/* ── Services button ───────────────────────────────── */
.services-btn {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 100;
}

.dropbtn {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 2px;
   text-transform: uppercase;
   background: var(--panel2);
   color: var(--accent2);
   border: 1px solid var(--border-glow);
   padding: 10px 18px;
   border-radius: 3px;
   cursor: pointer;
   transition: all 0.2s;
   box-shadow: 0 0 15px rgba(14,165,233,0.2);
   display: flex;
   align-items: center;
   gap: 8px;
}

.dropbtn::before {
   content: '';
   width: 6px;
   height: 6px;
   background: var(--green);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--green);
   animation: blink 3s infinite;
}

@keyframes blink {
   0%, 90%, 100% { opacity: 1; }
   95% { opacity: 0.1; }
}

.dropbtn:hover {
   background: rgba(14,165,233,0.1);
   box-shadow: 0 0 25px rgba(14,165,233,0.4);
   color: #fff;
}

/* Dropdown shell — empty until PHP injects links */
#dropdown-content {
   position: absolute;
   right: 0;
   top: calc(100% + 8px);
   background: var(--panel);
   border: 1px solid var(--border-glow);
   border-radius: 4px;
   min-width: 180px;
   box-shadow: 0 0 30px rgba(14,165,233,0.25), 0 20px 40px rgba(0,0,0,0.5);
   overflow: hidden;
   display: none;
}

#dropdown-content a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--text-dim);
   text-decoration: none;
   transition: all 0.15s;
   border-bottom: 1px solid rgba(26,58,82,0.4);
   letter-spacing: 1px;
}

#dropdown-content a:last-child { border-bottom: none; }

#dropdown-content a::before {
   content: '›';
   color: var(--accent);
   font-size: 14px;
   opacity: 0;
   transform: translateX(-4px);
   transition: all 0.15s;
}

#dropdown-content a:hover {
   background: rgba(14,165,233,0.08);
   color: var(--accent2);
   padding-left: 20px;
}

#dropdown-content a:hover::before {
   opacity: 1;
   transform: translateX(0);
}

/* ── Profile card ──────────────────────────────────── */
.card {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 0;
   width: 100%;
   max-width: 520px;
   overflow: hidden;
   box-shadow: var(--glow), 0 30px 80px rgba(0,0,0,0.6);
   animation: card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
   position: relative;
}

@keyframes card-in {
   from { opacity: 0; transform: translateY(30px) scale(0.97); }
   to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-topbar {
   height: 3px;
   background: linear-gradient(to right, transparent, var(--accent), var(--accent2), var(--accent), transparent);
   box-shadow: 0 0 15px rgba(14,165,233,0.6);
}

.card::before, .card::after {
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   border-color: var(--accent);
   border-style: solid;
   opacity: 0.4;
}
.card::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.card::after  { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

.card-body {
   padding: 36px 32px 32px;
   text-align: center;
}

/* ── Avatar ────────────────────────────────────────── */
.avatar-wrap {
   position: relative;
   display: inline-block;
   margin-bottom: 24px;
   animation: avatar-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes avatar-in {
   from { opacity: 0; transform: scale(0.7) rotate(-10deg); }
   to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.avatar-ring {
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 1px solid rgba(14,165,233,0.3);
   animation: ring-spin 10s linear infinite;
}

.avatar-ring::before {
   content: '';
   position: absolute;
   top: -1px;
   left: 50%;
   width: 6px;
   height: 6px;
   background: var(--accent);
   border-radius: 50%;
   transform: translateX(-50%);
   box-shadow: 0 0 10px var(--accent);
}

@keyframes ring-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.avatar-ring2 {
   position: absolute;
   inset: -12px;
   border-radius: 50%;
   border: 1px solid rgba(14,165,233,0.1);
   animation: ring-spin 15s linear infinite reverse;
}

.avatar-img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   object-fit: cover;
   display: block;
   border: 2px solid var(--border-glow);
   box-shadow: 0 0 25px rgba(14,165,233,0.3);
   position: relative;
   z-index: 1;
}

/* ── Card content ──────────────────────────────────── */
.card-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 0 0 20px;
}
.card-divider::before, .card-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: linear-gradient(to right, transparent, var(--border));
}
.card-divider::after {
   background: linear-gradient(to left, transparent, var(--border));
}
.card-divider span {
   color: var(--accent);
   font-size: 10px;
   font-family: 'JetBrains Mono', monospace;
}

.name {
   font-family: 'Orbitron', monospace;
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 3px;
   background: linear-gradient(135deg, #e2f0ff, #7dd3fc, #38bdf8);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 0 10px rgba(14,165,233,0.4));
   margin-bottom: 6px;
   animation: name-in 0.8s ease 0.4s both;
}

@keyframes name-in {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
}

.subtitle {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   color: var(--text-muted);
   letter-spacing: 3px;
   text-transform: uppercase;
   margin-bottom: 20px;
   animation: name-in 0.8s ease 0.5s both;
}

.linkedin-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 11px 20px;
   background: rgba(14,165,233,0.08);
   border: 1px solid rgba(14,165,233,0.25);
   border-radius: 3px;
   color: var(--accent2);
   text-decoration: none;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all 0.2s;
   margin-bottom: 24px;
   animation: name-in 0.8s ease 0.6s both;
}

.linkedin-btn:hover {
   background: rgba(14,165,233,0.15);
   border-color: var(--accent);
   box-shadow: 0 0 20px rgba(14,165,233,0.3);
   color: #fff;
   transform: translateY(-1px);
}

/* ── Socials ───────────────────────────────────────── */
.socials {
   display: flex;
   justify-content: center;
   gap: 16px;
   animation: name-in 0.8s ease 0.7s both;
}

.social-link {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--border);
   border-radius: 3px;
   color: var(--text-muted);
   text-decoration: none;
   font-size: 16px;
   transition: all 0.2s;
   background: rgba(255,255,255,0.02);
   position: relative;
   overflow: hidden;
}

.social-link::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(14,165,233,0.1), transparent);
   opacity: 0;
   transition: opacity 0.2s;
}

.social-link:hover {
   border-color: var(--accent);
   color: var(--accent2);
   box-shadow: 0 0 15px rgba(14,165,233,0.3);
   transform: translateY(-2px);
}

.social-link:hover::before { opacity: 1; }

/* ── Card status strip ─────────────────────────────── */
.card-status {
   background: var(--panel2);
   border-top: 1px solid var(--border);
   padding: 10px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   color: var(--text-muted);
   letter-spacing: 1px;
}

.status-dot {
   display: inline-block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--green);
   box-shadow: 0 0 6px var(--green);
   margin-right: 5px;
   animation: blink 3s infinite;
}
.status-dot:nth-child(3) { animation-delay: 1s; }
.status-dot:nth-child(5) { animation-delay: 2s; }

/* ── Footer ────────────────────────────────────────── */
footer {
   position: fixed;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   color: var(--text-muted);
   letter-spacing: 3px;
   z-index: 2;
   white-space: nowrap;
}

footer span { color: var(--accent); }

/* ── PIN Modal ─────────────────────────────────────── */
.modal-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(5,10,15,0.85);
   backdrop-filter: blur(8px);
   z-index: 200;
   align-items: center;
   justify-content: center;
   animation: modal-in 0.2s ease;
}

.modal-overlay.active { display: flex; }

@keyframes modal-in {
   from { opacity: 0; }
   to { opacity: 1; }
}

.modal-box {
   background: var(--panel);
   border: 1px solid var(--border-glow);
   border-radius: 6px;
   padding: 32px;
   width: 320px;
   box-shadow: var(--glow-strong), 0 30px 60px rgba(0,0,0,0.6);
   position: relative;
   animation: modal-box-in 0.25s cubic-bezier(0.16,1,0.3,1);
}

@keyframes modal-box-in {
   from { transform: scale(0.9) translateY(20px); opacity: 0; }
   to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-box::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--accent), transparent);
}

.modal-title {
   font-family: 'Orbitron', monospace;
   font-size: 12px;
   letter-spacing: 3px;
   color: var(--accent2);
   text-align: center;
   margin-bottom: 6px;
   text-transform: uppercase;
}

.modal-sub {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   color: var(--text-muted);
   text-align: center;
   letter-spacing: 2px;
   margin-bottom: 24px;
}

.modal-input {
   width: 100%;
   background: var(--panel2);
   border: 1px solid var(--border);
   border-radius: 3px;
   padding: 12px 16px;
   color: var(--accent2);
   font-family: 'JetBrains Mono', monospace;
   font-size: 18px;
   letter-spacing: 8px;
   text-align: center;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
   margin-bottom: 16px;
}

.modal-input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 15px rgba(14,165,233,0.2);
}

.modal-input.error {
   border-color: #f43f5e;
   box-shadow: 0 0 15px rgba(244,63,94,0.2);
   animation: shake 0.3s ease;
}

@keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-6px); }
   75% { transform: translateX(6px); }
}

.modal-btn {
   width: 100%;
   padding: 12px;
   background: rgba(14,165,233,0.1);
   border: 1px solid var(--accent);
   border-radius: 3px;
   color: var(--accent2);
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   letter-spacing: 3px;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.2s;
}

.modal-btn:hover {
   background: rgba(14,165,233,0.2);
   box-shadow: 0 0 20px rgba(14,165,233,0.3);
   color: #fff;
}

.modal-close {
   position: absolute;
   top: 12px;
   right: 12px;
   background: none;
   border: none;
   color: var(--text-muted);
   cursor: pointer;
   font-size: 18px;
   line-height: 1;
   transition: color 0.2s;
}

.modal-close:hover { color: var(--accent); }

.modal-error {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   color: #f43f5e;
   text-align: center;
   letter-spacing: 2px;
   margin-top: 10px;
   min-height: 16px;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 480px) {
   .card { max-width: 340px; }
   .name { font-size: 18px; }
   .card-body { padding: 28px 24px 24px; }
}

@media (min-width: 2000px) {
   .card { max-width: 600px; }
   .avatar-img { width: 170px; height: 170px; }
   .name { font-size: 26px; }
}