/*
  Portfolio — Bento Design System
  Palette : #C8CDD5 slate · #80A1C1 blue · #FFF5E6 surface · #111827 text · #F3F2ED warm-gray
  Type    : Inter (all weights)
  Spacing : 4 · 8 · 12 · 16 · 24 · 32px
*/

/* =============================================
   DESIGN TOKENS
============================================= */
:root {
  /* brand */
  --peach:       #C8CDD5;
  --peach-dark:  #1C1F26;
  --peach-dim:   rgba(17,24,39,0.06);
  --blue:        #80A1C1;
  --blue-dim:    rgba(128,161,193,0.15);
  --blue-dark:   #2C4D70;

  /* neutral */
  --text:        #111827;
  --text-2:      #374151;
  --text-muted:  #6B7280;
  --surface:     #FFF5E6;
  --surface-2:   #F3F2ED;
  --white:       #FFFFFF;
  --border:      rgba(17,24,39,0.08);
  --border-md:   rgba(17,24,39,0.14);

  /* dark */
  --dark:        #111827;
  --dark-2:      #1F2937;

  /* radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* shadow */
  --shadow-sm: 0 2px 12px rgba(17,24,39,0.06);
  --shadow-md: 0 8px 32px rgba(17,24,39,0.10);
  --shadow-lg: 0 20px 60px rgba(17,24,39,0.14);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --transition: all 0.25s var(--ease);
}

/* =============================================
   RESET
============================================= */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: inherit;
  font-family: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media (max-width: 75em)    { html { font-size: 59%; } }
@media (max-width: 56.25em) { html { font-size: 56%; } }
@media (min-width: 112.5em) { html { font-size: 65%; } }

body {
  box-sizing: border-box;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  overflow-x: hidden;
  overflow-y: scroll;
}

a        { text-decoration: none; color: inherit; }
li       { list-style: none; }
textarea { resize: none; }
button   { border: none; cursor: pointer; }
input:focus, button:focus, a:focus, textarea:focus { outline: none; }

/* =============================================
   LAYOUT UTILITIES
============================================= */
.main-container { max-width: 120rem; margin: auto; width: 92%; }

.sec-pad { padding: 12rem 0; }
@media (max-width: 56.25em) { .sec-pad { padding: 8rem 0; } }

.d-none   { display: none; }
.text-lt  { color: #fff; }

/* =============================================
   TYPOGRAPHY — HEADINGS
============================================= */
.heading-primary {
  font-size: 5.2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 1.15;
  color: #fff;
}
@media (max-width: 37.5em) { .heading-primary { font-size: 3.6rem; } }

.heading-primary::after {
  content: '';
  display: block;
  width: 4.8rem;
  height: 3px;
  background: var(--peach);
  margin: 1.8rem auto 0;
  border-radius: 2px;
}

.heading-sec__mb-bg  { margin-bottom: 11rem; }
.heading-sec__mb-med { margin-bottom: 9rem; }
@media (max-width: 56.25em) {
  .heading-sec__mb-bg  { margin-bottom: 8rem; }
  .heading-sec__mb-med { margin-bottom: 8rem; }
}

.heading-sec__main {
  display: block;
  font-size: 3.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  color: var(--text);
}
.heading-sec__main--lt { color: #fff; }
.heading-sec__main--lt::after { background: var(--peach) !important; }
.heading-sec__main::after {
  content: '';
  position: absolute;
  top: calc(100% + 1.4rem);
  left: 50%;
  transform: translateX(-50%);
  width: 3.6rem;
  height: 3px;
  background: var(--peach);
  border-radius: 2px;
}
@media (max-width: 37.5em) {
  .heading-sec__main::after { top: calc(100% + 1.1rem); }
}

.heading-sec__sub {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.75rem;
  font-weight: 400;
  max-width: 68rem;
  margin: auto;
  line-height: 1.85;
}
.heading-sec__sub--lt { color: rgba(255,255,255,0.55); }
@media (max-width: 37.5em) { .heading-sec__sub { font-size: 1.6rem; } }

.heading-sm {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.text-primary {
  color: rgba(255,255,255,0.72);
  font-size: 1.85rem;
  text-align: center;
  line-height: 1.85;
  max-width: 70rem;
  margin: 0 auto;
}
@media (max-width: 37.5em) { .text-primary { font-size: 1.7rem; } }

/* =============================================
   BUTTONS
============================================= */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: var(--r-sm);
  padding: 1.2rem 3rem;
  transition: var(--transition);
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ghost pill for hero */
.btn--bg {
  padding: 1.4rem 4.8rem;
  font-size: 1.45rem;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 50px;
  letter-spacing: 3px;
}
.btn--bg:hover {
  background: var(--peach);
  border-color: var(--peach);
  color: var(--peach-dark);
  box-shadow: 0 8px 28px rgba(17,24,39,0.14);
}

.btn--med  { padding: 1rem 2.6rem; font-size: 1.3rem; }
.btn--theme { background: var(--dark); color: #fff; }
.btn--theme:hover { box-shadow: 0 8px 24px rgba(17,24,39,0.35); }

.btn--theme-inv {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--border-md);
}

/* JS dynamic classes */
.dynamicBgClr {
  background: var(--dark) !important;
  color: #fff !important;
}
.dynamicBgClr:hover {
  box-shadow: 0 8px 24px rgba(17,24,39,0.35) !important;
}
.dynamicBg { background: var(--dark); }

/* =============================================
   OLD SKILLS PILLS (about section)
============================================= */
.skills { display: flex; flex-wrap: wrap; gap: 1rem; }
.skills__skill {
  padding: 0.6rem 1.4rem;
  font-size: 1.25rem;
  font-weight: 500;
  background: #F1F2F4;
  border: 1px solid #D1D5DB;
  border-radius: 50px;
  color: #4B5563;
  transition: var(--transition);
}
.skills__skill:hover {
  background: #E2E4E9;
  border-color: #9CA3AF;
  color: #111827;
}
/* Highlighted / featured skills — dark filled */
.skills__skill--highlight {
  background: #1C1F26;
  border-color: #1C1F26;
  color: #F9FAFB;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.skills__skill--highlight:hover {
  background: #2D3240;
  border-color: #2D3240;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

/* =============================================
   HEADER / NAV
============================================= */
.header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5rem;
}
@media (max-width: 56.25em) { .header__content { padding: 0 2rem; } }

.header__logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  transition: var(--transition);
}
.header__logo-container:hover { color: var(--blue-dark); }

.header__logo-img-cont {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 1.2rem;
  border: 2px solid var(--peach);
  flex-shrink: 0;
}
@media (max-width: 56.25em) {
  .header__logo-img-cont { width: 3.8rem; height: 3.8rem; }
}
.header__logo-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.header__logo-sub {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.header__links { display: flex; }
@media (max-width: 37.5em) { .header__links { display: none; } }

.header__link-wrapper { position: relative; }

.header__link {
  padding: 2.4rem 1.8rem;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: color 0.2s;
  position: relative;
}
.header__link::after {
  content: '';
  position: absolute;
  bottom: 1.4rem;
  left: 1.8rem;
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.22s var(--ease);
}
.header__link:hover { color: var(--blue-dark); }
.header__link:hover::after { width: calc(100% - 3.6rem); }
@media (max-width: 56.25em) {
  .header__link { padding: 2.4rem 1.3rem; font-size: 1.1rem; }
}

.header__main-ham-menu-cont {
  display: none; width: 3rem; padding: 2.2rem 0;
}
@media (max-width: 37.5em) { .header__main-ham-menu-cont { display: block; } }

.header__main-ham-menu       { width: 100%; }
.header__main-ham-menu-close { width: 100%; }

.header__sm-menu {
  background: var(--white);
  position: absolute;
  width: 100%; top: 100%;
  visibility: hidden; opacity: 0;
  transition: all 0.28s;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.header__sm-menu--active { visibility: hidden; opacity: 0; }
@media (max-width: 37.5em) {
  .header__sm-menu--active { visibility: visible; opacity: 1; }
}
.header__sm-menu-link a {
  display: block;
  padding: 1.8rem 3rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: var(--transition);
}
.header__sm-menu-link a:hover {
  color: var(--blue-dark);
  background: var(--blue-dim);
}
.header__sm-menu-link:first-child a { border-top: 1px solid var(--border); }
.header__sm-menu-link-last { border-bottom: 0; }

/* =============================================
   HERO
============================================= */
.home-hero {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(17,24,39,0.96) 0%, rgba(17,24,39,0.88) 100%),
    url(../../assets/svg/common-bg.svg) center / cover;
  height: 100vh;
  min-height: 80rem;
  max-height: 120rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* warm peach glow top-right */
.home-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70rem;
  height: 70rem;
  background: radial-gradient(circle, rgba(250,212,192,0.16) 0%, transparent 65%);
  pointer-events: none;
}
/* cool blue glow bottom-left */
.home-hero::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -8%;
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgba(128,161,193,0.12) 0%, transparent 65%);
  pointer-events: none;
}
@media (max-width: 37.5em) {
  .home-hero { height: unset; min-height: unset; }
}

/* social rail */
.home-hero__socials {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 56.25em) { .home-hero__socials { display: none; } }
.home-hero__social { width: 5rem; }
.home-hero__social-icon-link {
  width: 100%; display: block;
  padding: 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.25s;
}
.home-hero__social-icon-link:hover { background: rgba(250,212,192,0.15); }
.home-hero__social-icon-link--bd-none { border-bottom: 0; }
.home-hero__social-icon {
  width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.25s;
}
.home-hero__social-icon-link:hover .home-hero__social-icon { opacity: 1; }

/* mouse scroll */
.home-hero__mouse-scroll-cont {
  position: absolute; bottom: 4%;
  left: 50%; transform: translateX(-50%);
}
@media (max-width: 37.5em) { .home-hero__mouse-scroll-cont { display: none; } }

/* center block */
.home-hero__content {
  position: relative; z-index: 2;
  max-width: 90rem; width: 92%;
  text-align: center;
}
@media (max-width: 37.5em) {
  .home-hero__content { padding: 19rem 2rem 13rem; }
}
.home-hero__info  { margin: 3rem auto 0; max-width: 70rem; }
.home-hero__cta   { margin-top: 5rem; text-align: center; }

/* mouse pill animation */
.mouse {
  width: 2.4rem; height: 3.8rem;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 2rem;
  position: relative;
}
.mouse::after {
  content: '';
  position: absolute;
  width: 0.5rem; height: 0.5rem;
  background: var(--peach);
  border-radius: 50%;
  top: 0.8rem; left: 50%;
  transform: translateX(-50%);
  animation: mouseScroll 1.6s ease infinite;
}
@keyframes mouseScroll {
  0%   { top: 0.8rem; opacity: 1; }
  100% { top: 2.2rem; opacity: 0; }
}

/* =============================================
   ABOUT
============================================= */
.about {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.about__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rem;
}
@media (max-width: 56.25em) {
  .about__content { grid-template-columns: 1fr; gap: 6rem; }
}
.about__content-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2.4rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--peach);
}
@media (max-width: 37.5em) { .about__content-title { font-size: 1.9rem; } }

.about__content-details-para {
  font-size: 1.65rem;
  color: var(--text-muted);
  max-width: 60rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}
.about__content-details-para--hl { font-weight: 700; margin: 0 2px; }
.about__content-details-para:last-child { margin-bottom: 4rem; }

/* =============================================
   BENTO GRID SYSTEM
============================================= */

/* section wrappers */
#ai-automation {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
#mobile-projects {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* section heading overrides (light bg, normal color) */
#ai-automation .heading-sec__main,
#mobile-projects .heading-sec__main {
  color: var(--text);
}
#ai-automation .heading-sec__sub,
#mobile-projects .heading-sec__sub {
  color: var(--text-muted);
}

/* --- Grid containers --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

/* 2-column variant (mobile projects) */
.bento-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* --- Card --- */
.bento-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--peach);
}

/* large card — spans 2 of 3 columns */
.bento-card--lg   { grid-column: span 2; }
/* full card — spans all 2 columns in 2-col grid */
.bento-card--full { grid-column: 1 / -1; flex-direction: row; }

/* --- Card image area --- */
.bento-card__img {
  width: 100%;
  height: 22rem;
  overflow: hidden;
  flex-shrink: 0;
}
.bento-card--lg   .bento-card__img { height: 28rem; }
.bento-card--full .bento-card__img { width: 46%; height: auto; min-height: 22rem; }
.bento-card__img--wide             { height: 26rem; }
.bento-card--full .bento-card__img--wide { height: auto; }

.bento-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}
.bento-card:hover .bento-card__img img { transform: scale(1.05); }

/* --- Card body --- */
.bento-card__body {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.2rem;
}

/* --- Tags --- */
.bento-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.bento-tag {
  font-size: 1.1rem;
  font-weight: 500;
  color: #4B5563;
  background: #F1F2F4;
  border: 1px solid #D1D5DB;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  letter-spacing: 0.2px;
}
/* mobile projects variant — same neutral, slight blue-gray tint */
.bento-tag--blue {
  color: #374151;
  background: #EEF0F4;
  border: 1px solid #C9CDD6;
}

/* --- Card title & desc --- */
.bento-card__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.bento-card__desc {
  font-size: 1.45rem;
  color: var(--text-muted);
  line-height: 1.78;
  flex: 1;
}

/* --- Bento CTA button --- */
.bento-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--border-md);
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-sm);
  transition: var(--transition);
  align-self: flex-start;
  letter-spacing: 0.2px;
  margin-top: auto;
}
.bento-btn:hover {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

/* --- Responsive bento --- */
@media (max-width: 56.25em) {
  .bento-grid        { grid-template-columns: repeat(2, 1fr); }
  .bento-card--lg    { grid-column: 1 / -1; }
  .bento-grid--2col  { grid-template-columns: 1fr; }
  .bento-card--full  { flex-direction: column; }
  .bento-card--full .bento-card__img { width: 100%; height: 22rem; }
}
@media (max-width: 37.5em) {
  .bento-grid       { grid-template-columns: 1fr; }
  .bento-card--lg   { grid-column: span 1; }
  .bento-card--full { flex-direction: column; }
  .bento-card--full .bento-card__img { width: 100%; height: 20rem; }
  .bento-card__img  { height: 18rem; }
  .bento-card__body { padding: 1.8rem; }
}

/* keep legacy .projects__row classes alive for any detail pages */
.projects__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 6rem;
  margin-bottom: 10rem;
  align-items: center;
}
@media (max-width: 56.25em) {
  .projects__row {
    grid-template-columns: 1fr;
    grid-gap: 3rem;
    margin-bottom: 7rem;
    text-align: center;
  }
}
.projects__row:last-child    { margin-bottom: 0; }
.projects__row-img-cont      { overflow: hidden; border-radius: var(--r-md); }
.projects__row-img           { width: 100%; display: block; object-fit: cover; }
.projects__row-content       { padding: 2rem 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
@media (max-width: 56.25em)  { .projects__row-content { align-items: center; } }
.projects__row-content-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 1.4rem; }
.projects__row-content-desc  { font-size: 1.65rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 2.5rem; }

/* =============================================
   CONTACT
============================================= */
.contact {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  top: -20%; right: -5%;
  width: 55rem; height: 55rem;
  background: radial-gradient(circle, rgba(250,212,192,0.1) 0%, transparent 65%);
  pointer-events: none;
}

.contact__form-container {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5rem;
  max-width: 68rem;
  width: 95%;
  border-radius: var(--r-xl);
  margin: 5rem auto 0 auto;
}
@media (max-width: 37.5em) { .contact__form-container { padding: 3rem; } }

.contact__form-field { margin-bottom: 3rem; }
@media (max-width: 37.5em) { .contact__form-field { margin-bottom: 2.5rem; } }

.contact__form-label {
  display: block;
  text-align: left;
  color: rgba(255,255,255,0.45);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.contact__form-input {
  width: 100%;
  padding: 1.5rem 2rem;
  color: #fff;
  font-size: 1.55rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  font-family: inherit;
  transition: border-color 0.25s;
}
.contact__form-input:focus { border-color: var(--peach); }
.contact__form-input::placeholder,
.contact__form-input::-webkit-input-placeholder,
.contact__form-input:-ms-input-placeholder,
.contact__form-input::-ms-input-placeholder,
.contact__form-input:-moz-placeholder,
.contact__form-input::-moz-placeholder {
  color: rgba(255,255,255,0.2); font-size: 1.5rem;
}

.contact__btn {
  width: 100%;
  padding: 1.7rem 4rem;
  font-size: 1.4rem;
  letter-spacing: 2px;
  border-radius: var(--r-sm);
}
@media (max-width: 37.5em) { .contact__btn { width: 100%; } }

/* =============================================
   PROJECT CASE STUDY PAGES
============================================= */
.project-cs-hero {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(17,24,39,0.96) 0%, rgba(17,24,39,0.85) 100%),
    url(../../assets/svg/common-bg.svg) center / cover;
  position: relative;
}
@media (max-width: 37.5em) { .project-cs-hero { height: unset; min-height: unset; } }
.project-cs-hero__content {
  padding: 25rem 0 17rem 0;
  max-width: 90rem; width: 92%; margin: auto;
}
@media (max-width: 37.5em) {
  .project-cs-hero__content { padding: 19rem 0 13rem 0; }
}
.project-cs-hero__info  { margin: 3rem auto 0; max-width: 80rem; }
.project-cs-hero__cta   { margin-top: 5rem; text-align: center; }

.project-details__content      { padding: 8rem 0; max-width: 90rem; margin: auto; }
.project-details__content-title {
  font-size: 2.5rem; font-weight: 700;
  margin-bottom: 3rem; color: var(--text);
  padding-left: 1.5rem;
  border-left: 3px solid var(--peach);
}
@media (max-width: 37.5em) { .project-details__content-title { font-size: 2.1rem; } }

.project-details__showcase-img-cont {
  width: 100%; margin-bottom: 6rem;
  border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-md);
}

/* =============================================
   VIDEO MODAL
============================================= */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.video-modal.is-open {
  display: flex;
}
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-modal__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  background: #000;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  animation: modal-in 0.28s var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.video-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.video-modal__close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}
.video-modal__iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =============================================
   DETAIL PAGE — Screenshot Carousel
============================================= */
/* Dirty-white background for all project detail pages */
body.detail-page {
  background: #ECEAE5;
}

.detail-carousel {
  margin-bottom: 6rem;
}

.detail-carousel__nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.detail-carousel__viewport {
  overflow: hidden;
  flex: 1;
  border-radius: var(--r-md);
}

.detail-carousel__track {
  display: flex;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.detail-carousel__slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.detail-carousel__slide img {
  max-width: min(400px, 80%);
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(17,24,39,0.18);
  display: block;
}

.detail-carousel__btn {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #C4C6CC;
  border: 1.5px solid #A8AAAF;
  color: #2D3340;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(17,24,39,0.12);
}

.detail-carousel__btn:hover:not(:disabled) {
  background: #9EA2AB;
  border-color: #858890;
  color: #111827;
  box-shadow: 0 4px 16px rgba(17,24,39,0.18);
  transform: scale(1.08);
}

.detail-carousel__btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.detail-carousel__counter {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 1.4rem;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (max-width: 37.5em) {
  .detail-carousel {
    padding: 2rem 1.2rem 1.6rem;
  }
  .detail-carousel__btn {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
  .detail-carousel__slide img {
    max-width: 90%;
  }
}

/* =============================================
   CAROUSEL — Mobile Projects
============================================= */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.carousel-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: var(--r-lg);
}

.carousel-track {
  display: flex;
  gap: 1.6rem;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

/* Each card takes exactly 1/3 of the viewport minus gaps */
.carousel-card {
  flex: 0 0 calc((100% - 3.2rem) / 3);
  min-width: 0;
}

/* Remove any residual bento-grid sizing overrides on carousel cards */
.carousel-card.bento-card--lg,
.carousel-card.bento-card--full {
  grid-column: unset;
  flex-direction: column;
}

/* Prev / Next arrow buttons — hidden on desktop (all 3 cards fit) */
.carousel-btn {
  display: none;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border-md);
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

/* Show on tablet + mobile where cards overflow */
@media (max-width: 56.25em) {
  .carousel-btn {
    display: flex;
  }
}

.carousel-btn:hover:not(:disabled) {
  background: var(--peach);
  border-color: var(--peach);
  color: var(--peach-dark);
  box-shadow: var(--shadow-md);
  transform: scale(1.08);
}

.carousel-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Tablet — show 2 cards */
@media (max-width: 56.25em) {
  .carousel-card {
    flex: 0 0 calc((100% - 1.6rem) / 2);
  }
}

/* Mobile — show 1 card, smaller buttons */
@media (max-width: 37.5em) {
  .carousel-card {
    flex: 0 0 100%;
  }
  .carousel-btn {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
}
.project-details__showcase-img { width: 100%; display: block; }
.project-details__content-main { width: 100%; max-width: 70rem; margin: auto; }
.project-details__desc         { margin: 0 0 7rem 0; }
.project-details__desc-para {
  font-size: 1.75rem; line-height: 1.9;
  color: var(--text-muted); margin-bottom: 2rem;
}
.project-details__tools-used      { margin: 0 0 7rem 0; }
.project-details__tools-used-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.project-details__tools-used-item {
  padding: 0.7rem 1.6rem; font-size: 1.3rem; font-weight: 500;
  background: #F1F2F4; color: #4B5563;
  border: 1px solid #D1D5DB; border-radius: 50px;
}
.project-details__links          { margin: 0; }
.project-details__links-btn      { margin-right: 2rem; }
@media (max-width: 37.5em) {
  .project-details__links-btn { margin-right: 0; width: 70%; margin-bottom: 2rem; text-align: center; }
  .project-details__links-btn:last-child { margin: 0; }
}

/* =============================================
   FOOTER
============================================= */
.main-footer {
  background: var(--dark-2);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.main-footer__upper {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  padding: 7rem 0;
}
@media (max-width: 56.25em) {
  .main-footer__upper { flex-direction: column; padding: 5rem 0; gap: 4rem; }
}
.main-footer__heading-sm {
  color: rgba(255,255,255,0.3);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 2rem;
}
.main-footer__social-cont { display: flex; gap: 1.5rem; align-items: center; }
.main-footer__icon {
  width: 2.4rem;
  filter: brightness(0) invert(1);
  opacity: 0.38;
  transition: var(--transition);
}
.main-footer__icon:hover { opacity: 1; transform: translateY(-3px); }
.main-footer__row-2      { max-width: 46rem; }
.main-footer__short-desc {
  color: rgba(255,255,255,0.33);
  font-size: 1.55rem;
  line-height: 1.85;
  margin-top: 1rem;
}
.main-footer__lower {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 2.8rem 0;
  font-size: 1.35rem;
  color: rgba(255,255,255,0.22);
  text-align: center;
}
.main-footer__lower a { color: var(--peach); font-weight: 600; }
.main-footer__lower a:hover { opacity: 0.8; }