:root{
  --grad1:#060012;
  --grad2:#2a003f;
  --nav-accent: #b78fff;
}
html,body{height:100%;}
/* Hide browser scrollbar but keep scrolling functionality */
html{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
html::-webkit-scrollbar{display:none}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;background:linear-gradient(180deg,var(--grad1),var(--grad2));background-attachment:fixed;background-size:cover;color:#fff}
.navbar-gradient{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important; border: 1px solid rgba(183,143,255,0.06); backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 12px 36px rgba(3,0,20,0.45);}
.navbar-brand{display:inline-flex;align-items:center;gap:12px}
.brand-logo{width:56px;height:56px;border-radius:10px;object-fit:cover;display:inline-block;box-shadow:0 8px 20px rgba(11,6,25,0.45);background:transparent}
.brand-logo img{ width:100%; height:100%; border-radius:10px; object-fit:cover; display:block }
.footer-logo{ width:80px; height:80px; border-radius:12px; object-fit:cover; display:block }
.brand-text{font-size:1.15rem;font-weight:800}
.navbar .brand-text{color:#fff;font-weight:700;letter-spacing:0.2px;display:inline-block;padding:.12rem .45rem;border-radius:.45rem;position:relative}
.navbar .brand-text::before{content:'';position:absolute;inset:0;border-radius:.45rem;z-index:-1;background:linear-gradient(90deg, rgba(183,143,255,0.16), rgba(120,60,255,0.08));box-shadow:0 8px 28px rgba(120,60,255,0.08)}
.navbar .nav-link{position:relative;color: rgba(255,255,255,0.88);transition:color .18s ease,transform .18s ease;padding:.5rem .9rem}

.navbar .nav-link::after{content:"";position:absolute;left:50%;transform:translateX(-50%) scaleX(0);bottom:8px;height:3px;width:56%;background:var(--nav-accent);border-radius:2px;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .18s;opacity:0;transform-origin:center}
.navbar .nav-link:hover{color:#fff;transform:translateY(-2px)}
.about-section .about-grid{
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 1.25rem;
  align-items: stretch; /* allow left column to match main column height */
}
.about-photo{
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.about-body h2{ margin-top: 0; }
.about-stats .stat{ text-align: center; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03); border-radius:8px; }
.stat-num{ font-weight:700; font-size:1.1rem; }
.stat-label{ font-size:0.85rem; color:var(--muted, #cfcfe6); }
.about-stats .stat-num, .about-stats .stat-label{ color: #ffffff !important; }
.about-list{ padding-left:1.1rem; margin-top:0.5rem; }
.about-timeline{ background: rgba(255,255,255,0.02); padding:1rem; border-radius:8px; }
.about-timeline ol{ margin:0; padding-left:1rem; }

@media (max-width: 900px){
  .about-section .about-grid{ grid-template-columns: 1fr; }
  .about-timeline{ order: 3; }
  .about-section .about-grid{ overflow: hidden; max-width: 100%; }
  .about-media .about-photo{ width: 100%; max-width: 100%; }
  .about-body{ overflow-wrap: break-word; word-wrap: break-word; }
}
/* About card visual refinements */
.about-section .about-grid.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(183,143,255,0.06);
  padding: 1.25rem;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 20px 60px rgba(3,0,20,0.6);
}
.about-section { color: #ffffff; }
.about-media{display:block}
.about-photo{border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,0.45)}

/* left-column image sizing and slight downward offset */
.about-media{ display:flex; align-items:center; justify-content:center; }
.about-media .about-photo{ width:260px; max-width:100%; display:block; margin:0; }

/* remove any border around the about photo */
.about-media .about-photo{ border: none !important; }
.about-stats .stat{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* Accent headings and CTA styling to match site theme */
.about-body h2{ color: #fff; font-size:1.6rem; letter-spacing:0.2px }
.about-body h4{ color: #f6f3ff }
.about-body .lead{ color: rgba(255,255,255,0.9) }
.about-list li{ margin-bottom:0.35rem; color: rgba(255,255,255,0.85) }

.about-section .btn-primary{
  background: linear-gradient(90deg, rgba(183,143,255,1), rgba(120,60,255,1));
  border: none;
  box-shadow: 0 10px 30px rgba(99,49,191,0.22);
}
.about-section .btn-outline-light{ color: #fff; border-color: rgba(255,255,255,0.12); }

/* Icon buttons in About */
.btn-icon svg{ width:18px; height:18px; margin-right:8px; vertical-align:middle; fill:currentColor; }
.btn-icon img.btn-icon-img{ width:18px; height:18px; margin-right:8px; object-fit:contain; display:inline-block; vertical-align:middle }
.btn-icon span{ vertical-align:middle; }
.btn-icon{ display:inline-flex; align-items:center }

/* colored icon buttons */
.btn-icon.linkedin{ color:#0A66C2 }
.btn-icon.fiverr{ color:#1DBF73 }
/* WhatsApp brand green for About button */
.btn-icon.whatsapp{ color:#25D366 }

/* Ensure About CTA buttons wrap on narrow screens to prevent overflow */
.about-body .d-flex.gap-2{ display:flex; flex-wrap:wrap; gap:.5rem; }
.about-body .d-flex.gap-2 .btn{ min-width:0; margin-bottom:.4rem; }
.about-body .btn-icon span{ white-space:nowrap; }

/* subtle entrance animation */
.about-section .about-grid{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.about-section.is-visible .about-grid{opacity:1;transform:none}

/* centered photo size and wrap */
.about-photo-centered{ width:340px; max-width:90%; height:auto; display:block; margin:1rem auto 0; border-radius:14px }
.about-photo-wrap{ padding:0.5rem 0 0 }

/* Safety: ensure About section is visible by default (prevents accidental hiding) */
.about-section .about-grid{opacity:1!important;transform:none!important}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:translateX(-50%) scaleX(1);opacity:1}
.navbar .nav-link.active{color:#fff;font-weight:700}

/* Stronger pill highlight and glow for active item */
.navbar .nav-link.active, .navbar .nav-link:hover{
  background: linear-gradient(90deg, rgba(183,143,255,0.16), rgba(183,143,255,0.08));
  border-radius: .6rem;
  padding: .46rem 1rem;
  box-shadow: 0 8px 28px rgba(167,112,255,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Slightly stronger accent glow behind navbar (subtle) */
.navbar-gradient::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 20px 80px rgba(58,0,90,0.35) inset;
  border-radius: 0.25rem;
}

/* Mobile menu smooth entrance: animate collapse opacity/height and stagger links */
.navbar-collapse.collapsing{
  transition: height .38s ease, opacity .28s ease !important;
  opacity: 0;
  overflow: hidden;
}
.navbar-collapse{
  transition: opacity .28s ease;
}
.navbar-collapse.show{
  opacity: 1;
}

/* ensure the collapse sits above the hero while opening (z-index) */
.navbar-collapse{ z-index: 1300 }

/* mobile / collapsed menu: add gentle background on touch and rounded pill focus */
@media (max-width: 991px){
  .navbar .nav-link{border-radius:.45rem;margin:.15rem 0;padding:.5rem 1rem}
  .navbar .nav-link:hover, .navbar .nav-link:focus{background:rgba(255,255,255,0.04);transform:none}
  /* collapse show/entrance animations only for mobile */
  .navbar-collapse .nav-link{
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
  }
  .navbar-collapse.show .nav-link{
    transform: translateY(0);
    opacity: 1;
  }
  /* small stagger for a polished entrance */
  .navbar-collapse.show .nav-item:nth-child(1) .nav-link{ transition-delay: .02s }
  .navbar-collapse.show .nav-item:nth-child(2) .nav-link{ transition-delay: .06s }
  .navbar-collapse.show .nav-item:nth-child(3) .nav-link{ transition-delay: .10s }
  .navbar-collapse.show .nav-item:nth-child(4) .nav-link{ transition-delay: .14s }

  /* Give the opened mobile menu its own opaque background so underlying content (and any thin lines) are hidden */
  .navbar-collapse{
    background: linear-gradient(180deg, rgba(4,0,10,0.96), rgba(42,0,63,0.96));
    padding: .8rem 1rem;
    border-radius: 0 0 .6rem .6rem;
  }
}

/* keyboard focus visible */
.navbar .nav-link:focus-visible{outline:2px solid rgba(217,179,255,0.25);outline-offset:3px}
.hero{min-height:88vh;padding-top:6.5rem;position:relative;overflow:hidden}
/* Scroll snap styles only when enabled */
html.snap-enabled{scroll-snap-type:y mandatory}
html.snap-enabled .hero{height:100vh;min-height:100vh;scroll-snap-align:start}
html.snap-enabled main section{scroll-snap-align:start;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
html.snap-enabled .site-footer.footer-fullscreen{scroll-snap-align:start;min-height:100vh}
html.snap-enabled .site-footer.footer-fullscreen .footer-panel{min-height:100vh}
/* Force disable snap when modal is open */
body.modal-open-no-snap html,
html:has(body.modal-open-no-snap){scroll-snap-type:none!important}
.neural-canvas{position:fixed;inset:0;z-index:0;pointer-events:auto}

/* Ensure site content sits above the neural canvas (but below the navbar) */
.site-front{position:relative;z-index:2}

/* Keep navbar above everything */
.navbar{z-index:1200;padding-top:0.14rem;padding-bottom:0.14rem}
/* Overlay header for navbar-less layout */
.site-overlay{position:fixed;left:0;right:0;top:12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none;z-index:1400;padding:0 18px}
.overlay-left{pointer-events:auto;text-align:left}
.overlay-center{pointer-events:auto;justify-self:center}
.overlay-right{pointer-events:auto;text-align:right}
.overlay-logo{width:72px;height:72px;border-radius:12px;object-fit:cover;box-shadow:0 10px 28px rgba(11,6,25,0.5)}
.overlay-title{font-weight:800;font-size:1.05rem;color:#fff;padding:.18rem .6rem;border-radius:.4rem;background:linear-gradient(90deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06));border:1px solid rgba(183,143,255,0.06);display:inline-block}
.overlay-admin{pointer-events:auto;display:inline-block}

@media(max-width:576px){
  .site-overlay{top:8px;padding:0 10px}
  .overlay-logo{width:56px;height:56px}
  .overlay-title{font-size:0.95rem;padding:.12rem .5rem}
}

/* Hidden state for overlay to avoid overlapping content */
.site-overlay.overlay-hidden{opacity:0;transform:translateY(-8px);pointer-events:none}
.site-overlay{transition:opacity 220ms ease, transform 220ms ease}
.hero-decor{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 20%, rgba(183,143,255,0.06) 0%, transparent 12%),radial-gradient(ellipse at 90% 80%, rgba(120,60,200,0.06) 0%, transparent 14%);pointer-events:none;z-index:1}
.hero-decor{z-index:0}
.hero-title{font-size:2.4rem;text-shadow:0 6px 24px rgba(0,0,0,0.45)}
.hero-sub{color:rgba(255,255,255,0.85);max-width:780px;margin:0 auto}
/* ensure hero content sits above orbs */
.hero > .container{position:relative;z-index:2}

/* Make page sections transparent so the body gradient shows through continuously */
main, .container, footer, section{background:transparent}
/* Cards remain white by design; keep their background but allow surrounding areas to show gradient */

/* Skills two-column layout and bubble placeholders */
.skill-column{padding:1.4rem;border-radius:.8rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(6,0,20,0.45);position:relative;min-height:220px;display:flex;flex-direction:column;height:100%}
.skill-column h4{margin:0 0 .6rem;font-size:1.25rem;font-weight:700;text-align:center}
.skill-column p{margin:0;color:#fff}
.skill-column p.text-muted{color:#fff}
/* Ensure any .text-muted inside skill columns is white even with Bootstrap defaults */
.skill-column .text-muted{color:#fff !important}
.skill-column h4::after{content:'';display:block;width:56px;height:6px;border-radius:6px;margin:.6rem auto 0;background:linear-gradient(90deg,#6f2bd6,#b300ff)}

/* Center the main Skills heading */
section#skills{text-align:center}
section#skills h3.mb-3{
  display:inline-block;
  margin:0 0 1rem;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#fff;
  padding:.5rem 1rem;
  border-radius:.6rem;
  background:linear-gradient(90deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06));
  box-shadow:0 8px 28px rgba(120,60,255,0.08);
  border:1px solid rgba(183,143,255,0.08);
}

/* Match Projects heading to Skills heading style and alignment */
section#projects{text-align:center}
section#projects h3.mb-3{
  display:inline-block;
  margin:0 0 1rem;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#fff;
  padding:.5rem 1rem;
  border-radius:.6rem;
  background:linear-gradient(90deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06));
  box-shadow:0 8px 28px rgba(120,60,255,0.08);
  border:1px solid rgba(183,143,255,0.08);
}

/* Match About heading to Skills/Projects style */
section#about{text-align:center}
section#about h3.mb-3{
  display:inline-block;
  margin:0 0 1rem;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#fff;
  padding:.5rem 1rem;
  border-radius:.6rem;
  background:linear-gradient(90deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06));
  box-shadow:0 8px 28px rgba(120,60,255,0.08);
  border:1px solid rgba(183,143,255,0.08);
}
/* Ensure About content (body and lists) is left-aligned even when section heading is centered */
section#about .about-body,
section#about .about-body .lead,
section#about .about-list{
  text-align:left;
}
section#about .about-list{padding-left:1.05rem;margin:0}

/* Match Contact heading to Skills/Projects/About style */
section#contact{text-align:center}
section#contact h3.mb-3{
  display:inline-block;
  margin:0 0 1rem;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#fff;
  padding:.5rem 1rem;
  border-radius:.6rem;
  background:linear-gradient(90deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06));
  box-shadow:0 8px 28px rgba(120,60,255,0.08);
  border:1px solid rgba(183,143,255,0.08);
}
/* Keep the Contact heading centered but left-align the card content inside the section */
section#contact .card, section#contact .themed-card{
  text-align: left;
}

.skill-bubbles{display:flex;flex-wrap:wrap;gap:12px;margin-top:1rem;align-items:center}
.skill-bubble{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:inset 0 4px 10px rgba(255,255,255,0.02),0 12px 30px rgba(0,0,0,0.45);transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden}
.skill-bubble img{
  /* Match Web Development logo sizing — larger so logos fill the bubble consistently */
  width:72%;
  height:72%;
  max-width:72%;
  max-height:72%;
  object-fit:contain;
  display:block;
  filter:none;
  padding:0;
  margin:0;
}
.skill-bubble::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 22%, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 25%, transparent 60%)}
.skill-bubble:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 22px 60px rgba(120,60,255,0.12)}
/* Allow custom-sized bubbles in project modals (override default 72px) */
.project-stack .skill-bubble{width:auto !important;height:auto !important}
.project-stack .skill-bubble img{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;display:block !important;opacity:1 !important;visibility:visible !important}

/* Grid of labeled skill tiles */
.skill-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:1rem;justify-content:flex-start}
.skill-item{width:92px;display:flex;flex-direction:column;align-items:center;text-align:center}
.skill-item .skill-bubble{width:72px;height:72px;border-radius:50%}
.skill-label{margin-top:8px;font-size:.9rem;color:#fff;font-weight:700;letter-spacing:0.2px}

/* Subtle idle pulse for bubbles and entrance reveal */
.skill-item{opacity:0;transform:translateY(10px);transition:opacity .48s cubic-bezier(.2,.9,.3,1),transform .48s cubic-bezier(.2,.9,.3,1)}
.skill-item .skill-bubble{transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s cubic-bezier(.2,.9,.3,1);animation:idlePulse 3.6s ease-in-out infinite;animation-delay:var(--delay,0s)}
.skill-item.is-visible{opacity:1;transform:translateY(0)}
.skill-item.is-visible .skill-bubble{box-shadow:0 28px 70px rgba(120,60,255,0.14);transform:translateY(-4px) scale(1.02)}

@keyframes idlePulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

/* small glow on hover to draw attention */
.skill-item .skill-bubble:hover{transform:translateY(-8px) scale(1.08);box-shadow:0 40px 100px rgba(120,60,255,0.18)}
.skill-item:hover{transform:translateY(-4px) scale(1.01)}

/* make labels slightly pop when visible */
.skill-item .skill-label{opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}
.skill-item.is-visible .skill-label{opacity:1;transform:translateY(0)}

/* Slight column accent for web column */
.skill-column.web{border-left:4px solid rgba(183,143,255,0.18)}

/* Hero layout - text left, LCD right */
.hero-content-row{display:flex;align-items:center;justify-content:space-between;gap:3rem;max-width:1100px;margin:0 auto}
.hero-text-col{flex:1;text-align:left;max-width:480px;position:relative;padding:1.4rem;border-radius:0.8rem;background:rgba(255,255,255,0.03);backdrop-filter:blur(8px) saturate(120%);box-shadow:0 10px 36px rgba(6,0,20,0.55);}
.hero-text-col .hero-title{text-align:left}
.hero-text-col .hero-sub{text-align:left;margin:0}
.hero-lcd-col{flex:0 0 auto}

/* ensure navbar stays above everything */
.navbar{z-index:1200;padding-top:0.14rem;padding-bottom:0.14rem}

/* decorative orbs - above neural network and decor */
.decor-orbs{position:absolute;inset:0;z-index:2;pointer-events:none}

/* orb bubble containers (fixed positions) */
.orb{position:absolute;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:auto;transition:transform .28s ease}
.orb{background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));box-shadow: inset 0 6px 18px rgba(255,255,255,0.02), 0 18px 40px rgba(0,0,0,0.5)}
.orb-inner{position:relative;width:68%;height:68%;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden}
.orb img{width:62%;height:62%;object-fit:contain;display:block;border-radius:8px}
/* bubble pulse animation */
.orb{--pulse-dur:4s;--pulse-scale:1.03;--pulse-delay:0s;animation: bubblePulse var(--pulse-dur) ease-in-out infinite;animation-delay:var(--pulse-delay)}
@keyframes bubblePulse{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-4px) scale(var(--pulse-scale))}
  55%{transform:translateY(-3px) scale(calc(var(--pulse-scale) - 0.01))}
  100%{transform:translateY(0) scale(1)}
}

/* hover state uses a stronger transform - toggled via JS */
.orb.is-hover{transform:translateY(-8px) scale(1.06);transition:transform .18s ease}
/* keep initial placement classes for starting positions only */
.orb-html{left:6%;top:12%}
.orb-css{right:8%;top:18%}
.orb-js{left:16%;bottom:16%}
.orb-php{right:12%;bottom:10%}

/* allow hovering individual orbs while container ignores pointer events */
.orb{pointer-events:auto}

.orb:hover{transform:translateY(-6px) scale(1.04);z-index:30;box-shadow:0 26px 80px rgba(2,2,8,0.6)}

@keyframes floaty{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}
.orb{animation:none}

/* hero foreground device mock */
/* project preview removed from hero; foreground mock styles deleted */

/* slightly smaller orb sizes for small/medium screens (tablet, small laptops) */
@media (min-width:577px) and (max-width:991px) {
  .orb{width:80px;height:80px}
  .orb img{width:60%;height:60%}
}

/* mobile: show smaller bubbles in different positions */
@media(max-width:576px){
  .orb{width:70px;height:70px}
  .orb img{width:55%;height:55%}
  .orb-html{left:5%;top:15%}
  .orb-css{right:5%;top:20%}
  .orb-js{left:8%;bottom:18%}
  .orb-php{right:8%;bottom:14%}
}

/* CTA buttons */
.btn-cta{border:0;border-radius:.6rem;padding:.7rem 1.2rem;font-weight:600}
.btn-primary{background:linear-gradient(90deg,#4b14c1 0%, #8e1adf 45%, #c600ff 100%);color:#fff;box-shadow:0 14px 40px rgba(90,34,170,0.28);border:1px solid rgba(255,255,255,0.06);text-shadow:0 1px 0 rgba(0,0,0,0.25)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 64px rgba(95,40,170,0.34)}
.btn-outline-light{border:1px solid rgba(255,255,255,0.12);color:#fff;background:transparent}
.btn-outline-light:hover,.btn-outline-light:focus{background:rgba(255,255,255,0.06);transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,0.18)}

/* stronger rule for hero area outline button to avoid inheritance issues */
.hero .btn-outline-light{color:#fff}
.hero .btn-outline-light:hover,.hero .btn-outline-light:focus{background:rgba(255,255,255,0.08);color:#fff}

/* scroll hint removed */

/* Responsive tweaks */
@media(min-width:992px){.hero-title{font-size:3.1rem}}
@media(max-width:576px){.hero-title{font-size:1.6rem}.hero-sub{font-size:.95rem}}
.card{background:#fff;color:#333;border:0;border-radius:.6rem}
@media (max-width:576px){.hero{padding-top:5.5rem}}

/* LCD Monitor in hero */
.lcd-wrap{display:flex;pointer-events:none;perspective:1200px}
.lcd-monitor{width:420px;max-width:86vw;transform:translateZ(0) rotateX(5deg);transform-style:preserve-3d}
.lcd-bezel{background:linear-gradient(145deg,#1a1822,#0f0d14);border-radius:14px;padding:18px;box-shadow:0 24px 70px rgba(2,2,8,0.75), inset 0 2px 6px rgba(255,255,255,0.04);border:2px solid rgba(255,255,255,0.08);position:relative}

/* LCD controls - buttons and LEDs */
.lcd-controls{position:absolute;bottom:10px;right:18px;display:flex;align-items:center;gap:10px;z-index:10}
.lcd-led{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e, 0 0 20px rgba(34,197,94,0.4), inset 0 1px 3px rgba(255,255,255,0.4);animation:ledPulse 2.2s ease-in-out infinite}
@keyframes ledPulse{0%,100%{opacity:1;box-shadow:0 0 10px #22c55e, 0 0 20px rgba(34,197,94,0.4)}50%{opacity:0.75;box-shadow:0 0 6px #22c55e, 0 0 12px rgba(34,197,94,0.25)}}

/* Professional LCD screen */
.lcd-screen{width:100%;height:240px;border-radius:8px;padding:24px;background:linear-gradient(180deg,#0d1117,#161b22);box-shadow:inset 0 6px 18px rgba(0,0,0,0.7), 0 2px 10px rgba(120,60,255,0.1);border:1px solid rgba(120,60,255,0.15);overflow:hidden;position:relative}
.lcd-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%);pointer-events:none}
.lcd-code{height:100%;overflow:hidden;margin:0;color:#c9d1d9;background:transparent}
.lcd-code code{display:block;white-space:pre;font-family:'Cascadia Code',SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:14px;line-height:1.6;letter-spacing:0.3px}

.lcd-stand{width:90px;height:14px;margin:10px auto 0;background:linear-gradient(180deg,#1a1822,#0f0d14);border-radius:10px 10px 3px 3px;box-shadow:0 8px 24px rgba(0,0,0,0.6)}
.lcd-stand::after{content:'';display:block;width:140px;height:10px;margin:6px auto 0;background:linear-gradient(90deg,transparent,#1a1822 25%,#1a1822 75%,transparent);border-radius:5px}

@media(max-width:768px){
  .hero-content-row{flex-direction:column;gap:2rem;text-align:center}
  .hero-text-col{text-align:center;max-width:100%}
  .hero-text-col .hero-title{text-align:center}
  .hero-text-col .hero-sub{text-align:center}
  .hero-text-col .d-flex{justify-content:center}
  .lcd-wrap{justify-content:center}
}

/* Mobile performance: reduce heavy visual effects and animations */
@media(max-width:768px){
  .skill-item .skill-bubble{animation:none;transition:none}
  .skill-bubble{box-shadow:inset 0 2px 6px rgba(255,255,255,0.02),0 6px 18px rgba(0,0,0,0.4)}
  .skill-item .skill-bubble:hover{transform:none;box-shadow:inset 0 2px 6px rgba(255,255,255,0.02),0 8px 26px rgba(0,0,0,0.45)}
  .orb{animation:none;transform:none}
  .hero-text-col{backdrop-filter: blur(4px)}
  .skill-modal-panel{padding:14px}
}

@media(max-width:576px){
  .lcd-monitor{width:320px}
  .lcd-bezel{padding:12px}
  .lcd-controls{bottom:8px;right:12px}
  .lcd-led{width:6px;height:6px}
  .lcd-screen{height:180px;padding:16px}
  .lcd-code code{font-size:12px;line-height:1.5}
}

/* Contact overlay styles */
.contact-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(4,0,10,0.7), rgba(42,0,63,0.7));z-index:1600}
.contact-overlay[aria-hidden="false"]{display:flex}
.contact-overlay-panel{max-width:520px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 30px 90px rgba(4,0,20,0.7);border:1px solid rgba(183,143,255,0.06);color:#fff}
.contact-overlay-panel h4{margin:0 0 .5rem}
.contact-overlay-panel p{margin:0 0 1rem;color:rgba(255,255,255,0.9)}

/* Success icon inside contact overlay */
.contact-success-icon{width:76px;height:76px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(180deg, rgba(111,43,214,0.12), rgba(179,0,255,0.08));box-shadow:0 8px 30px rgba(99,49,191,0.12);}
.contact-success-icon svg{display:block}
.contact-overlay-panel h4{font-size:1.25rem}
.contact-overlay-panel .btn{min-width:110px}
.contact-overlay-panel .btn-primary{background:linear-gradient(90deg,#6f2bd6,#b300ff);border:none}
.contact-overlay-panel .btn-outline-light{border-color:rgba(255,255,255,0.12)}
.contact-overlay-panel{padding:1.5rem}
.contact-overlay-panel p{max-width:44ch;margin-left:auto;margin-right:auto}

/* Footer styles */
.site-footer{background:transparent;color:#fff;padding-top:2rem}
.site-footer .footer-logo{width:64px;height:64px;object-fit:contain}
.site-footer .footer-nav{flex-wrap:wrap}
.site-footer .footer-link{color:#fff;text-decoration:none;padding:.15rem .35rem;border-radius:.35rem;transition:background .18s, color .18s}
.site-footer .footer-link:hover{background:rgba(183,143,255,0.06);color:#fff}
.site-footer .btn-whatsapp{padding:.35rem .65rem}
.site-footer .small.text-muted{color:#fff !important}
.site-footer, .site-footer a, .site-footer .footer-link, .site-footer .footer-nav, .site-footer .small, .site-footer .footer-panel{color:#fff}
.site-footer .container{max-width:1100px}
.footer-panel{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(183,143,255,0.06); box-shadow: 0 20px 60px rgba(3,0,20,0.6); border-radius:.8rem}

/* Break out of container so footer panel spans full viewport width */
.site-footer .footer-panel{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  border-radius: 0.25rem;
}

/* When using fullscreen footer, make it at least full viewport height */
.site-footer.footer-fullscreen .footer-panel{
  /* do not force full viewport height; size to content to avoid overflow */
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 100%;
}

/* Keep inner container content constrained while background spans full width */
.site-footer .footer-panel > .row{ max-width: 1100px; margin-left: auto; margin-right: auto; }

@media(max-width:576px){
  .site-footer .footer-nav{justify-content:center}
  .site-footer .d-flex.justify-content-md-end{justify-content:center}
}

/* WhatsApp button styling for overlay */
.btn-whatsapp{background:linear-gradient(90deg,#18b64a,#26d366);color:#04210a;border:none;padding:.5rem .9rem;display:inline-flex;align-items:center}
.btn-whatsapp svg{margin-right:6px;fill:#fff}
.btn-whatsapp:focus{box-shadow:0 8px 30px rgba(38,211,102,0.18)}

/* Footer contact & social icon styles */
.footer-contact .fw-bold{ color: #fff; font-size: 1rem; font-weight:700 }
.footer-contact .small{ color: rgba(255,255,255,0.9) }
.footer-contact .footer-link{ color: rgba(255,255,255,0.95); text-decoration:none }
.footer-contact .footer-link:hover{ text-decoration:underline }
.footer-social{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; position:relative }
/* bubble drawn behind the icon so PNG/SVG icons sit visually inside the bubble */
.footer-social::before{ content:''; position:absolute; inset:0; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: inset 0 4px 10px rgba(255,255,255,0.02), 0 12px 30px rgba(0,0,0,0.45); z-index:1; transition: background .18s ease, transform .12s ease }
.footer-social svg, .footer-social img.social-icon{ width:24px; height:24px; display:block; object-fit:contain; position:relative; z-index:2 }
.footer-social + .footer-social{ margin-left:8px }
.footer-social:hover{ background: linear-gradient(180deg, rgba(183,143,255,0.08), rgba(120,60,255,0.06)); transform:translateY(-3px) }

/* icon font sizing should use the same rules as SVG/img via the .footer-social selectors above */

/* Force circular bubble appearance and clip inner images/svgs */
.site-footer .footer-social{ overflow:visible }
.footer-contact .d-flex{ gap:8px }

@media(max-width:576px){
  .footer-contact{ text-align:center }
  .footer-contact .d-flex{ justify-content:center }
}

/* Milestone / progress bar (right-side) */
.milestone-bar{ position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:1400; display:flex; flex-direction:column; align-items:center; gap:20px; pointer-events:auto }
/* Scroll snap toggle button */
.snap-toggle{ width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); backdrop-filter:blur(8px); color:var(--nav-accent); font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .22s cubic-bezier(.2,.9,.3,1); box-shadow:0 8px 24px rgba(0,0,0,0.4) }
.snap-toggle:hover{ background:linear-gradient(180deg, rgba(183,143,255,0.12), rgba(120,60,255,0.06)); transform:scale(1.08); box-shadow:0 12px 32px rgba(120,60,255,0.25); border-color:rgba(183,143,255,0.15) }
.snap-toggle.snap-off{ color:rgba(255,255,255,0.4) }
.snap-toggle.snap-off:hover{ color:rgba(255,255,255,0.6) }
.milestone-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:32px; position:relative }
.milestone-item{ display:block; position:relative }
/* Line segment between icons (except for last item) */
.milestone-item:not(:last-child)::after{ content:''; position:absolute; top:calc(50% + 28px); left:50%; transform:translateX(-50%); width:6px; height:32px; background:rgba(255,255,255,0.08); border-radius:3px; z-index:-1 }
/* Progress line segments that fill as you scroll */
.milestone-item:not(:last-child)::before{ content:''; position:absolute; top:calc(50% + 28px); left:50%; transform:translateX(-50%); width:6px; height:0; background:linear-gradient(180deg,var(--nav-accent), #7a3be8); border-radius:3px; z-index:0; transition:height .4s cubic-bezier(.2,.9,.3,1); box-shadow:0 4px 16px rgba(120,60,255,0.4) }
/* Completed segments show full progress line */
.milestone-item.is-complete:not(:last-child)::before{ height:32px }
.milestone-link{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; color:rgba(255,255,255,0.6); text-decoration:none; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); backdrop-filter:blur(8px); box-shadow:0 8px 24px rgba(0,0,0,0.4); transition:all .22s cubic-bezier(.2,.9,.3,1); border:1px solid rgba(255,255,255,0.05) }
.milestone-link i{ font-size:26px; line-height:26px; transition:transform .2s ease }
.milestone-link:hover{ color:#fff; background:linear-gradient(180deg, rgba(183,143,255,0.16), rgba(120,60,255,0.08)); box-shadow:0 16px 48px rgba(99,49,191,0.18); transform:translateX(-6px) scale(1.08); border-color:rgba(183,143,255,0.2) }
.milestone-link:hover i{ transform:scale(1.12) }
.milestone-item.is-active .milestone-link{ color:#fff; background:linear-gradient(180deg, rgba(183,143,255,0.2), rgba(120,60,255,0.12)); box-shadow:0 12px 36px rgba(120,60,255,0.25), 0 0 24px rgba(183,143,255,0.15); transform:translateX(-4px) scale(1.06); border-color:var(--nav-accent) }
.milestone-item.is-complete .milestone-link{ color:var(--nav-accent); background:linear-gradient(180deg, rgba(183,143,255,0.08), rgba(120,60,255,0.04)) }

/* Mobile responsive milestone bar - move to bottom */
@media(max-width:900px){ 
  .milestone-bar{ bottom:20px; top:auto; right:50%; transform:translateX(50%); flex-direction:row; gap:12px; padding:12px 16px; background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.3)); backdrop-filter:blur(12px); border-radius:24px; border:1px solid rgba(255,255,255,0.1) }
  .snap-toggle{ width:36px; height:36px; font-size:16px; border-radius:10px }
  .milestone-list{ flex-direction:row; gap:8px }
  .milestone-link{ width:36px; height:36px; border-radius:10px }
  .milestone-link i{ font-size:16px }
  .milestone-link:hover{ transform:translateY(-4px) scale(1.1) }
  .milestone-item.is-active .milestone-link{ transform:translateY(-2px) scale(1.05) }
  /* Hide connecting lines on mobile horizontal layout */
  .milestone-item:not(:last-child)::after{ display:none }
  .milestone-item:not(:last-child)::before{ display:none }
}

/* Footer social label under icons */
.footer-social-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px }
.footer-social-wrap .social-label{ color: rgba(255,255,255,0.9); font-size:0.78rem }
.footer-social-wrap .footer-social{ width:44px; height:44px; border-radius:10px; padding:8px }
.footer-social-wrap .footer-social svg, .footer-social-wrap .footer-social img.social-icon{ width:22px; height:22px }

/* Admin login overlay styles */
.admin-login-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:2200 }
.admin-login-overlay[aria-hidden="false"]{ display:flex }
.admin-login-panel{ position:relative; width:100%; max-width:520px; background:linear-gradient(180deg, rgba(15,10,30,0.92), rgba(40,20,70,0.92)); border-radius:12px; padding:1.25rem; box-shadow:0 40px 120px rgba(0,0,0,0.7); border:1px solid rgba(183,143,255,0.12); color:#fff }
.admin-login-close{ position:absolute; right:18px; top:18px; background:transparent; border:none; color:#fff; font-size:20px; cursor:pointer }
.admin-login-content{ color:#fff }
.admin-login-content h3{ margin-top:6px; margin-bottom:6px }
.admin-login-content p{ margin-bottom:12px; color:rgba(255,255,255,0.9) }
.admin-login-panel .form-control{ background:rgba(255,255,255,0.03); color:#fff; border:1px solid rgba(255,255,255,0.08) }
.admin-login-panel .btn{ min-width:110px }
.admin-login-panel .btn-outline-light{ color:#fff; border-color:rgba(255,255,255,0.08) }

@media(max-width:576px){
  .admin-login-panel{ margin:0 16px; width:calc(100% - 32px) }
}

/* Footer links and services list */
.footer-list{ align-items:flex-start }
.footer-links{ padding-left:0; margin:0 }
.footer-links li{ margin-bottom:0.45rem; color: rgba(255,255,255,0.9) }
.footer-links li a{ color: rgba(255,255,255,0.92); text-decoration:none }
.footer-links li a:hover{ text-decoration:underline; color:#fff }

@media(max-width:576px){
  .footer-list{ flex-direction:column; gap:1rem }
}

/* Separate Quick Links and Services with spacing on desktop and dividers on mobile */
.footer-list{ gap:32px }
.footer-list > div{ min-width:160px; padding:0 8px }

@media (min-width:768px){
  .site-footer .footer-contact{ padding-left:24px }
  .site-footer .footer-contact{ border-left: 1px solid rgba(255,255,255,0.04) }
  /* Center contact column content on tablet+ for balanced layout */
  .site-footer .footer-contact{ text-align:center }
  .site-footer .footer-contact .d-flex{ justify-content:center }
}

@media(max-width:576px){
  .footer-list{ flex-direction:column; gap:0 }
  .footer-list > div{ padding:12px 0; border-top: 1px solid rgba(255,255,255,0.06) }
  .footer-list > div:first-child{ border-top: none; padding-top:0 }
  .footer-contact{ padding-top:12px }
  .brand-logo{ width:56px; height:56px }
  .footer-logo{ width:48px; height:48px }
  .brand-text{ font-size:1rem }
}

/* Ensure footer columns stack and center on mobile */
@media(max-width:576px){
  .site-footer .footer-panel .row{ text-align:left }
  .footer-list{ align-items:flex-start; justify-content:flex-start }
  .footer-list > div{ text-align:left; padding-left:0; padding-right:0 }
  .footer-links li{ text-align:left }
  .footer-contact{ text-align:left; display:block }
  .footer-contact .d-flex{ justify-content:flex-start }
  .footer-social-wrap{ margin:0 }
  .footer-social-wrap .social-label{ text-align:left }
}

/* Override: center contact block text/icons on small screens per request */
@media (max-width: 576px) {
  .footer-contact { text-align: center !important; }
  .footer-contact .d-flex { justify-content: center !important; }
}

/* Footer-brand: stack logo above text on small screens */
.footer-brand{ align-items:flex-start }
@media(max-width:576px){
  .footer-brand{ flex-direction:column; align-items:flex-start; gap:8px }
  .footer-brand .footer-logo{ margin:0 0 8px 0 }
  .footer-brand > div{ text-align:left }
}

/* Themed card used for about/contact/overlay panels to override default white .card */
.themed-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(183,143,255,0.06);
  color: #fff;
  box-shadow: 0 20px 60px rgba(3,0,20,0.6);
  backdrop-filter: blur(8px) saturate(120%);
  border-radius: .8rem;
}
.themed-card .btn-outline-light{ color: #fff; border-color: rgba(255,255,255,0.12); }
.themed-card .btn-primary{ box-shadow: 0 10px 30px rgba(99,49,191,0.22); }

/* Phone field layout */
.phone-row{display:flex;gap:.5rem;align-items:center}
.phone-country{flex:0 0 170px;max-width:240px}
.phone-input{flex:1}

/* Themed inputs inside themed-card */
.themed-card .form-control, .themed-card .form-select, .themed-card textarea{
  background: rgba(255,255,255,0.02);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
}
.themed-card .form-control::placeholder{ color: rgba(255,255,255,0.6); }
.themed-card .form-control:focus, .themed-card .form-select:focus, .themed-card textarea:focus{
  box-shadow: 0 6px 20px rgba(120,60,255,0.12);
  border-color: rgba(183,143,255,0.18);
  outline: none;
}

/* Ensure select dropdown matches site theme and options are readable */
.themed-card .form-select{
  background: linear-gradient(180deg, rgba(111,43,214,0.08), rgba(179,0,255,0.06));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
}
.themed-card .form-select option{
  background: #2a003f;
  color: #fff;
}

/* Keep select field themed when focused/active */
.themed-card .form-select:focus,
.themed-card .form-select:active,
.themed-card .form-select:focus-visible{
  background: linear-gradient(180deg, rgba(111,43,214,0.12), rgba(179,0,255,0.08));
  color: #fff;
  border-color: rgba(183,143,255,0.18);
  box-shadow: 0 6px 20px rgba(120,60,255,0.12);
  outline: none;
}

/* Hide default arrow on some browsers and ensure custom look retains theme */
.themed-card .form-select::-ms-expand{ display: none; }
.themed-card .form-select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.18) 50%), linear-gradient(135deg, rgba(255,255,255,0.18) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 6px), calc(100% - 12px) calc(50% - 6px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.themed-card .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.12) 50%), linear-gradient(135deg, rgba(255,255,255,0.12) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* When the select is focused/open, show value in black on white for readability */
.themed-card .form-select:focus{
  color: #000;
  background: #fff;
}

/* Custom country picker */
/* country picker removed — using a simple phone text input */

/* Projects grid and card styles */
.projects-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:18px;justify-content:center}
@media (max-width: 768px){
  .projects-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:.8rem;overflow:hidden;box-shadow:0 12px 40px rgba(6,0,20,0.45);display:flex;flex-direction:column;max-width:320px;height:100%}
.project-image{height:140px;overflow:hidden;background:#0e0b12;display:flex;align-items:center;justify-content:center}
.project-image img{width:100%;height:100%;object-fit:contain;display:block}
.project-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.project-title{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:0.2px;line-height:1.15;color:#fff}
.project-title a{color:inherit;text-decoration:none}
.project-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-excerpt{margin:0;color:rgba(255,255,255,0.88);font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.project-stack{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.project-stack > img{width:28px;height:28px;object-fit:contain;border-radius:6px;background:transparent}
.project-stack .stack-icons > img{width:28px;height:28px;object-fit:contain;border-radius:6px;background:transparent}
.project-stack .stack-heading, .stack-heading{margin:0 0 6px;font-size:0.9rem;font-weight:700;color:#fff;letter-spacing:0.2px}
.project-stack .stack-icons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack-heading::after{content:"";display:inline-block;width:40px;height:3px;background:var(--nav-accent);margin-left:8px;border-radius:2px;vertical-align:middle;opacity:0.95}
.project-actions{display:flex;gap:8px;margin-top:auto}
.project-actions .btn{font-weight:700;padding:.45rem .7rem;border-radius:.5rem}

/* Project detail modal */
.project-modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(4,0,10,0.7), rgba(42,0,63,0.7));backdrop-filter:blur(6px)}
.project-modal[aria-hidden="false"]{display:flex}
.project-panel{width:min(1100px,96%);max-width:1100px;border-radius:12px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 40px 120px rgba(6,0,20,0.75);border:1px solid rgba(183,143,255,0.06);color:#fff}
.project-panel .project-top{display:flex;gap:18px;align-items:flex-start}
  .project-panel .project-media{position:relative;flex:0 1 420px;min-width:280px;background:transparent;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:6px 0;min-height:320px}
  /* main gallery constrained by viewport and uses theme gradient as background so empty space matches site */
  .project-panel .project-media .gallery-main{width:100%;height:100%;max-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg, rgba(183,143,255,0.03), rgba(120,60,255,0.01));border-radius:6px}
  .project-panel .project-media .gallery-main img, .project-panel .project-media .gallery-main video{max-width:100%;max-height:100%;object-fit:contain;margin:auto;display:block}
.project-panel .project-media .gallery-prev, .project-panel .project-media .gallery-next{position:absolute;z-index:5;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);border:0;color:#fff;padding:8px 12px;font-size:22px;border-radius:6px;cursor:pointer}
.project-panel .project-media .gallery-prev{left:12px}
.project-panel .project-media .gallery-next{right:12px}
  .project-panel .project-media .gallery-thumbs{position:relative;display:flex;gap:10px;justify-content:flex-start;z-index:6;margin-top:8px;padding:6px 8px;flex-wrap:wrap}
  /* default (desktop) thumbnail size — keep compact on PC */
  .project-panel .project-media .gallery-thumbs .thumb-btn{border:0;background:transparent;padding:0;width:72px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;cursor:pointer;opacity:0.98;box-shadow:0 6px 18px rgba(0,0,0,0.12);transition:transform .12s ease, box-shadow .12s ease}
  .project-panel .project-media .gallery-thumbs .thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
  .project-panel .project-media .gallery-thumbs .thumb-btn:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,0.45)}
  .project-panel .project-media .gallery-thumbs .thumb-btn.active{outline:2px solid rgba(183,143,255,0.9);transform:translateY(-4px);}

  /* larger thumbnails on mobile for better visibility */
  @media(max-width:720px){
    .project-panel .project-media .gallery-thumbs .thumb-btn{width:88px;height:64px;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
  }
.project-panel .project-info{flex:1}
.project-panel h3{margin:0 0 8px;font-size:1.35rem;font-weight:800;line-height:1.08;color:#fff;position:relative}
.project-panel h3::after{content:"";display:block;width:56px;height:4px;background:var(--nav-accent);border-radius:4px;margin-top:10px;opacity:0.95}
.project-panel .project-stack{margin:8px 0}
.project-panel .project-desc{margin-top:16px;padding:14px 0;color:rgba(255,255,255,0.94);line-height:1.75;font-size:1.02rem;letter-spacing:0.015em;text-align:justify;border-top:1px solid rgba(183,143,255,0.1)}
.project-panel .project-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.project-close{position:absolute;right:18px;top:14px;background:transparent;border:0;color:rgba(255,255,255,0.92);font-size:20px;padding:6px;cursor:pointer}

/* Ensure close button is always above media */
.project-close{z-index:60}

/* Make modal content scrollable (so modal itself can scroll while background is locked)
  and enable smooth touch scrolling on mobile */
.project-panel{max-height:calc(100vh - 40px);overflow:auto;-webkit-overflow-scrolling:touch}

/* Ensure media stays behind controls */
.project-panel .project-media .gallery-main img,
.project-panel .project-media .gallery-main video,
.project-panel .project-media .gallery-main iframe{position:relative;z-index:1}

@media(max-width:920px){
  .project-panel .project-top{flex-direction:column}
  .project-panel .project-media{width:100%;height:260px;min-height:260px}
  /* move thumbs below main image on small screens */
  .project-panel .project-media .gallery-thumbs{position:static;bottom:auto;left:auto;right:auto;justify-content:center;margin-top:8px;}
  .project-panel .project-media .gallery-thumbs .thumb-btn{width:48px;height:36px}
  /* make arrows sit inside image closer to center on small screens */
  .project-panel .project-media .gallery-prev, .project-panel .project-media .gallery-next{top:32%;transform:translateY(-50%);padding:6px 10px;font-size:20px}
}

/* Skill detail modal styles */
.skill-modal{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(4,0,10,0.6), rgba(42,0,63,0.6));backdrop-filter:blur(6px)}
.skill-modal[aria-hidden="false"]{display:flex}
.skill-modal-panel{width:min(920px,92%);max-width:920px;border-radius:12px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 30px 90px rgba(4,0,20,0.7);border:1px solid rgba(183,143,255,0.06);color:#fff}
.skill-modal-close{position:absolute;right:18px;top:12px;background:transparent;border:0;color:rgba(255,255,255,0.9);font-size:20px;line-height:1;padding:8px;cursor:pointer}
.skill-modal-content{display:flex;gap:20px;align-items:center}
.skill-modal-image{flex:0 0 180px;display:flex;align-items:center;justify-content:center}
.skill-modal-image img{width:140px;height:140px;object-fit:contain;border-radius:12px;background:transparent}
.skill-modal-body{flex:1}
.skill-modal-body h4{margin:0 0 8px;font-size:1.25rem}
.skill-modal-body p{margin:0;color:rgba(255,255,255,0.92);line-height:1.5}

@media(max-width:720px){
  .skill-modal-content{flex-direction:column;align-items:center;text-align:center}
  .skill-modal-image{flex:0 0 auto}
  .skill-modal-body h4{font-size:1.1rem}
}

  /* Image viewer overlay */
  .image-viewer{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(6,6,10,0.85)}
  .image-viewer[aria-hidden="false"]{display:flex}
  .image-viewer .viewer-panel{position:relative;max-width:95%;max-height:95%;width:min(1100px,96%);display:flex;align-items:center;gap:12px}
  .image-viewer .viewer-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;border-radius:8px}
  .image-viewer .viewer-img-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none}
  .image-viewer .viewer-img-wrap img{max-width:100%;max-height:100%;transform-origin:center center;transition:transform 120ms ease}
  /* position arrows as siblings of the stage so they sit just outside the image */
  .image-viewer .viewer-panel > .viewer-prev, .image-viewer .viewer-panel > .viewer-next{
    width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;z-index:12;
    background:rgba(183,143,255,0.12);border:1px solid rgba(183,143,255,0.18);color:rgb(183,143,255);font-size:20px;padding:0;backdrop-filter:blur(6px)
  }
  .image-viewer .viewer-panel > .viewer-prev{margin-right:-48px}
  .image-viewer .viewer-panel > .viewer-next{margin-left:-48px}
  .image-viewer .viewer-close{position:absolute;right:10px;top:10px;background:transparent;border:0;color:rgb(183,143,255);font-size:20px;padding:6px;cursor:pointer}
  .image-viewer .viewer-zoom-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
  .image-viewer .viewer-zoom-controls button{background:rgba(183,143,255,0.12);border:1px solid rgba(183,143,255,0.18);color:rgb(183,143,255);padding:6px 10px;border-radius:6px;cursor:pointer}

  @media(max-width:720px){
    /* keep arrows, image and next in a single row on small screens */
    .image-viewer .viewer-panel{flex-direction:row;align-items:center}
    .image-viewer .viewer-panel > .viewer-prev, .image-viewer .viewer-panel > .viewer-next{top:50%}
    /* slightly smaller arrows on small screens for less intrusion */
    .image-viewer .viewer-panel > .viewer-prev, .image-viewer .viewer-panel > .viewer-next{padding:6px;font-size:18px;width:36px;height:36px}
    /* keep arrows just outside the stage but within visible bounds */
    .image-viewer .viewer-panel > .viewer-prev{margin-right:-36px}
    .image-viewer .viewer-panel > .viewer-next{margin-left:-36px}
  }