:root{
  --bg:#0b1020;
  --grid:#23314d;
  --text:#0b1020;
  --ink:#0f172a;
  --muted:#7b8aa5;
  --card:rgba(255,255,255,0.08);
  --glass:rgba(255,255,255,0.7);
  --ring:rgba(255,255,255,0.6);
  --white:#ffffff;
  --accent-1:#76a8ff; /* blue */
  --accent-2:#b284ff; /* purple */
  --accent-3:#ff9ccf; /* pink */
}

[data-theme="dark"]{
  --bg:#0f172a;
  --grid:#334155;
  --text:#f1f5f9;
  --ink:#f8fafc;
  --muted:#94a3b8;
  --card:rgba(0,0,0,0.2);
  --glass:rgba(255,255,255,0.1);
  --ring:rgba(255,255,255,0.2);
  --white:#ffffff;
  --accent-1:#60a5fa; /* blue */
  --accent-2:#a78bfa; /* purple */
  --accent-3:#f472b6; /* pink */
}

*{box-sizing:border-box}
html, body {
  height: 100%;
  overflow: hidden;              /* disable scroll globally */
  -webkit-overflow-scrolling: none;  /* stop iOS bounce */
  overscroll-behavior: none;     /* prevent rubber-band on Android */
  touch-action: none;            /* optional: stops touch-scroll gestures */
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 50% -10%, rgba(118,168,255,0.05), transparent 60%),
             radial-gradient(1200px 600px at 60% -20%, rgba(178,132,255,0.06), transparent 60%),
             #f6f8ff;
  overflow:hidden;
  transition:background .3s ease, color .3s ease;
}

body[data-theme="dark"]{
  background:radial-gradient(1200px 600px at 50% -10%, rgba(96,165,250,0.08), transparent 60%),
             radial-gradient(1200px 600px at 60% -20%, rgba(167,139,250,0.1), transparent 60%),
             #0f172a !important;
}
body {
  color-scheme: light;
}

body[data-theme="dark"] {
  color-scheme: dark;
}
.background-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  opacity:0.12;
}

.bg-floaters{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
.bg-floaters .emoji{position:absolute; font-size:28px; filter:drop-shadow(0 6px 10px rgba(2,8,23,0.15)); opacity:var(--op,0.4)}
@keyframes drift{
  0%{transform:translate3d(var(--x-start), var(--y), 0) rotate(0deg)}
  100%{transform:translate3d(var(--x-end), var(--y), 0) rotate(var(--rot, 0deg))}
}

.site-header{
  position:fixed; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center;
  z-index:10;
}
.logo{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
  backdrop-filter:saturate(140%) blur(8px);
  color:#0f1a2a; text-decoration:none; font-weight:800; letter-spacing:0.5px;
  box-shadow:0 8px 24px rgba(16,24,40,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
}

.hero{min-height:100svh; display:grid; place-items:center; padding:120px 24px 64px}
.hero-inner{max-width:1100px; width:100%; text-align:center}

.hero-title{position:relative; font-size:clamp(42px, 10.5vw, 125px); line-height:0.9; margin:0 0 28px; font-weight:800; letter-spacing:-0.03em; color:#0f172a; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, system-ui, sans-serif}
body[data-theme="dark"] .hero-title{color:#ffffff}
.hero-title .gradient-shadow{
  position:absolute; left:6%; right:6%; top:-6%; bottom:20%; border-radius:48px; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-1) 65%, transparent) 0%, color-mix(in srgb, var(--accent-2) 75%, transparent) 50%, color-mix(in srgb, var(--accent-3) 70%, transparent) 100%);
  filter:blur(48px) saturate(120%);
  transform:rotate(-2deg);
}

.hero-subtitle{margin:10px 0 10px; color:var(--accent-1); font-weight:400; font-size:clamp(18px, 3vw, 28px); display:flex; align-items:center; justify-content:center; gap:18px}
.hero-subtitle .rule{display:inline-block; width:96px; height:2px; background:linear-gradient(90deg, transparent, var(--accent-1), transparent); border-radius:2px}

.hero-tagline{margin:12px auto 24px; max-width:900px; color:var(--muted); font-size:clamp(16px, 2.6vw, 22px); line-height:1.5}

.skill-pills{list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.skill-pills li{
  padding:12px 18px; border-radius:999px; font-weight:600; color:var(--ink); font-size:16px;
  background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 20px rgba(2,8,23,0.08);
  backdrop-filter: blur(6px) saturate(140%);
  position:relative;
  isolation:isolate;
}

.skill-pills li::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:conic-gradient(from var(--angle, 0deg) at var(--mx, 50%) var(--my, 50%), var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
  padding:2px; /* ring thickness */
  /* Show only the ring using a mask */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; /* Safari */
  mask-composite:exclude; /* Others */
  opacity:0; transition:opacity .25s ease;
}
.skill-pills li:hover::after{opacity:1}

.cta-row{display:flex; gap:16px; justify-content:center; margin:8px 0 28px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 24px; border-radius:20px; text-decoration:none; font-weight:700; color:var(--ink); background:var(--glass); backdrop-filter: blur(8px); box-shadow:0 10px 28px rgba(16,24,40,0.16), inset 0 1px 0 rgba(255,255,255,0.6)}
.btn:hover{transform:translateY(-1px); box-shadow:0 16px 36px rgba(16,24,40,0.18)}
.btn.primary{background:var(--glass); position:relative}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(4px)}

.btn{position:relative; isolation:isolate}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:conic-gradient(from var(--angle, 0deg) at var(--mx, 50%) var(--my, 50%), var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
  padding:2px; /* ring thickness */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease;
}
.btn:hover::after{opacity:1}


.floaters{position:relative; height:120px; display:flex; align-items:center; justify-content:center; gap:22px; margin:16px 0 8px}
.social-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; text-decoration:none; color:#0f172a;
  background:transparent; box-shadow:none; position:relative; filter:drop-shadow(0 6px 10px rgba(2,8,23,0.15)); opacity:0.9; animation:bob 6s ease-in-out infinite; animation-delay:var(--d,0s); transition:color .2s ease, transform .2s ease}
body[data-theme="dark"] .social-btn{color:#ffffff}
.social-btn:hover{transform:translateY(-3px) scale(1.05)}
.social-icon{width:24px; height:24px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Brand hover colors */
.social-btn[aria-label="Facebook"]:hover{color:#1877F2}
.social-btn[aria-label="LinkedIn"]:hover{color:#0A66C2}
.social-btn[aria-label^="GitHub"]:hover{color:#6E40C9}

/* scroll cue removed */

/* sections/footer removed */

/* Modal styles */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute; inset:0; background:rgba(2,8,23,0.4); backdrop-filter: blur(8px)}
.modal-dialog{position:relative; width:min(92vw, 520px); border-radius:24px; background:rgba(255,255,255,0.7); backdrop-filter: blur(12px) saturate(140%); box-shadow:0 40px 100px rgba(2,8,23,0.3), inset 0 1px 0 rgba(255,255,255,0.8); padding:28px; border:1px solid rgba(255,255,255,0.2)}
.modal-close{position:absolute; top:16px; right:16px; border:0; background:rgba(255,255,255,0.6); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; color:#0f172a; transition:all .2s ease; z-index:1}
.modal-close:hover{background:rgba(255,255,255,0.8); transform:scale(1.05)}
.modal-header{margin-bottom:20px; text-align:center}
.modal h3{position:relative; margin:0 0 8px; font-size:24px; font-weight:700; color:#0f172a}
.modal h3 .title-gradient-shadow{
  position:absolute; left:0; right:0; top:-4px; bottom:-6px; border-radius:12px; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-1) 45%, transparent) 0%, color-mix(in srgb, var(--accent-2) 55%, transparent) 50%, color-mix(in srgb, var(--accent-3) 50%, transparent) 100%);
  filter:blur(20px) saturate(120%);
}
.location-info{display:flex; align-items:center; justify-content:center; gap:8px; color:#475569; font-size:14px; font-weight:500}
.location-icon{width:16px; height:16px; color:currentColor}
.location-time{font-family:monospace; background:rgba(255,255,255,0.5); padding:2px 8px; border-radius:8px; font-size:12px}
.field{display:grid; gap:8px; margin:16px 0}
.field label{font-weight:600; color:#0f172a; font-size:14px}
.field input,.field textarea{border:0; border-radius:16px; padding:14px 16px; background:rgba(255,255,255,0.8); backdrop-filter: blur(4px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(2,8,23,0.08); color:#0f172a; font-size:15px; transition:all .2s ease}
.field input:focus,.field textarea:focus{outline:none; background:rgba(255,255,255,0.9); box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 3px rgba(118,168,255,0.2)}
.field textarea{resize:vertical; min-height:100px}
.actions{display:flex; justify-content:flex-end; margin-top:20px}
.actions .btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 20px; border-radius:16px; text-decoration:none; font-weight:700; color:#0f172a; background:rgba(255,255,255,0.65); backdrop-filter: blur(8px); box-shadow:0 8px 24px rgba(16,24,40,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  position:relative; isolation:isolate; border:none; cursor:pointer; font-size:15px
}
.actions .btn:hover{transform:translateY(-1px); box-shadow:0 16px 36px rgba(16,24,40,0.18)}
.actions .btn.primary{background:#ffffff}
.actions .btn::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:conic-gradient(from var(--angle, 0deg) at 50% 50%, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .2s ease}
.actions .btn:hover::after{opacity:1}

/* Resume modal styles */
.resume-dialog{width:min(95vw, 800px); max-height:90vh; overflow:hidden; padding:0}
.resume-dialog .modal-close{top:8px; right:8px; background:rgba(0,0,0,0.7); color:#ffffff; backdrop-filter: blur(8px)}
.resume-dialog .modal-close:hover{background:rgba(0,0,0,0.9); transform:scale(1.05)}
.pdf-container{position:relative; border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.9); backdrop-filter: blur(4px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(2,8,23,0.08); margin:0; display:flex; flex-direction:column}
.pdf-viewer{display:flex; flex-direction:column; height:600px}
.pdf-toolbar{display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,0.3); border-radius:16px 16px 0 0}
.pdf-btn{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:8px; background:rgba(255,255,255,0.8); backdrop-filter: blur(4px); color:#0f172a; font-weight:600; cursor:pointer; transition:all .2s ease; text-decoration:none; font-size:14px}
.pdf-btn:hover:not(:disabled){background:rgba(255,255,255,1); transform:translateY(-1px); box-shadow:0 4px 12px rgba(2,8,23,0.15)}
.pdf-btn:disabled{opacity:0.4; cursor:not-allowed}
.page-info, .zoom-info{font-size:14px; font-weight:600; color:#0f172a; min-width:60px; text-align:center}
.pdf-content{flex:1; overflow:auto; background:#f8fafc; position:relative}
.pdf-loading{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#475569}
.loading-spinner{width:32px; height:32px; border:3px solid rgba(118,168,255,0.3); border-top:3px solid var(--accent-1); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Theme toggle */
.theme-toggle{position:fixed; top:20px; right:20px; z-index:50; width:44px; height:44px; border:0; border-radius:50%; background:var(--glass); backdrop-filter: blur(8px); box-shadow:0 8px 24px rgba(16,24,40,0.15), inset 0 1px 0 rgba(255,255,255,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s ease}
.theme-toggle:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(16,24,40,0.2)}
.theme-icon{font-size:20px; transition:transform .3s ease}
.theme-toggle:hover .theme-icon{transform:rotate(180deg)}

/* Notification styles */
.notification{position:fixed; top:20px; right:20px; z-index:100; transform:translateX(100%); transition:transform .3s ease; opacity:0; visibility:hidden}
.notification[aria-hidden="false"]{transform:translateX(0); opacity:1; visibility:visible}
.notification-content{display:flex; align-items:center; gap:12px; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,0.8); backdrop-filter: blur(12px) saturate(140%); box-shadow:0 20px 40px rgba(2,8,23,0.2), inset 0 1px 0 rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.3); min-width:320px}
.notification-icon{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #10b981, #059669); color:#ffffff; font-weight:700; font-size:16px}
.notification.error .notification-icon{background:linear-gradient(135deg, #ef4444, #dc2626)}
.notification-text{flex:1}
.notification-text h4{margin:0 0 4px; font-size:16px; font-weight:700; color:#0f172a}
.notification-text p{margin:0; font-size:14px; color:#475569}
.notification-close{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:50%; background:rgba(255,255,255,0.6); color:#0f172a; cursor:pointer; font-size:14px; transition:all .2s ease}
.notification-close:hover{background:rgba(255,255,255,0.8); transform:scale(1.1)}



@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes captcha-ring-spin {
  to { --ring-angle: 360deg; }
}
/* Center row */
.captcha-row{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:12px 0 16px;
}

/* Rounded wrapper that holds the ring (no lift, no background) */
.captcha-wrap{
  position:relative; display:inline-block;
  border-radius:16px; overflow:hidden; isolation:isolate;
}



/* Animated gradient ring (CSS-only chase) */
.captcha-wrap::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; /* ring thickness */
  --ring-angle: 0deg;
  background: conic-gradient(
    from var(--ring-angle) at 50% 50%,
    var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1)
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}

.captcha-wrap:hover::after{
  opacity:1;
  animation: captcha-ring-spin 1.2s linear infinite; /* feel free to tweak speed */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .captcha-wrap:hover::after{ animation: none; }
}


/* Turnstile host element: transparent and block-level so no gray strip */
.captcha-wrap .cf-turnstile{
  display:block; line-height:0; margin:0; background:transparent !important;
}

/* Kill baseline gap and clip the iframe cleanly */
.captcha-wrap .cf-turnstile iframe{
  display:block; vertical-align:top; border-radius:inherit;
  background:transparent !important;
}


@media (max-width:600px){
  .hero{padding-top:96px}
  .notification{right:16px; left:16px}
  .notification-content{min-width:auto}
}
@media (max-width:420px){
  .captcha-row { transform: scale(0.95); transform-origin:center; }
}