/**
* Portfolio — Lucas Guasso
* Based on FolioOne by BootstrapMade.com (https://bootstrapmade.com/license/)
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #1a1410;
  /* Background color for the entire website, including individual sections */
  --default-color: #f7f2e7;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ff6b35;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #251f14;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;
  /* The default color of the main navmenu links */
  --nav-hover-color: #ff6b35;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #3d3021;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #1a0f05;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #f7f2e7;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ff6b35;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #271e14;
  --surface-color: #3a2b1f;
}

.dark-background {
  --background-color: #140f0a;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #21170f;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* ----- Case study detail page ----- */
.portfolio-details-page .project-tagline {
  font-size: var(--text-base);
  opacity: .8;
  margin-bottom: 18px;
  line-height: var(--leading-normal);
}
.portfolio-details-page .project-features {
  margin-top: 32px;
}
.portfolio-details-page .project-features h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  margin-bottom: 16px;
}
.portfolio-details-page .project-features h3 i {
  color: var(--accent-color);
}

/* ----- Case study detail: feature list 2-column + metric cards ----- */
.feature-list.feature-list-2col {
  list-style: none;
  padding-left: 0;
  margin: 0;
  column-count: 2;
  column-gap: 24px;
}
@media (max-width: 575.98px) {
  .feature-list.feature-list-2col { column-count: 1; }
}
.feature-list.feature-list-2col li {
  break-inside: avoid;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.feature-list.feature-list-2col li i {
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 3px;
}

.project-metrics .metric-card {
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
  height: 100%;
}
.project-metrics .metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--accent-color);
  line-height: var(--leading-tight);
}
.project-metrics .metric-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  opacity: .75;
  margin-top: 4px;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
/* Mobile Overflow Fix - Prevent horizontal scrolling on all devices */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 95% 70% at -12% 8%, color-mix(in srgb, var(--accent-color), transparent 94%), transparent 68%),
    radial-gradient(ellipse 80% 64% at 112% 20%, color-mix(in srgb, var(--theme-secondary-color, var(--accent-color)), transparent 96%), transparent 72%),
    radial-gradient(ellipse 70% 55% at 72% 112%, color-mix(in srgb, #8a4b28, transparent 95%), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--background-color), #24170f 8%) 0%, var(--background-color) 52%, color-mix(in srgb, var(--background-color), #2a160d 7%) 100%);
  background-attachment: fixed;
  background-size: 180px 180px, cover, cover, cover, cover;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  font-family: var(--default-font);
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.main {
  padding-top: 70px;
}

/* Prevent nested scrolling on resume page */
.resume-page,
.resume-page body,
.resume-page .main,
.resume-page .resume,
.resume-page .container,
.resume-page .row,
.resume-page .col-lg-6 {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Responsive Media - Prevent overflow from images, videos, iframes */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
}

/* Prevent text overflow */
p,
h1,
h2,
h3,
h4,
h5,
h6,
pre {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: var(--color-error);
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: var(--weight-semi);
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: var(--color-success);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: var(--weight-semi);
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 28%);
  padding: 15px 0;
  transition: background-color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 96%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header .logo {
  line-height: 1;
}

.header .logo .brand-logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0;
}

.header .logo .sitename {
  font-size: var(--text-2xl);
  margin: 0;
  font-weight: var(--weight-regular);
  color: var(--heading-color);
  font-family: var(--heading-font, inherit);
}

.header .header-social-links {
  padding-right: 15px;
}

.header .header-social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding-left: 6px;
  display: inline-block;
  transition: var(--transition-base);
  font-size: var(--text-base);
}

.header .header-social-links a:hover {
  color: var(--default-color);
}

.header .header-social-links a i {
  line-height: 0px;
}

/* Language Switcher (compact dropdown) */
.header .language-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.header .language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 999px;
  color: var(--nav-color);
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: var(--transition-base);
}

.header .language-trigger:hover,
.header .language-trigger[aria-expanded="true"] {
  color: var(--nav-hover-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.header .language-trigger .bi-globe { font-size: 1rem; }
.header .language-trigger__caret {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.header .language-trigger[aria-expanded="true"] .language-trigger__caret {
  transform: rotate(180deg);
}

.header .language-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: color-mix(in srgb, var(--background-color), transparent 5%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.35));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
}

.header .language-menu[hidden] { display: none; }

.header .language-menu form { margin: 0; }

.header .language-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--nav-color);
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  text-align: left;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header .language-option:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--nav-hover-color);
}

.header .language-option.is-active {
  color: var(--accent-color);
  font-weight: var(--weight-semi);
}

.header .language-option__flag { font-size: 1.05rem; line-height: 1; }
.header .language-option__name { flex: 1; }
.header .language-option__check { font-size: 0.95rem; opacity: 0.8; }

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .header-social-links {
    order: 2;
  }

  .header .navmenu {
    order: 3;
  }

  .header .logo .brand-logo { height: 28px; }
  .header .logo .sitename { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  .header .language-menu { right: -8px; min-width: 200px; }
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  background-color: color-mix(in srgb, var(--background-color), transparent 8%);
  border-bottom-color: color-mix(in srgb, var(--accent-color), transparent 84%);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 28px 15px 0;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: var(--text-sm);
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: var(--weight-regular);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: var(--transition-base);
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: var(--text-xs);
    line-height: 0;
    margin-left: 5px;
    transition: var(--transition-base);
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all var(--transition-base);
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 25px;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: -5px;
    top: 130%;
    opacity: 0;
    transition: var(--transition-base);
    border-radius: var(--radius-sm);
    z-index: 99;
    box-shadow: var(--shadow-lg);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: var(--text-sm);
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: var(--text-xs);
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: var(--text-xl);
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color var(--transition-base);
  }

  .navmenu {
    padding: 0;
  }

  .navmenu > ul {
    list-style: none;
    position: fixed;
    top: 72px;
    right: 16px;
    left: 16px;
    padding: 8px 0;
    margin: 0;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity var(--duration-normal) var(--ease-default),
      transform var(--duration-normal) var(--ease-default),
      visibility 0s linear var(--duration-normal);
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 12px 20px;
    font-family: var(--nav-font);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: color var(--transition-base), background-color var(--transition-base);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: var(--text-xs);
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    padding: 8px 0;
    margin: 8px 20px;
    background-color: var(--nav-dropdown-background-color);
    border-radius: var(--radius-md);
  }

  .navmenu .dropdown > .dropdown-active {
    display: block;
  }

  /* Dim backdrop (no blur) — pseudo-element on body, below header so header stays readable */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-default);
    z-index: 996;
  }

  /* ---- Open state ---- */
  html.mobile-nav-active,
  body.mobile-nav-active {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-nav-active::after {
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: var(--accent-color);
    position: relative;
    z-index: 10000;
  }

  .mobile-nav-active .navmenu > ul {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity var(--duration-normal) var(--ease-default),
      transform var(--duration-normal) var(--ease-default),
      visibility 0s;
    touch-action: pan-y;
  }

  @media (prefers-reduced-motion: reduce) {
    .navmenu > ul,
    .mobile-nav-active .navmenu > ul,
    body::after {
      transition: opacity var(--duration-fast) var(--ease-default);
      transform: none;
    }
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: var(--text-sm);
  padding: 40px 0;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .legal-info {
  margin-top: 8px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.footer .legal-info .legal-label {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.footer .legal-info .legal-separator {
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.footer .social-links {
  margin-top: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 0 5px;
  transition: var(--transition-base);
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer .credits {
  margin-top: 10px;
  font-size: var(--text-sm);
  text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all var(--transition-slow);
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: var(--radius-full);
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-base);
}

.scroll-top i {
  font-size: var(--text-xl);
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--color-border);
}

.page-title .heading h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: transparent;
  padding: var(--section-padding) 0;
  scroll-margin-top: 100px;
}

section.light-background,
.section.light-background,
section.dark-background,
.section.dark-background {
  background-color: color-mix(in srgb, var(--background-color), transparent 12%);
}

.glass-card,
.glass-card-interactive {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: var(--space-6);
}

.glass-card-interactive {
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.glass-card-interactive:hover,
.glass-card-interactive:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: var(--section-padding);
  position: relative;
}

.section-title h2 {
  font-size: var(--text-hero);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--heading-color);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-tight);
}

.section-title p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 900px;
  margin: 0 auto;
  text-wrap: balance;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: var(--space-20) 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  --mx: 22%;
  --my: 38%;
  --spot-radius: 360px;
}

.hero-spotlight__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(247, 242, 231, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 242, 231, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(
    circle var(--spot-radius) at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.08) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--spot-radius) at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.08) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-spotlight__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle var(--spot-radius) at var(--mx) var(--my),
    color-mix(in srgb, var(--accent-color, #ff6b35), transparent 82%) 0%,
    color-mix(in srgb, var(--accent-color, #ff6b35), transparent 94%) 45%,
    transparent 75%
  );
  mix-blend-mode: screen;
}

@media (max-width: 768px) {
  .hero-spotlight { --spot-radius: 240px; }
  .hero-spotlight__grid { background-size: 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spotlight__grid { opacity: 0.5; }
}

.hero .hero-content h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.hero .hero-content h1 .highlight {
  color: var(--accent-color);
  position: relative;
}

.hero .hero-content h1 .highlight::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 50%));
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: var(--text-3xl);
  }
}

.hero .hero-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-8);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .hero-content h2 .typed {
  color: var(--accent-color);
  font-weight: var(--weight-semi);
}

@media (max-width: 768px) {
  .hero .hero-content h2 {
    font-size: var(--text-lg);
  }
}

.hero .hero-content p {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-10);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.hero .hero-content .tagline-explanation {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-style: italic;
}

.hero .hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Hero buttons inherit from global rules — no section overrides needed. */

/* Global Bootstrap button override: force .btn-primary /
   .btn-outline-primary to use the site accent color instead of
   Bootstrap's default blue. Section-scoped overrides below still win
   where they exist. */
.btn-primary {
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-color: var(--contrast-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color), black 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color), black 15%);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent-color), black 25%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color), black 25%);
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-disabled-bg: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-btn-disabled-color: var(--contrast-color);
  padding: 10px 24px;
  font-weight: var(--weight-semi);
  border-radius: var(--radius-md);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  padding: 10px 24px;
  font-weight: var(--weight-semi);
  border-radius: var(--radius-md);
}

/* Bootstrap focus ring also defaults to blue — align with accent. */
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* Global button variants — shared across hero, about, contact, etc.
   4 official variants: btn-primary, btn-outline-primary, btn-ghost, link-underline
   2 sizes: btn-sm, (default), btn-lg */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semi);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  color: var(--accent-color);
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-focus);
}

.btn-ghost:active {
  transform: translateY(0);
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-weight: var(--weight-semi);
  color: var(--accent-color);
  text-decoration: none;
  background: transparent;
  border: none;
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: color-mix(in srgb, var(--accent-color), transparent 40%);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

.link-underline:hover,
.link-underline:focus-visible {
  color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

/* Button sizes */
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }

/* Button states */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--contrast-color);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
  to { transform: rotate(360deg); }
}

/* Hover lift for all buttons */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

/* Hero buttons inherit from global rules — no section overrides needed. */

@media (max-width: 576px) {
  .hero .hero-actions {
    flex-direction: column;
  }

  .hero .hero-actions .btn {
    text-align: center;
  }
}

.hero .social-links {
  display: flex;
  gap: 1rem;
}

.hero .social-links a {
  width: 45px;
  height: 45px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
  font-size: var(--text-lg);
  transition: all var(--transition-base);
}

.hero .social-links a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.hero .hero-image {
  position: relative;
}

.hero .hero-image .image-wrapper {
  position: relative;
  max-width: 450px;
  margin: 0 auto;
}

.hero .hero-image .image-wrapper img {
  border-radius: var(--radius-xl);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--default-color), transparent 95%);
  transition: transform 0.3s ease;
}

.hero .hero-image .image-wrapper img:hover {
  transform: scale(1.02);
}

.hero .hero-image .floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hero .hero-image .floating-elements .floating-card {
  position: absolute;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--background-color), var(--accent-color) 10%),
      color-mix(in srgb, var(--background-color), black 10%)
    );
  border: 0;
  padding: 15px 20px;
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 14px 32px rgba(0, 0, 0, .40),
    0 0 24px color-mix(in srgb, var(--accent-color), transparent 84%);
  backdrop-filter: blur(4px) saturate(108%);
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  color: var(--contrast-color);
  font-weight: var(--weight-bold);
  animation: float 3s ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.hero .hero-image .floating-elements .floating-card span {
  color: var(--contrast-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}

.hero .hero-image .floating-elements .floating-card i {
  font-size: var(--text-xl);
  color: color-mix(in srgb, var(--accent-color), white 18%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

.hero .hero-image .floating-elements .floating-card.design {
  top: 10%;
  right: -10%;
  animation-delay: 0s;
}

.hero .hero-image .floating-elements .floating-card.code {
  bottom: 30%;
  left: -15%;
  animation-delay: 1s;
}

.hero .hero-image .floating-elements .floating-card.creativity {
  top: 60%;
  right: -5%;
  animation-delay: 2s;
}

@media (max-width: 992px) {
  .hero .hero-image .floating-elements .floating-card {
    display: none;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@media (max-width: 992px) {
  .hero .hero-content {
    text-align: center;
    margin-bottom: 3rem;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .intro-content .eyebrow {
  display: inline-block;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.about .intro-content .headline {
  font-family: var(--heading-font);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  margin: 0 0 var(--space-6) 0;
}

.about .intro-content .lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin-bottom: var(--space-6);
}

.about .intro-content p {
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  color: color-mix(in srgb, var(--default-color), transparent 5%);
}

.about .intro-content .cta-group {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* About buttons inherit from global rules — no section overrides needed. */

.about .profile-figure {
  margin: 0;
}

.about .profile-figure .profile-photo {
  width: 88%;
  max-width: 440px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(0);
  transition: transform var(--transition-base);
}

.about .profile-figure .profile-caption {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about .profile-figure .profile-caption .meta {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .profile-figure .profile-caption .meta .funfact {
  font-size: var(--text-sm);
  margin-top: 4px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.about .profile-figure:hover .profile-photo {
  transform: translateY(-4px);
}

.about .skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.skill-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
}

.skill-card i {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-4);
  display: inline-block;
}

.skill-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  font-weight: var(--weight-medium);
}

.skill-card p {
  margin: 0;
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.skill-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-mid);
  box-shadow: var(--shadow-lg);
}

/* Skills grid layout (about page) */
.about .skills-grid .skill-card {
  flex: 1 1 calc(50% - 0.75rem);
}

@media (min-width: 768px) {
  .about .skills-grid .skill-card {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

@media (min-width: 992px) {
  .about .skills-grid .skill-card {
    flex: 1 1 calc(25% - 1.125rem);
  }
}

.about .timeline-item {
  position: relative;
  padding-left: 26px;
}

.about .timeline-item time {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.about .timeline-item h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--space-1);
}

.about .timeline-item p {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.about .timeline-item .dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--accent-color);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.about .personal-quote {
  padding: 24px 0;
}

.about .personal-quote p {
  font-family: var(--heading-font);
  font-weight: var(--weight-light);
  font-size: clamp(20px, 3vw, 28px);
  line-height: var(--leading-snug);
  color: color-mix(in srgb, var(--default-color), transparent 5%);
  margin: 0 auto;
  max-width: 800px;
}

.about .fact-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  cursor: default;
  transition: var(--transition-base);
  white-space: nowrap;
}

.about .fact-pill i {
  color: var(--accent-color);
}

.about .fact-pill span {
  font-size: var(--text-sm);
}

.about .fact-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 92%);
}

.about .fact-pill:focus-within {
  box-shadow: var(--shadow-focus);
}

@media (max-width: 992px) {
  .about .profile-figure {
    text-align: center !important;
  }

  .about .profile-figure .profile-photo {
    width: 72%;
  }

  .about .intro-content .cta-group {
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  .about .profile-figure .profile-photo {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
/* Skill card progress bar variant (tools section) */
.skill-card .progress {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: var(--radius-pill);
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
}

.skill-card .progress .progress-bar {
  background-color: var(--accent-color);
  height: 100%;
  position: relative;
  border-radius: var(--radius-pill);
  transition: 0.9s;
  width: 1px;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .avatars {
  position: relative;
}

.stats .avatars img {
  width: 60px;
  height: 60px;
  border: 3px solid var(--accent-color);
  margin-right: -15px;
  transition: transform 0.3s ease;
}

.stats .avatars img:hover {
  transform: translateY(-5px);
  z-index: 2;
}

.stats .counters h2 {
  color: var(--heading-color);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  margin-bottom: 10px;
}

.stats .counters h2 span {
  display: inline-block;
}

.stats .counters p {
  color: var(--default-color);
  font-size: var(--text-md);
  margin: 0;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .stats .row {
    text-align: center;
  }

  .stats .avatars {
    justify-content: center;
    margin-bottom: 40px;
  }

  .stats .counters h2 {
    font-size: var(--text-3xl);
  }

  .stats .counters p {
    font-size: var(--text-base);
  }

  .stats .counters .col-md-4 {
    margin-bottom: 30px;
  }

  .stats .counters .col-md-4:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 576px) {
  .stats {
    padding: var(--section-padding) 0;
  }

  .stats .avatars {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stats .avatars img {
    margin: 0 -8px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 28px 26px;
  height: 100%;
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.testimonials .testimonial-item:hover,
.testimonials .testimonial-item:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.testimonials .testimonial-item .testimonial-content {
  border-left: 3px solid var(--accent-color);
  padding-left: 30px;
}

.testimonials .testimonial-item .testimonial-img {
  border-radius: var(--radius-full);
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: var(--text-lg);
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: var(--color-warning);
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: var(--text-xl);
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
}

.testimonials .testimonial-quote {
  font-style: italic;
  line-height: var(--leading-relaxed);
  opacity: .92;
}

.testimonials .testimonial-author {
  display: flex;
  align-items: center;
  margin-top: var(--space-3);
}

.testimonials .testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-right: var(--space-4);
}

.testimonials .testimonial-name {
  font-weight: var(--weight-semi);
}

.testimonials .testimonial-role {
  font-size: var(--text-sm);
  opacity: .7;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-item {
  margin-bottom: 3rem;
}

.resume .resume-item .resume-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  position: relative;
  color: var(--heading-color);
}

.resume .resume-item .resume-title::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.resume .resume-item .resume-content {
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.resume .resume-item article {
  position: relative;
  margin-bottom: 2.5rem;
}

.resume .resume-item article::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  left: -1.8rem;
  top: 0.25rem;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

.resume .resume-item article h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.resume .resume-item article h5 {
  font-size: var(--text-base);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  padding: 0.375rem 0.75rem;
  display: inline-block;
  font-weight: var(--weight-semi);
  margin: 0.5rem 0;
  color: var(--accent-color);
  border-radius: var(--radius-sm);
}

.resume .resume-item article .institution,
.resume .resume-item article .company {
  font-size: var(--text-base);
  margin-bottom: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.resume .resume-item article p {
  margin-bottom: 1rem;
}

.resume .resume-item article ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.resume .resume-item article ul li {
  padding-bottom: 0.75rem;
  position: relative;
}

.resume .resume-item article ul li:last-child {
  padding-bottom: 0;
}

.resume .skill-item {
  margin-bottom: 2rem;
}

.resume .skill-item h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.resume .skill-item .progress {
  height: 0.75rem;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 1rem;
  overflow: visible;
}

.resume .skill-item .progress .progress-bar {
  background-color: var(--accent-color);
  position: relative;
  border-radius: 1rem;
  width: 0;
  transition: width 1s ease;
}

.resume .skill-item .progress .progress-bar::after {
  content: attr(aria-valuenow) "%";
  position: absolute;
  right: 0;
  top: -1.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .resume .resume-item {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .resume .resume-content {
    padding-left: 1rem !important;
  }

  .resume article::before {
    left: -1.5rem !important;
  }
}

/*--------------------------------------------------------------
# Process Section
--------------------------------------------------------------*/
.process-section .process-list {
  position: relative;
  padding-left: 32px;
  margin: 0;
  list-style: none;
}

.process-section .process-step {
  position: relative;
  margin-bottom: 36px;
}

.process-section .process-step::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--background-color);
  border: 3px solid var(--accent-color);
}

.process-section .process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -21px;
  top: 30px;
  bottom: -42px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-color), rgba(255,107,53,.15));
}

.process-section .step-number {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.process-section .step-title {
  font-size: var(--text-xl);
  margin: 0 0 8px;
}

.process-section .step-summary {
  font-size: var(--text-base);
  opacity: .85;
  margin: 0 0 10px;
}

.process-section .step-description {
  font-size: var(--text-sm);
  opacity: .75;
  margin: 0;
  line-height: var(--leading-relaxed);
}

.process-section .step-icon {
  display: inline-block;
  margin-right: 10px;
  color: var(--accent-color);
  font-size: 20px;
  vertical-align: middle;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  display: flex;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  backdrop-filter: var(--glass-blur);
}

.services .service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--accent-color);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.services .service-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.services .service-item:hover::before {
  transform: scaleY(1);
}

.services .service-item:hover .service-icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotateY(180deg);
}

.services .service-item:hover .service-icon i {
  transform: rotateY(180deg);
}

.services .service-item:hover .service-link i {
  transform: translateX(5px);
}

.services .service-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  transition: all var(--transition-slow);
}

.services .service-icon i {
  font-size: var(--text-2xl);
  transition: transform 0.5s ease;
}

.services .service-content {
  flex-grow: 1;
}

.services .service-content h3 {
  font-size: var(--text-xl);
  margin-bottom: 1rem;
  font-weight: var(--weight-bold);
  color: var(--heading-color);
}

.services .service-content p {
  margin-bottom: 1.25rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.services .service-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transition: color 0.3s ease;
}

.services .service-link span {
  margin-right: 0.5rem;
}

.services .service-link i {
  transition: transform 0.3s ease;
}

.services .service-link:hover,
.services .service-link:focus-visible {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

@media (max-width: 767.98px) {
  .services .service-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .services .service-icon {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
  }

  .services .service-icon i {
    font-size: var(--text-xl);
  }

  .services .service-content h3 {
    font-size: var(--text-lg);
    margin-bottom: 0.75rem;
  }

  .services .service-content p {
    margin-bottom: 1rem;
    font-size: var(--text-base);
  }
}

@media (max-width: 575.98px) {
  .services .service-item {
    flex-direction: column;
    text-align: center;
  }

  .services .service-item::before {
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .services .service-item:hover::before {
    transform: scaleX(1);
  }

  .services .service-icon {
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .services .service-link {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-hero {
  margin-bottom: 4rem;
}

.service-details .service-hero .service-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-details .service-hero .service-meta .service-category {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

.service-details .service-hero .service-meta .reading-time {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
}

.service-details .service-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  margin-bottom: 1.5rem;
  color: var(--heading-color);
  letter-spacing: var(--tracking-tight);
}

.service-details .service-hero .service-description {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-weight: var(--weight-light);
  margin: 0;
}

.service-details .service-visual {
  margin-bottom: 4rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.service-details .service-visual img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-details .service-visual img:hover {
  transform: scale(1.02);
}

.service-details .service-narrative {
  margin-bottom: 5rem;
}

.service-details .service-narrative h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  margin-bottom: 2rem;
  color: var(--heading-color);
  letter-spacing: var(--tracking-tight);
}

.service-details .service-narrative p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin-bottom: 2rem;
  color: var(--default-color);
  font-weight: var(--weight-light);
}

.service-details .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.service-details .benefits-grid .benefit-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-align: center;
  padding: 2rem;
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.service-details .benefits-grid .benefit-card:hover,
.service-details .benefits-grid .benefit-card:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.service-details .benefits-grid .benefit-card .benefit-icon {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all var(--transition-base);
}

.service-details .benefits-grid .benefit-card .benefit-icon i {
  font-size: var(--text-xl);
  color: var(--accent-color);
}

.service-details .benefits-grid .benefit-card:hover .benefit-icon {
  background: var(--accent-color);
  transform: translateY(-2px);
}

.service-details .benefits-grid .benefit-card:hover .benefit-icon i {
  color: var(--contrast-color);
}

.service-details .benefits-grid .benefit-card h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.service-details .benefits-grid .benefit-card p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.service-details .timeline-section {
  margin-bottom: 4rem;
}

.service-details .timeline-section h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  margin-bottom: 3rem;
  color: var(--heading-color);
  letter-spacing: var(--tracking-tight);
}

.service-details .timeline-section .timeline {
  position: relative;
}

.service-details .timeline-section .timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
}

.service-details .timeline-section .timeline .timeline-item {
  position: relative;
  padding-left: 80px;
  margin-bottom: 3rem;
}

.service-details .timeline-section .timeline .timeline-item:last-child {
  margin-bottom: 0;
}

.service-details .timeline-section .timeline .timeline-item .timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.service-details .timeline-section .timeline .timeline-item .timeline-marker span {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--accent-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: 0.5rem;
  color: var(--default-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content small {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.service-details .service-sidebar {
  padding-left: 2rem;
}

@media (max-width: 992px) {
  .service-details .service-sidebar {
    padding-left: 0;
    margin-top: 4rem;
  }
}

.service-details .overview-card,
.service-details .success-story,
.service-details .consultation-form {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  transition: all var(--transition-base);
}

.service-details .overview-card:hover,
.service-details .success-story:hover,
.service-details .consultation-form:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.service-details .overview-card .overview-header h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  margin-bottom: 2rem;
  color: var(--heading-color);
}

.service-details .overview-card .overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service-details .overview-card .overview-stats .stat-item {
  text-align: center;
}

.service-details .overview-card .overview-stats .stat-item .stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.service-details .overview-card .overview-stats .stat-item .stat-label {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.service-details .overview-card .overview-details {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-top: 1.5rem;
}

.service-details .overview-card .overview-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.service-details .overview-card .overview-details .detail-row:last-child {
  margin-bottom: 0;
}

.service-details .overview-card .overview-details .detail-row .detail-label {
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: var(--weight-regular);
}

.service-details .overview-card .overview-details .detail-row .detail-value {
  font-size: var(--text-base);
  color: var(--heading-color);
  font-weight: var(--weight-medium);
}

.service-details .success-story .story-quote p {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-style: italic;
  margin-bottom: 2rem;
}

.service-details .success-story .story-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-details .success-story .story-author .author-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.service-details .success-story .story-author .author-details h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-bottom: 0.25rem;
  color: var(--heading-color);
}

.service-details .success-story .story-author .author-details span {
  display: block;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.25rem;
}

.service-details .success-story .story-author .author-details small {
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.service-details .success-story .story-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .success-story .story-metrics .metric {
  text-align: center;
}

.service-details .success-story .story-metrics .metric .metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--accent-color);
  display: block;
  margin-bottom: 0.25rem;
}

.service-details .success-story .story-metrics .metric .metric-label {
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.service-details .consultation-form .form-header {
  margin-bottom: 2rem;
}

.service-details .consultation-form .form-header h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.service-details .consultation-form .form-header p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.service-details .consultation-form .form-group {
  margin-bottom: 1.5rem;
}

.service-details .consultation-form .form-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  transition: all var(--transition-base);
  background: transparent;
}

.service-details .consultation-form .form-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.service-details .consultation-form input[type=text],
.service-details .consultation-form input[type=email],
.service-details .consultation-form input[type=tel],
.service-details .consultation-form select,
.service-details .consultation-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: var(--text-sm);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.service-details .consultation-form input[type=text]:focus,
.service-details .consultation-form input[type=email]:focus,
.service-details .consultation-form input[type=tel]:focus,
.service-details .consultation-form select:focus,
.service-details .consultation-form textarea:focus {
  border-color: var(--accent-color);
}

.service-details .consultation-form input[type=text]::placeholder,
.service-details .consultation-form input[type=email]::placeholder,
.service-details .consultation-form input[type=tel]::placeholder,
.service-details .consultation-form select::placeholder,
.service-details .consultation-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* .btn-consultation removed — uses global .btn.btn-primary.btn-lg.w-100 */

@media (max-width: 768px) {
  .service-details .service-hero h1 {
    font-size: var(--text-3xl);
  }

  .service-details .service-hero .service-description {
    font-size: var(--text-md);
  }

  .service-details .service-visual img {
    height: 250px;
  }

  .service-details .benefits-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-details .timeline-section .timeline::before {
    left: 20px;
  }

  .service-details .timeline-section .timeline .timeline-item {
    padding-left: 60px;
  }

  .service-details .timeline-section .timeline .timeline-item .timeline-marker {
    width: 40px;
    height: 40px;
  }

  .service-details .timeline-section .timeline .timeline-item .timeline-marker span {
    font-size: var(--text-base);
  }

  .service-details .overview-card .overview-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}

.portfolio .portfolio-filters li {
  padding: 8px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-filters li.filter-active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/* Tab-style portfolio category filters */
.portfolio .portfolio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}

.portfolio .portfolio-filter {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  cursor: pointer;
  text-decoration: none;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.portfolio .portfolio-filter:hover {
  color: var(--color-text);
}

.portfolio .portfolio-filter.active {
  color: var(--accent-color);
  font-weight: var(--weight-semi);
  border-bottom-color: var(--accent-color);
}

.portfolio .portfolio-card {
  position: relative;
  cursor: pointer;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  backdrop-filter: var(--glass-blur);
}

/* Clickable card overlay — full-surface anchor behind visible content */
.portfolio .portfolio-card .card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}

/* Inner content above overlay; pointer-events off so clicks pass through */
.portfolio .portfolio-card .portfolio-info,
.portfolio .portfolio-card .portfolio-img {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Real links inside re-enable pointer-events */
.portfolio .portfolio-card .portfolio-info a,
.portfolio .portfolio-card .portfolio-img a {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.portfolio .portfolio-card .portfolio-card-footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 32px;
}

.portfolio .portfolio-card .card-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.12);
  background: var(--color-surface);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.4);
  font-size: 14px;
  white-space: nowrap;
  transition: padding .35s var(--ease-default),
              border-radius .35s var(--ease-default),
              border-color .25s ease,
              color .25s ease;
}

.portfolio .portfolio-card:hover .card-arrow,
.portfolio .portfolio-card:focus-within .card-arrow {
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.portfolio .portfolio-card .card-arrow .arrow-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .35s var(--ease-default),
              opacity .25s ease .05s,
              margin .35s var(--ease-default);
  font-size: 13px;
  font-weight: 500;
}

.portfolio .portfolio-card:hover .card-arrow .arrow-label,
.portfolio .portfolio-card:focus-within .card-arrow .arrow-label {
  max-width: 120px;
  opacity: 1;
  margin-right: 6px;
}

.portfolio .portfolio-card:hover {
  transform: translateY(-3px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-md);
}

.portfolio .portfolio-card:hover .portfolio-img img {
  transform: scale(1.03);
}

.portfolio .portfolio-card .portfolio-img {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-card .portfolio-img img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  opacity: 0;
  transition: all var(--transition-base);
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay a {
  width: 45px;
  height: 45px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  transition: all var(--transition-base);
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay a:hover {
  background-color: color-mix(in srgb, var(--accent-color), #fff 20%);
  transform: translateY(-5px);
}

.portfolio .portfolio-card .portfolio-info {
  padding: 20px;
}

.portfolio .portfolio-card .portfolio-info h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: 5px;
  color: var(--heading-color);
}

.portfolio .portfolio-card .portfolio-info p {
  font-size: var(--text-sm);
  color: var(--default-color);
  margin-bottom: 10px;
}

.portfolio .portfolio-card .portfolio-info .portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio .portfolio-card .portfolio-info .portfolio-tags span {
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-hover);
  border: 1px solid var(--glass-border-hover);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* .portfolio .btn-primary removed — uses global .btn-primary override (line ~986) */

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details {
  --section-spacing: 2.5rem;
}

.portfolio-details .portfolio-details-media {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image {
  margin-bottom: 1rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-wrapper {
  height: auto !important;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-slide img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev {
  background-color: var(--contrast-color);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:after {
  font-size: var(--text-base);
  color: var(--accent-color);
  font-weight: bold;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover:after {
  color: var(--contrast-color);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img {
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.portfolio-details .tech-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.portfolio-details .tech-stack-badges span {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-xl);
  background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
  color: var(--heading-color);
  transition: all var(--transition-base);
}

.portfolio-details .tech-stack-badges span:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 70%);
  transform: translateY(-2px);
}

.portfolio-details .portfolio-details-content {
  padding: 0 0 0 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-details .portfolio-details-content .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .badge-wrapper .project-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
}

.portfolio-details .portfolio-details-content .project-meta .date-client {
  display: flex;
  gap: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item i {
  margin-right: 6px;
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-title {
  font-size: var(--text-2xl);
  margin-bottom: 1rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--heading-color);
}

.portfolio-details .portfolio-details-content .project-website {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-website i {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-right: 8px;
}

.portfolio-details .portfolio-details-content .project-website a {
  font-weight: var(--weight-medium);
  transition: all var(--transition-base);
}

.portfolio-details .portfolio-details-content .project-website a:hover {
  letter-spacing: var(--tracking-wide);
}

.portfolio-details .portfolio-details-content .project-overview {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-overview .lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  margin-bottom: 10px;
  overflow: hidden;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button {
  padding: 1rem;
  font-weight: var(--weight-semi);
  font-size: var(--text-base);
  color: var(--heading-color);
  background-color: transparent;
  border-radius: var(--radius-md) !important;
  box-shadow: none;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: rgba(255, 255, 255, .03);
  color: var(--accent-color);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) i {
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button::after {
  /* Force a high-contrast white chevron — Bootstrap's default SVG is dark
     and disappears against the dark accordion background. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-size: 18px;
  width: 18px;
  height: 18px;
  opacity: .9;
  transition: transform .25s ease, opacity .25s ease;
}
.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:hover::after {
  opacity: 1;
}
.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  /* Accent-colored chevron when expanded. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6b35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  opacity: 1;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button i {
  font-size: var(--text-md);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body {
  padding: 1.25rem 1rem;
  background-color: rgba(255, 255, 255, .02);
  border-top: 1px solid var(--color-border);
  color: #ffffff;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body p,
.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body li,
.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body span {
  margin-bottom: 0;
  color: #ffffff;
  line-height: var(--leading-normal);
}

.portfolio-details .portfolio-details-content .project-features {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-features h3 {
  display: flex;
  align-items: center;
  font-size: var(--text-lg);
  margin-bottom: 1.2rem;
}

.portfolio-details .portfolio-details-content .project-features h3 i {
  margin-right: 10px;
  color: var(--accent-color);
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .project-features .feature-list {
  list-style: none;
  padding-left: 0;
}

.portfolio-details .portfolio-details-content .project-features .feature-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.portfolio-details .portfolio-details-content .project-features .feature-list li i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project {
  padding: 12px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: all var(--transition-base);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project {
  padding: 12px 28px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 90%);
  color: var(--heading-color);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project i {
  transition: transform 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 80%);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover i {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .portfolio-details .portfolio-details-content {
    padding-left: 1rem;
  }
}

@media (max-width: 991.98px) {
  .portfolio-details .portfolio-details-content {
    padding: 2rem 0 0 0;
  }

  .portfolio-details .portfolio-details-content .cta-buttons {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .portfolio-details .project-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .portfolio-details .project-meta .date-client {
    flex-direction: column;
    gap: 0.5rem;
  }

  .portfolio-details .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .portfolio-details .cta-buttons a {
    width: 100%;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .contact-intro {
  max-width: 720px;
  margin: var(--space-10) auto var(--space-3);
}

.contact .contact-intro h3 {
  color: var(--contrast-color);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.contact .contact-intro p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.contact .contact-methods-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-10);
}

/* When intro sits directly above the chips, drop the chips' top gap
   so they read as one unit with the intro. */
.contact .contact-intro + .contact-methods-row {
  margin-top: 0;
}

.contact .contact-methods-row .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Unified action shell — hosts tabs (Book / Message) or a single panel */
.contact-shell {
  max-width: 1080px;
  margin-inline: auto;
}

/*
 * Tab pills (Book / Message). Visual language mirrors .resume-view-toggle
 * — minimal underline indicator, accent on hover/active. Tabs sit directly
 * on the section background; no card chrome.
 */
.contact-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-8) 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  border: 0;
}

.contact-tabs .nav-item {
  margin: 0;
}

.contact-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  background-color: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border: none;
  position: relative;
}

.contact-tabs .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: width var(--transition-base);
}

.contact-tabs .nav-link:hover,
.contact-tabs .nav-link:focus-visible {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.contact-tabs .nav-link.active {
  color: var(--accent-color);
  background-color: transparent;
  font-weight: var(--weight-semi);
}

.contact-tabs .nav-link.active::after {
  width: 60%;
}

.contact-tabs .nav-link i {
  font-size: var(--text-base);
}

@media (max-width: 480px) {
  .contact-tabs {
    gap: var(--space-1);
  }
  .contact-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }
  .contact-tabs .nav-link {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
  }
}

/* Shared header used by both panels (Book and Message) */
.contact-panel__header {
  text-align: center;
  margin: 0 auto var(--space-6);
  max-width: 720px;
}

.contact-panel__header h3 {
  color: var(--contrast-color);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.contact-panel__header p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

/*
 * Booking embed surface — provider snippet is rendered as-is. The wrap
 * forces a light color scheme so Google Bookings / Calendly / Cal.com
 * chrome reads correctly inside our dark theme; the !important rules
 * override the provider's inline width/border for consistent sizing.
 */
.booking-frame-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #ffffff;
  color-scheme: light;
  box-shadow: var(--shadow-sm);
}

/* Respect the height attribute from Google's embed snippet — the provider
   sizes the iframe to fit its widget. We only normalize width, border, and
   color-scheme so the white widget reads correctly on the dark theme. */
.booking-frame-wrap iframe {
  width: 100% !important;
  border: 0 !important;
  display: block;
  background: #ffffff;
  color-scheme: light;
}

/* Form inputs inside the shell (was scoped to .contact .contact-form) */
.contact-shell .form-control,
.contact-shell .form-select {
  padding: 0.875rem 1.25rem;
  border-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--default-color);
}

.contact-shell .form-control:focus,
.contact-shell .form-select:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.contact-shell .form-control::placeholder,
.contact-shell .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/* Submit button — right-aligned to the form column so it "ends" the form
   in the natural reading direction without competing for center attention. */
.contact-form-submit-row {
  display: flex;
  justify-content: flex-end;
}

.contact-form-submit {
  margin-top: var(--space-2);
}

.contact-form-submit:disabled,
.contact-form-submit.is-submitting {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form-col is the positioning anchor for the AJAX success overlay below. */
.contact-form-col {
  position: relative;
}

/* Success overlay — fades in over the form column on AJAX submit success,
   shows a checkmark + the server's success message in the site's accent
   language, then fades out as the form returns to a clean state. Mirrors
   the visual feedback rhythm of the contact-method copy buttons. */
.contact-form-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface), transparent 4%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 4;
}

.contact-form-overlay.is-visible {
  opacity: 1;
}

.contact-form-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
  transform: scale(0.92);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-form-overlay.is-visible .contact-form-overlay__content {
  transform: scale(1);
}

.contact-form-overlay__icon {
  font-size: 2.75rem;
  color: var(--accent-color);
  line-height: 1;
}

.contact-form-overlay__text {
  color: var(--contrast-color);
  font-size: var(--text-base);
  margin: 0;
  max-width: 320px;
}

/*--------------------------------------------------------------
# Contact pane two-column grid (form + reach-me-directly aside)
--------------------------------------------------------------*/
/* Columns stretch to equal heights so the accent divider spans the full
   row — from the headers down to the submit button row. Inside each col,
   content still flows from the top normally (block layout), so the methods
   list stays anchored to the top with empty space below. */
.contact-pane-grid {
  align-items: stretch;
}

/* Per-column header: left-aligned, same type scale as .contact-panel__header
   so headings read consistently across the page. */
.contact-pane-col__header {
  margin: 0 0 var(--space-6);
}

.contact-pane-col__header h3 {
  color: var(--contrast-color);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.contact-pane-col__header p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

/* Subtle accent divider between form and methods columns. Sits at the
   methods col's outer edge — the midpoint of the Bootstrap gutter — so it
   reads as centered between the two columns. */
.contact-methods-col {
  position: relative;
}

@media (min-width: 992px) {
  .contact-methods-col::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--space-1);
    bottom: var(--space-1);
    width: 1px;
    background: color-mix(in srgb, var(--accent-color), transparent 80%);
  }
}

.contact-methods-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Single method row: icon · label/value · copy + open actions */
.contact-method-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: color-mix(in srgb, var(--color-surface), transparent 60%);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.contact-method-card:hover,
.contact-method-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  background: color-mix(in srgb, var(--color-surface), transparent 40%);
}

.contact-method-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: var(--text-base);
}

.contact-method-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-method-card__label {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-method-card__value {
  color: var(--contrast-color);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.contact-method-card__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.contact-method-copy,
.contact-method-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
}

.contact-method-copy:hover,
.contact-method-copy:focus-visible,
.contact-method-action:hover,
.contact-method-action:focus-visible {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

/* Copy button: swap icon + accent color while in the "copied" state */
.contact-method-copy__icon-success { display: none; }
.contact-method-copy.is-copied { color: var(--accent-color); }
.contact-method-copy.is-copied .contact-method-copy__icon-default { display: none; }
.contact-method-copy.is-copied .contact-method-copy__icon-success { display: inline-block; }

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Glass Card Base
--------------------------------------------------------------*/
/* Static glass surface */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Interactive glass surface — lifts on hover/focus */
.glass-card-interactive {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.glass-card-interactive:hover,
.glass-card-interactive:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.case-study-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.case-study-card:hover,
.case-study-card:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.case-study-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-study-card__image--compact {
  height: 180px;
}

.case-study-card__body {
  padding: 22px 24px;
}

.case-study-card__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.case-study-card__title {
  margin: 0 0 8px;
  font-size: var(--text-lg);
}

.case-study-card__title a {
  color: inherit;
  text-decoration: none;
}

.case-study-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin: 0;
}

.info-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 2rem;
}

.team-section .member-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 28px 24px;
  height: 100%;
  transition: transform var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.team-section .member-card:hover,
.team-section .member-card:focus-within {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.team-section .member-photo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto 18px;
  background: var(--accent-color);
}

.team-section .member-photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  font-weight: var(--weight-semi);
  cursor: default;
  user-select: none;
}

.team-section .role-badge {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 8px;
}

.team-section .member-name {
  margin: 0 0 4px;
  font-size: var(--text-lg);
}

.team-section .member-role {
  font-size: var(--text-sm);
  opacity: .75;
  margin-bottom: 14px;
}

.team-section .member-bio {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  opacity: .9;
}

.team-section .member-links {
  margin-top: 16px;
}

.team-section .member-links a {
  color: var(--default-color);
  margin-right: 14px;
  font-size: var(--text-md);
  transition: color var(--transition-fast);
}

.team-section .member-links a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Error Pages (404, 500)
--------------------------------------------------------------*/
.error-section {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.error-content {
  text-align: center;
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.error-code {
  font-size: 140px;
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-bottom: var(--space-6);
  color: var(--accent-color);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.error-page-404 .error-code {
  animation: error-bounce 2s ease-in-out infinite;
}

@keyframes error-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.error-page-500 .error-code {
  animation: error-pulse 2s ease-in-out infinite;
}

@keyframes error-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.98); }
}

.error-message {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-6);
  color: var(--heading-color);
}

.error-description {
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  color: var(--default-color);
  opacity: 0.8;
  line-height: var(--leading-relaxed);
}

.error-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/*--------------------------------------------------------------
# Geometric Backgrounds
# Subtle patterns applied via utility classes on sections.
# All use ::before with absolute positioning and very low opacity
# so they never interfere with content readability.
--------------------------------------------------------------*/
.bg-dots,
.bg-circuit,
.bg-hash,
.bg-hex {
  position: relative;
}

.bg-dots::before,
.bg-circuit::before,
.bg-hash::before,
.bg-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Dot grid — radial dots at 32px intervals */
.bg-dots::before {
  background-image: radial-gradient(
    color-mix(in srgb, var(--accent-color), transparent 85%) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
  opacity: 0.6;
}

/* Circuit traces — horizontal + vertical fine lines */
.bg-circuit::before {
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--accent-color), transparent 88%) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent-color), transparent 88%) 1px,
      transparent 1px
    );
  background-size: 64px 64px;
  opacity: 0.55;
}

/* Diagonal hash lines */
.bg-hash::before {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--accent-color), transparent 86%),
    color-mix(in srgb, var(--accent-color), transparent 86%) 1px,
    transparent 1px,
    transparent 16px
  );
  opacity: 0.6;
}

/* Hexagonal grid — SVG encoded */
.bg-hex::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ff6b35' fill-opacity='0.07'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}

/* Pattern pseudo-element sits behind content via z-index: 0 on ::before.
   No z-index needed on children — they naturally stack above. */

/*--------------------------------------------------------------
# Hover Lift Utilities
--------------------------------------------------------------*/
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-lift-sm {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/*--------------------------------------------------------------
# Focus Ring
--------------------------------------------------------------*/
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/*--------------------------------------------------------------
# Mobile Overflow & Margin Fixes
# Comprehensive mobile viewport constraints
--------------------------------------------------------------*/
@media (max-width: 768px) {

  /* Ensure all containers stay within viewport */
  .container,
  .container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Prevent sections from overflowing */
  .section,
  section {
    max-width: 100%;
  }

  /* Ensure rows don't cause horizontal scroll */
  .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Constrain columns */
  [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Prevent page content from overflowing */
  .page-title,
  .hero,
  .about,
  .resume,
  .services,
  .portfolio,
  .contact,
  main {
    max-width: 100%;
  }

  /* Ensure header doesn't overflow */
  .header .container {
    max-width: 100%;
  }

  /* Constrain cards and content blocks */
  .service-item,
  .portfolio-item,
  .resume-item,
  .card {
    max-width: 100%;
  }

  /* Prevent wide tables from breaking layout */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Constrain pre and code blocks */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Ensure buttons and forms stay within viewport */
  .btn,
  button,
  input,
  textarea,
  select {
    max-width: 100%;
  }

  /* Fix scroll jank on mobile Safari — fixed attachment triggers
     constant repaints on scroll */
  body {
    background-attachment: scroll;
  }
}

/*--------------------------------------------------------------
# Resume View Toggle Tabs
--------------------------------------------------------------*/
.resume-view-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2rem;
}

.resume-view-toggle .view-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  background-color: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border: none;
  position: relative;
}

.resume-view-toggle .view-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

.resume-view-toggle .view-tab:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.resume-view-toggle .view-tab.active {
  color: var(--accent-color);
  background-color: transparent;
  font-weight: var(--weight-semi);
}

.resume-view-toggle .view-tab.active::after {
  width: 60%;
}

.resume-view-toggle .view-tab i {
  font-size: var(--text-base);
}

.resume-view-toggle .pdf-external-icon {
  display: none;
  font-size: 0.75rem;
  margin-left: 4px;
}

.resume-view-toggle .pdf-external-icon.visible {
  display: inline;
}

/*--------------------------------------------------------------
# Accessibility: Reduced Motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .floating-card {
    animation: none !important;
  }
}