/* Modern dark portfolio styles with blue/red design system, glassmorphism, and responsive layout */
:root{
  /* Neutral backgrounds and text */
  --bg: #2E2E2E; /* deep black */
  --surface: rgb(237, 0, 0);
  --muted: #F4F4F4; /* neutral gray for muted text */
  --fg: #dfe5ec;

 /* Brand colors - single shades only */
 --brand-blue: #0ea3e7; /* primary brand blue */
 --brand-red: #9c1313;  /* primary brand red */

 /* Map legacy tokens to single-brand shades for compatibility */
 --blue-900: var(--brand-blue);
 --blue-700: var(--brand-blue);
 --blue-500: var(--brand-blue);
 --blue-300: var(--brand-blue);

 --red-700: var(--brand-red);
 --red-600: var(--brand-red);
 --red-500: var(--brand-red);
 --red-300: var(--brand-red);

 /* Primary accents (kept for compatibility) */
 --accent-a: var(--brand-blue);
 --accent-b: var(--brand-red);

 --glass: rgba(255,255,255,0.03);
 --glass-strong: rgba(255,255,255,0.06);
 --card: rgba(255,255,255,0.03);
 --max-width: 1200px;
 color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.container{width:calc(100% - 48px);max-width:var(--max-width);margin:0 auto}

/* Top scroll progress */
#scroll-progress{position:fixed;left:0;right:0;top:0;height:6px;z-index:9999;background:transparent}
#scroll-progress .progress-bar{height:25%;width:0;background:var(--brand-blue);box-shadow:0 6px 18px rgba(0,0,0,0.25);border-radius:0 0 8px 8px}

/* Background canvas */
.bg-canvas{display:none !important}
.morph-svg{display:none !important}

/* Skip link */
.skip-link{position:absolute;left:12px;top:12px;background:#0f1724;color:#fff;padding:8px 12px;border-radius:6px;z-index:999;transform:translateY(-120%);transition:transform .25s ease}
.skip-link:focus{transform:none}

/* Header */
.site-header{position:sticky;top:12px;z-index:60;transition:backdrop-filter .28s, padding .28s, transform .28s}
.site-header.scrolled{backdrop-filter: blur(8px);transform:translateY(-2px);padding:6px 0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0;position:relative;z-index:70}
.brand{font-weight:900;color:var(--blue-500);text-decoration:none;font-size:1.05rem;letter-spacing:0.2px;display:flex;align-items:center;gap:10px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--brand-blue);color:#fff;font-size:0.95rem;box-shadow:0 6px 18px rgba(0,0,0,0.35);transform:scale(0.98);opacity:0.95;transition:transform .18s ease, opacity .18s ease}
.brand-name{font-weight:800}
.accessibility-toggle{border:1px solid rgba(255,255,255,0.08);color:var(--muted);background:rgba(255,255,255,0.03);transition:background .22s, color .22s, transform .22s;white-space:nowrap;margin-right:10px}
.accessibility-toggle:hover{color:var(--fg);background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.nav-menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--muted);text-decoration:none;padding:8px;border-radius:10px;transition:transform .18s, color .18s;display:inline-block;position:relative}
.nav-menu a:focus{outline:2px solid rgba(255,255,255,0.04);outline-offset:3px}
.nav-menu a:hover{color:var(--fg);transform:translateY(-3px)}
.nav-menu a::after{content:'';position:absolute;left:50%;bottom:-6px;width:0;height:3px;background:var(--brand-blue);border-radius:3px;transition:width .32s ease,left .32s ease}
.nav-menu a:hover::after{left:12%;width:76%}
.nav-menu a.active{color:var(--fg);font-weight:700}
.nav-menu a.active::after{left:8%;width:84%;height:4px;opacity:1}
.nav-toggle{display:none;background:transparent;border:0;color:inherit}
.hamburger{display:block;width:22px;height:2px;background:var(--brand-blue);position:relative}
.hamburger:after,.hamburger:before{content:"";position:absolute;left:0;width:22px;height:2px;background:inherit}
.hamburger:before{top:-6px}
.hamburger:after{top:6px}

/* Hero */
.hero{padding:72px 0 96px;position:relative;overflow:hidden}
.animated-bg{display:none !important}
.blob{display:none !important}

.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;position:relative;z-index:10}
.hero-title{font-size:3rem;margin:0 0 6px;color:var(--fg);letter-spacing:-0.6px;line-height:1.02;position:relative;z-index:12}
/* gradient text with animated sweep */
.hero-title{background:none;color:var(--fg)}
.hero-title::after{content:'';display:block;height:6px;position:absolute;left:0;right:0;bottom:-6px;pointer-events:none;background:transparent;filter:none;opacity:0}
.hero-subtitle{color:var(--blue-300);font-weight:700;margin:0 0 18px;min-height:1.2em}
.hero-desc{color:var(--muted);max-width:60ch}
.hero-cta{margin-top:18px;display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:700;cursor:pointer;position:relative;overflow:hidden}
.btn:focus{outline:3px solid rgba(37,99,235,0.18);outline-offset:3px}
.btn-primary{background:var(--brand-blue);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.32);transform:translateZ(0);border:none}
.btn-primary::before{display:none}
.btn-ghost{border:1px solid rgba(255,255,255,0.04);color:var(--fg);background:transparent}
.btn-outline{border:1px solid rgba(255,255,255,0.04);padding:10px 14px;border-radius:10px;color:var(--muted);background:transparent}
.btn-sm{padding:8px 10px;font-size:0.9rem}
.icon-btn{display:inline-block;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--fg);text-decoration:none}

/* Magnetic CTA subtle center point */
.btn.magnetic{transition:transform .25s cubic-bezier(.2,.9,.2,1)}

.btn .ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,0.14);transform:scale(0);opacity:0.9;pointer-events:none}

.hero-card{background:var(--card);border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,0.03)}
.profile-portrait{width:170px;height:170px;border-radius:18px;overflow:hidden;margin:0 auto 12px;border:1px solid rgba(255,255,255,0.04);background:var(--card);display:flex;align-items:center;justify-content:center;position:relative}
.profile-portrait::after{content:'';display:none}
.profile-portrait:hover::after{opacity:0.28}
.profile-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.profile-info h3{margin:0 0 6px}
.profile-actions{display:flex;gap:8px;margin-top:10px}
.hero-stats{display:flex;gap:18px;margin-top:18px;color:var(--muted)}
.stat strong{display:block;font-size:1.1rem;color:var(--fg)}

/* Project card focus */
.project-card:focus{outline:3px solid rgba(37,99,235,0.12);outline-offset:8px}


/* Sections */
.section{padding:72px 0}
.dark-section{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.section h2{font-size:1.6rem;margin:0 0 8px}
.section-lead{color:var(--muted);margin:6px 0 20px}

.eyebrow{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(37,99,235,0.12);color:var(--brand-blue);font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px}
.why-section .section-head{max-width:640px;margin-bottom:30px}
.why-grid{display:grid;grid-template-columns:minmax(280px,440px) minmax(320px,1fr);gap:24px;align-items:start}
.why-cards{display:grid;gap:14px}
.why-card{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 18px 16px;border-radius:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);text-align:left;color:var(--fg);transition:transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;cursor:pointer}
.why-card:hover, .why-card.active{transform:translateX(4px);border-color:rgba(37,99,235,0.3);background:rgba(37,99,235,0.06);box-shadow:0 12px 28px rgba(0,0,0,0.18)}
.why-card:focus{outline:2px solid rgba(37,99,235,0.22);outline-offset:4px}
.why-card h3{margin:0 0 6px;font-size:1rem}
.why-card p{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.5}
.why-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:var(--brand-blue);color:#fff;font-size:0.95rem;flex-shrink:0;box-shadow:0 6px 18px rgba(0,0,0,0.36)}
.why-panel{display:flex;flex-direction:column;gap:18px;background:var(--card);padding:24px;border-radius:18px;position:relative;overflow:hidden}
.why-panel::before, .why-panel::after { content: none; display: none; }
.why-panel-header{position:relative;z-index:1}
.why-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.08);color:var(--blue-300);font-size:0.80rem;letter-spacing:0.06em;text-transform:uppercase}
.why-detail-title{margin:10px 0 0;font-size:1.6rem}
.why-panel-copy{margin:0;color:var(--muted);line-height:1.8}
.impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.impact-metric{padding:16px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05)}
.metric-value{display:block;font-size:1.3rem;font-weight:800;color:var(--fg);margin-bottom:6px}
.metric-label{color:var(--muted);font-size:0.9rem}
.tech-network{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;position:relative;z-index:1}
.network-node{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:999px;background:rgba(255,255,255,0.05);color:var(--fg);font-size:0.85rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05)}

/* Cursor - prefer the native browser cursor for clarity and accessibility */
html, body { cursor: auto; }

/* Motion off state */
body.motion-off .brand-mark, body.motion-off .hero-title, body.motion-off .why-card, body.motion-off .project-card, body.motion-off .service-card, body.motion-off .modal-panel {transition:none !important;animation:none !important;opacity:0 !important;visibility:hidden !important}
.body.motion-off .btn-primary::before{display:none}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transform-origin:center center}
.skill-card h3, .tech-card h3{margin-top:0}
.skills{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.skill{display:flex;flex-direction:column;gap:6px}
.skill-bar{height:12px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden}
.skill-bar span{display:block;height:100%;width:0;background:var(--brand-blue);transition:width 1200ms cubic-bezier(.2,.9,.2,1)}
.tech-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tech{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:0.9rem;color:var(--muted)}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:20px}
.project-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:var(--card);transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s}
.project-card:hover{transform:translateY(-6px);box-shadow:0 10px 28px rgba(0,0,0,0.45)}
.project-media{height:160px;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center}
.media-placeholder{color:var(--muted)}
.project-body{padding:14px}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.project-tags span{font-size:0.8rem;background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:8px;color:var(--muted)}
.project-actions{display:flex;gap:8px;margin-top:12px}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.timeline-item{display:flex;gap:16px}
.timeline-date{min-width:120px;color:var(--muted)}
.timeline-body{background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px}
.service-card{padding:18px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,0.02);transition:transform .3s, box-shadow .3s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.contact-card{padding:20px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,0.03)}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form input,.contact-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:var(--fg);transition:box-shadow .18s, transform .12s}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 6px 20px rgba(37,99,235,0.06);transform:translateY(-2px)}
.contact-form label{font-size:0.9rem;color:var(--muted)}
.form-note{font-size:0.85rem;color:var(--muted);margin-top:8px}
.form-status{font-size:0.95rem;line-height:1.6;margin-top:8px;color:#cbd5e1}
.form-status.success{color:#7dd3fc}
.form-status.error{color:#fca5a5}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,0.02);padding:8px 10px;border-radius:8px;background:rgba(37,99,235,0.02)}

/* Footer */
.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:28px}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
.footer-links a{color:var(--muted);text-decoration:none;margin-left:12px}

/* Reveal states & animations */
.revealed{opacity:1;transform:none}
.card, .service-card, .project-card, .timeline-item, .profile-info{opacity:0;transform:translateY(16px) scale(.995);transition:opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1)}

/* Ripple */
.ripple{position:absolute;border-radius:999px;transform:scale(0);opacity:0.9;pointer-events:none}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr 340px}
  .section-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-menu{display:none;position:absolute;right:12px;top:70px;background:rgba(11,15,23,0.96);padding:12px;border-radius:10px;flex-direction:column}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-card{order:2;margin-top:18px}
  .profile-portrait{width:120px;height:120px}
  .bg-canvas{display:none}
}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none;opacity:0;transition:opacity .28s ease}
.modal[aria-hidden="false"]{pointer-events:auto;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.75));backdrop-filter: blur(6px)}
.modal-panel{position:relative;z-index:10;max-width:1000px;width:calc(100% - 60px);background:var(--card);border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 20px 60px rgba(0,0,0,0.65);transform:translateY(16px) scale(.98);transition:transform .36s cubic-bezier(.2,.9,.2,1), opacity .36s}
.modal[aria-hidden="false"] .modal-panel{transform:none;opacity:1}
.modal .modal-content{display:flex;gap:18px;align-items:stretch}
.modal-media{flex:0 0 380px;background:rgba(255,255,255,0.02);border-radius:12px;min-height:240px;display:flex;align-items:center;justify-content:center}
.modal-body{flex:1;min-width:220px}
.modal-title{margin-top:0}
.modal-close{position:absolute;right:14px;top:14px}

/* Scroll to top */
.scroll-top{position:fixed;right:18px;bottom:18px;background:var(--brand-blue);color:#fff;border:0;padding:10px 12px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.5);z-index:999;cursor:pointer;display:none}
.scroll-top.show{display:block}

/* Project card tilt & image zoom */
.project-card{perspective:1200px}
.project-card .project-media{transition:transform .45s cubic-bezier(.2,.9,.2,1);will-change:transform}
.project-card .project-media img{transition:transform .7s cubic-bezier(.2,.9,.2,1);will-change:transform}

/* Skeleton loading (for modal media) */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));height:100%;border-radius:8px;animation: shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}

/* Small interactions */
[hidden]{display:none !important}

/* Progressively reduce or disable motion */
@media (prefers-reduced-motion:reduce){
  .blob, .project-card, .skill-bar span, .card, .service-card{transition:none !important;animation:none !important}
  #bg-canvas{display:none}
}

/* Utility: subtle floating animation for blobs */
@keyframes floaty{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
.blob.floating{animation:floaty 8s ease-in-out infinite}

/* Small accessibility helpers */
.skip-link{left:12px}