/* css/main.css */
/* =========================
   Dark-only, 3-color palette
   + Improved responsive nav/menu
   + Improved lightbox responsiveness
   + More visible lightbox controls
   + Copy buttons in Contact details
   ========================= */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --c-bg:#0B1220;
  --c-text:#F8FAFC;
  --c-accent:#4F8CFF;

  /* alt surface derived from existing palette (keeps “3 colors” concept) */
  --c-bg-alt: color-mix(in srgb, var(--c-bg) 82%, var(--c-accent) 18%);

  --c-surface:rgba(255,255,255,.06);
  --c-surface-2:rgba(255,255,255,.10);
  --c-border:rgba(248,250,252,.14);
  --c-muted:rgba(248,250,252,.74);

  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px; --s-7:40px; --s-8:52px; --s-9:64px;

  --radius-1:10px;
  --radius-2:14px;

  --shadow:0 16px 40px rgba(0,0,0,.28);
  --maxw:1120px;

  --focus:0 0 0 3px color-mix(in srgb,var(--c-accent) 55%,transparent);

  --header-h:72px;
  color-scheme:dark;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
a:focus-visible,
button:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-1);}

.container{width:min(var(--maxw),calc(100% - 2 * var(--s-5)));margin:0 auto;}
@media (max-width:420px){.container{width:calc(100% - 2 * 14px);} }

.skip-link{
  position:absolute;left:-999px;top:var(--s-4);
  background:var(--c-accent);color:#fff;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--radius-1);
  z-index:9999;
}
.skip-link:focus{left:var(--s-4);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:12px 18px;border-radius:var(--radius-1);
  border:2px solid var(--c-accent);
  font-weight:700;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;
  background:transparent;color:var(--c-accent);
  transition:transform 160ms ease,filter 160ms ease,opacity 160ms ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

.btn--primary{background:var(--c-accent);color:#fff;}
.btn--primary:hover{filter:brightness(1.05);}
.btn--secondary{background:transparent;}

.btn--cta{
  background:transparent;
  color:var(--c-text);
  border-color:rgba(248,250,252,.22);
}
.btn--cta:hover{border-color:var(--c-accent);}

.link{color:var(--c-accent);text-decoration:none;}
.link:hover{opacity:.9;}

/* Header (50% transparent) */
.header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--c-border);
  background:rgba(11,18,32,.5);
  backdrop-filter:blur(10px);
}

.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) 0;gap:var(--s-4);
  min-height:var(--header-h);
}

.header__brand{
  display:inline-flex;align-items:center;gap:var(--s-3);
  text-decoration:none;white-space:nowrap;
  min-width:0;
}
.header__brand-mark{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px;background:var(--c-surface);
  border:1px solid var(--c-border);
  font-weight:700;
}
.header__brand-text{font-weight:700;letter-spacing:-.02em;}

/* Nav */
.nav{display:flex;align-items:center;gap:var(--s-3);}
.nav__toggle{
  display:none;background:transparent;border:1px solid var(--c-border);
  border-radius:var(--radius-1);padding:10px 12px;
  cursor:pointer;color:var(--c-text);
}
.nav__toggle-lines{
  display:block;width:20px;height:2px;background:var(--c-text);position:relative;
}
.nav__toggle-lines::before,
.nav__toggle-lines::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--c-text);
}
.nav__toggle-lines::before{top:-6px;}
.nav__toggle-lines::after{top:6px;}

.nav__menu{display:flex;align-items:center;gap:var(--s-5);}
.nav__list{
  display:flex;gap:var(--s-3);
  margin:0;padding:0;list-style:none;
}

.nav__link{
  display:inline-flex;padding:10px 10px;border-radius:var(--radius-1);
  text-decoration:none;color:var(--c-muted);
  border:1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.nav__link:hover{color:var(--c-text);background:var(--c-surface);}
.nav__link--active{
  color:var(--c-text);
  border-color:var(--c-border);
  background:var(--c-surface-2);
}

/* Mobile menu: fixes “Portfolio disappears” by making menu scrollable + stable layout */
@media (max-width:768px){
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;}
  .nav__menu{
    position:fixed;
    left:0;
    right:0;
    top:calc(env(safe-area-inset-top) + var(--header-h));
    margin:12px;
    padding:var(--s-4);
    border-radius:var(--radius-2);
    background:rgba(11,18,32,.94);
    border:1px solid var(--c-border);
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:var(--s-4);
    z-index:60;

    max-height:calc(100dvh - var(--header-h) - 24px - env(safe-area-inset-bottom));
    overflow:auto;
    overscroll-behavior:contain;
  }
  .nav__menu--open{display:flex;}
  .nav__list{flex-direction:column;gap:var(--s-2);}
  .nav__link{width:100%;}
  .btn--cta{width:100%;}
}

/* Sections + reveal */
.section{
  scroll-margin-top:calc(var(--header-h) + 12px);
  padding:var(--s-8) 0;
  min-height:clamp(520px,78vh,920px);

  /* removed reveal effect */
  opacity:1;
  transform:none;
  transition:none;
  will-change:auto;
}

@media (max-width:640px){
  .section{
    padding:44px 0;
    min-height:clamp(460px,78vh,820px);
  }
}

.section__inner{
  min-height:inherit;
  display:grid;
  align-content:center;
}

.section--alt{background:var(--c-bg-alt);}
.section:not(.section--alt){background:var(--c-bg);}

@media (prefers-reduced-motion: reduce){
  .section{opacity:1;transform:none;}
}

/* Section headers */
.section__header{margin-bottom:var(--s-6);display:grid;gap:var(--s-3);}
.section__header--center{justify-items:center;text-align:center;}
.section__title{margin:0;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;line-height:1.15;}
.section__subtitle{margin:0;color:var(--c-muted);max-width:72ch;}

/* Chips (10% smaller) */
.chip{
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--c-border);
  background:var(--c-surface-2);
  color:var(--c-text);
  font-size:11px;
  font-weight:700;
}

/* Hero */
.hero__content--center{text-align:center;justify-items:center;}
.hero__title{
  margin:0 0 var(--s-3);
  font-size:clamp(40px,7.2vw,72px);
  line-height:1.02;letter-spacing:-.05em;
}
.hero__subtitle{margin:0 0 var(--s-6);color:rgba(248,250,252,.88);font-weight:600;}
.hero__subtitle-strong{color:var(--c-accent);}
.hero__lead{margin:0 auto var(--s-6);color:rgba(248,250,252,.85);font-size:15px;max-width:80ch;}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;}
@media (max-width:420px){
  .hero__cta .btn{width:100%;}
}

/* Expertise */
.expertise__grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1000px){.expertise__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.expertise__grid{grid-template-columns:1fr;}}

.expertise__card{
  border:1px solid var(--c-border);
  border-radius:var(--radius-2);
  background:var(--c-surface);
  padding:var(--s-5);
  display:grid;
  gap:var(--s-3);
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.expertise__card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}

.expertise__card-title{margin:0;font-size:14px;font-weight:700;color:var(--c-text);}
.expertise__card-text{margin:0;color:var(--c-muted);font-size:13px;line-height:1.65;}
.expertise__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none;}

.expertise__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  justify-content:center;
  margin-top:var(--s-6);
}
@media (max-width:420px){
  .expertise__actions .btn{width:100%;}
}

/* Portfolio cards */
.portfolio__grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1000px){.portfolio__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.portfolio__grid{grid-template-columns:1fr;}}

.pcard{
  border:1px solid var(--c-border);
  border-radius:var(--radius-2);
  overflow:hidden;
  background:var(--c-surface);
  transition:transform 160ms ease, box-shadow 160ms ease;
  display:flex;
  flex-direction:column;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);}

/* cover only is clickable */
.pcard__cover-btn{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
  width:100%;
}
.pcard__cover-btn:focus-visible{outline:none;box-shadow:var(--focus);border-radius:0;}

.pcard__image{
  aspect-ratio:16/10;width:100%;
  object-fit:cover;
  background:var(--c-surface-2);
}

/* NDA cover placeholder */
.pcard__cover-nda{
  aspect-ratio:16/10;
  width:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(79,140,255,.18), rgba(255,255,255,.06));
  border-bottom:1px solid var(--c-border);
}
.pcard__cover-nda-text{
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(248,250,252,.88);
  border:1px dashed rgba(248,250,252,.28);
  border-radius:999px;
  padding:10px 14px;
  text-transform:uppercase;
  font-size:12px;
}

.pcard__body{
  padding:var(--s-5);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  flex:1;
}

.pcard__title{
  margin:0;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.pcard__title-link{
  color:var(--c-text);
  text-decoration:none;
  border-bottom:1px solid rgba(248,250,252,.22);
}
.pcard__title-link:hover{
  border-bottom-color:rgba(248,250,252,.42);
  color:var(--c-text);
}
.pcard__years{
  font-size:12px;
  font-weight:600;
  color:rgba(248,250,252,.62);
}

/* consistent desc */
.pcard__desc{
  margin:0;
  color:var(--c-muted);
  font-size:13px;
  line-height:1.65;
}

/* technologies pinned to bottom */
.pcard__tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin:0;
  padding:0;
  list-style:none;
  margin-top:auto;
}

.pcard__meta{
  margin-top:8px;
  color:rgba(248,250,252,.62);
  font-size:12px;
}

/* Contact */
.contact__details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-3);
  width:min(900px,100%);
  margin:0 auto;
}
@media (max-width:900px){.contact__details{grid-template-columns:1fr;}}

.contact__detail{
  border:1px solid var(--c-border);
  background:var(--c-surface);
  border-radius:var(--radius-2);
  padding:var(--s-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
}
.contact__detail-main{min-width:0;}
.contact__label{
  color:var(--c-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:var(--s-2);
}
.contact__value{
  word-break:break-word;
  display:inline-block;
}

.contact__copy-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(248,250,252,.20);
  background:rgba(255,255,255,.05);
  color:rgba(248,250,252,.92);
  cursor:pointer;
  transition:transform 160ms ease, filter 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.contact__copy-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(79,140,255,.65);
}
.contact__copy-btn:active{transform:translateY(0);}
.contact__copy-text{font-weight:700;font-size:12px;}
.contact__copy-ico{color:rgba(248,250,252,.90);}
.contact__copy-btn.is-copied{
  border-color:rgba(79,140,255,.85);
  background:rgba(79,140,255,.16);
}

.contact__note{
  margin:var(--s-5) auto 0;
  color:var(--c-muted);
  text-align:center;
  max-width:72ch;
}

/* Footer */
.footer{
  border-top:1px solid var(--c-border);
  padding:var(--s-6) 0;
  background:var(--c-bg);
}
.footer__inner{display:flex;align-items:center;justify-content:center;}
.footer__copy{margin:0;color:var(--c-muted);text-align:center;}

/* Back-to-top */
.to-top{
  position:fixed;right:18px;bottom:18px;
  width:42px;height:42px;border-radius:999px;
  border:1px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-text);
  cursor:pointer;
  box-shadow:var(--shadow);
  display:none;
  align-items:center;justify-content:center;
  font-weight:700;
}
.to-top:hover{transform:translateY(-2px);}
.to-top:active{transform:translateY(0);}
.to-top--show{display:inline-flex;}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.is-open{display:flex;}

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
}

.lightbox__panel{
  position:relative;
  width:min(1100px, calc(100% - 2 * var(--s-5)));
  max-height:calc(100dvh - 2 * var(--s-6));
  border-radius:var(--radius-2);
  border:1px solid var(--c-border);
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-rows: 1fr auto;
}

.lightbox__figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: var(--s-6) var(--s-6) var(--s-4);
  gap: var(--s-3);
  min-height: 0; /* important for flex overflow on small screens */
}

.lightbox__img{
  max-width:100%;
  max-height: calc(100dvh - 260px);
  border-radius:12px;
  border:1px solid var(--c-border);
  background: var(--c-surface);
  object-fit:contain;
}

.lightbox__caption{
  color: rgba(248,250,252,.74);
  font-size: 12px;
  text-align:center;
  max-width: 90ch;
}

.lightbox__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-border);
  background: rgba(255,255,255,.04);
}

.lightbox__title{
  font-weight:700;
  letter-spacing:-.02em;
  font-size: 13px;
  color: var(--c-text);
}
.lightbox__counter{
  font-size: 12px;
  color: rgba(248,250,252,.70);
}

/* More visible controls (nav + close) */
.lightbox__close,
.lightbox__nav{
  border: 1px solid rgba(79,140,255,.70);
  background: rgba(79,140,255,.22);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.lightbox__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight:900;
  line-height:1;
}
.lightbox__close:hover{filter:brightness(1.08);}

.lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size: 26px;
}
.lightbox__nav--prev{left: 12px;}
.lightbox__nav--next{right: 12px;}
.lightbox__nav:hover{filter:brightness(1.08);}
.lightbox__nav:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}

@media (max-width: 640px){
  .lightbox__panel{
    width: calc(100% - 18px);
    max-height: calc(100dvh - 18px);
  }
  .lightbox__figure{
    padding: 18px 14px 12px;
    gap: 10px;
  }
  .lightbox__img{
    max-height: calc(100dvh - 210px);
  }
  .lightbox__meta{
    padding: 12px 14px;
  }
  .lightbox__nav--prev{ left: 8px; }
  .lightbox__nav--next{ right: 8px; }
}

.pcard__cover-nda--img{
  position:relative;
  padding:0;
}
.pcard__cover-nda--img .pcard__cover-nda-text{
  position:absolute;
  inset:auto auto var(--s-4) var(--s-4);
  backdrop-filter: blur(6px);
  background: rgba(11,18,32,.55);
}