/**
* Template Name: Kelly
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts — Archivo carries the voice of the headings, Space Grotesk the body,
   JetBrains Mono the "developer" details (labels, counters, typed text). */
:root {
  --default-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Archivo", "Space Grotesk", sans-serif;
  --nav-font: "Space Grotesk", sans-serif;
  --mono-font: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

/* Global Colors — "Lumière & Encre": cool paper, navy ink and the cobalt of the
   Ouattware bulb logo. The amber glow (--glow-color) is the bulb lighting up —
   reserved for signature details (filament underline, orbit core, typed cursor). */
:root {
  --background-color: #f6f8fb; /* Background color for the entire website, including individual sections */
  --default-color: #3c4658; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #101b2c; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1e5fad; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --glow-color: #f2a91e; /* The lightbulb glow — sparing, signature-only accent */
  --surface-color: #ffffff; /* 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: #3c4658;  /* The default color of the main navmenu links */
  --nav-hover-color: #1e5fad; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #3c4658; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1e5fad; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Auto dark mode - follows the visitor's OS/browser preference */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d1420;
    --default-color: #aeb9cb;
    --heading-color: #f2f6fc;
    --accent-color: #6fa5e8;
    --glow-color: #f5b942;
    --surface-color: #16202f;
    --contrast-color: #ffffff;
    --nav-color: #aeb9cb;
    --nav-hover-color: #6fa5e8;
    --nav-mobile-background-color: #0a101a;
    --nav-dropdown-background-color: #16202f;
    --nav-dropdown-color: #aeb9cb;
    --nav-dropdown-hover-color: #6fa5e8;
  }
}

/* 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: #eceff5;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0a1220;
  --default-color: #aeb9cb;
  --heading-color: #f2f6fc;
  --surface-color: #16202f;
  --contrast-color: #ffffff;
}

/* In dark mode, keep "light" surfaces (header, footer) in tune with the theme */
@media (prefers-color-scheme: dark) {
  .light-background {
    --background-color: #0a101a;
    --surface-color: #16202f;
  }
}

/* Shared design tokens — radius, elevation and motion speak one language. */
:root {
  --radius-card: 18px;   /* cards, panels */
  --radius-btn: 12px;    /* rectangular actions */
  --radius-chip: 10px;   /* small inner chips (concentric with cards) */
  --shadow-card: 0 1px 1px rgba(10, 18, 32, 0.04), 0 8px 24px -8px rgba(10, 18, 32, 0.10);
  --shadow-card-hover: 0 2px 3px rgba(10, 18, 32, 0.05), 0 22px 44px -12px rgba(10, 18, 32, 0.18);
  --shadow-accent: 0 10px 28px -8px rgba(30, 95, 173, 0.45);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

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);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Text selection glows amber — the bulb again */
::selection {
  background: color-mix(in srgb, var(--glow-color), transparent 55%);
  color: var(--heading-color);
}

/* Visible, on-brand keyboard focus */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Counters and any live number hold their width as digits change */
.purecounter,
[data-purecounter-end] {
  font-variant-numeric: tabular-nums;
}

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

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

.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: 50%;
  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 {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

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

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 25px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}

.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: 0.3s;
  font-size: 16px;
}

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

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

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

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

  .header .navmenu {
    order: 3;
  }
}

/* On phones the social icons crowd the logo + burger — hide them here
   (they remain available in the footer). */
@media (max-width: 768px) {
  .header .header-social-links {
    display: none;
  }
}

/*--------------------------------------------------------------
# About page — intro block styling & animation
--------------------------------------------------------------*/

/* Portrait with gradient frame, depth shadow and a status badge */
.about-page .about-photo {
  position: relative;
  display: block;
  padding: 5px;
  border-radius: 22px;
  background: var(--accent-gradient);
  box-shadow: 0 18px 44px rgba(30, 95, 173, 0.28);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.about-page .about-photo:hover { transform: translateY(-6px); }
.about-page .about-photo img {
  border-radius: 18px;
  display: block;
  width: 100%;
}
.about-page .about-photo-badge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 50px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-color);
  background: var(--surface-color);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.about-page .about-photo-badge i { color: var(--accent-color); }

/* Info rows: icon chip + label, with a divider and hover nudge */
.about-page .about-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-page .about-info li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
.about-page .about-info li i {
  color: var(--accent-color);
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.about-page .about-info li:hover i { transform: translateX(3px); }
.about-page .about-info li strong { color: var(--heading-color); font-weight: 600; }
.about-page .about-info li span { color: color-mix(in srgb, var(--default-color), transparent 20%); }

/* Action buttons */
.about-page .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.about-page .btn-about {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 50px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.about-page .btn-about-primary {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 12px 30px rgba(30, 95, 173, 0.35);
}
.about-page .btn-about-primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(30, 95, 173, 0.5);
}
.about-page .btn-about-ghost {
  color: var(--accent-color);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 55%);
}
.about-page .btn-about-ghost:hover {
  color: #fff;
  background: var(--accent-color);
  border-color: transparent;
  transform: translateY(-3px);
}
.about-page .btn-about:active { transform: scale(0.96); }

/*--------------------------------------------------------------
# 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 14px;
  }

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

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

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .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 0.3s ease-in-out 0s;
  }

  .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: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

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

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

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .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: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

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

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

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

  .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;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 44px 0;
  position: relative;
}

/* Filament hairline that heats to amber at its centre — echoes section titles */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 80%);
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent-color), transparent 40%) 30%,
    var(--glow-color) 50%,
    color-mix(in srgb, var(--accent-color), transparent 40%) 70%,
    transparent);
  opacity: 0.7;
}

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

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

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 78%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 5px;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

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

.footer .credits {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

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

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  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: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  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);
  padding: 25px 0;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.page-title h1 {
  font-size: 24px;
  font-weight: 400;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

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

.page-title .breadcrumbs 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: var(--background-color);
  padding: 84px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 768px) {
  section,
  .section {
    padding: 60px 0;
  }
}

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  padding-bottom: 18px;
  position: relative;
}

/* Filament underline — a wire that heats to amber at its centre */
.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 84px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-color) 22%,
    var(--glow-color) 50%,
    var(--accent-color) 78%,
    transparent 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--glow-color), transparent 45%);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 82px);
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1200px) {
  .hero {
    min-height: calc(100vh - 68px);
  }
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

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

.hero h2 {
  margin: 0;
  font-size: clamp(40px, 7vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hero p {
  margin: 16px 0 0 0;
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--heading-color);
}

/* A reusable primary pill button — not hero-specific, even though it was
   born there (also used e.g. on the home "Projets phares" CTA and the
   portfolio page's Pinterest link). */
.btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  padding: 14px 30px;
  border-radius: var(--radius-btn);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

.hero .btn-get-started {
  margin-top: 30px;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: clamp(27px, 8.4vw, 34px);
    line-height: 1.05;
    overflow-wrap: break-word;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
  font-weight: 700;
  font-size: 24px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 48px;
  display: block;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.stats .stats-item span:after {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

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

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

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

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: var(--glow-color);
  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: 26px;
  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;
  margin: 0 auto 15px auto;
}

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

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

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

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

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 10px;
}

.resume .resume-item h5 {
  font-size: 16px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume .resume-item ul {
  padding-left: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 10px;
}

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

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .service-item .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

.services .service-item.item-cyan i {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover .icon i {
  color: #000;
}

.services .service-item.item-cyan:hover .icon path {
  fill: #0dcaf0;
}

.services .service-item.item-orange i {
  color: #fd7e14;
}

.services .service-item.item-orange:hover .icon i {
  color: #000;
}

.services .service-item.item-orange:hover .icon path {
  fill: #fd7e14;
}

.services .service-item.item-teal i {
  color: #20c997;
}

.services .service-item.item-teal:hover .icon i {
  color: #000;
}

.services .service-item.item-teal:hover .icon path {
  fill: #20c997;
}

.services .service-item.item-red i {
  color: #df1529;
}

.services .service-item.item-red:hover .icon i {
  color: #000;
}

.services .service-item.item-red:hover .icon path {
  fill: #df1529;
}

.services .service-item.item-indigo i {
  color: #6610f2;
}

.services .service-item.item-indigo:hover .icon i {
  color: #000;
}

.services .service-item.item-indigo:hover .icon path {
  fill: #6610f2;
}

.services .service-item.item-pink i {
  color: #f3268c;
}

.services .service-item.item-pink:hover .icon i {
  color: #000;
}

.services .service-item.item-pink:hover .icon path {
  fill: #f3268c;
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

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

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

/* Portfolio card markup/design lives in the "case-file cards" section
   further down this file (search "pf-card"). */

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

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

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

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  background-color: var(--surface-color);
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

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

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
/*--------------------------------------------------------------
# Enhancements - Animations & Modern Styling (custom)
--------------------------------------------------------------*/

/* Accent gradient reused across the site */
:root {
  --accent-gradient: linear-gradient(135deg, #2c7be0 0%, #1e5fad 55%, #174a85 100%);
}

/* Dark-mode gradient override (placed after the default so it wins the cascade) */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-gradient: linear-gradient(135deg, #5f9ae6 0%, #2f66b0 100%);
  }
}

/* Smooth reveal keyframes */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shine {
  0% { left: -120%; }
  60%, 100% { left: 140%; }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* ---------- Header / Nav ---------- */
.header {
  transition: all 0.4s ease;
}

body.scrolled .header {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
  background-color: color-mix(in srgb, var(--background-color), transparent 8%);
}

/* backdrop-filter only on desktop: on mobile it breaks the fixed nav overlay */
@media (min-width: 1200px) {
  .header {
    backdrop-filter: saturate(160%) blur(6px);
  }
}

.header .logo h1 {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

@media (min-width: 1200px) {
  /* Enhance the template's existing underline (::before) - no extra line */
  .navmenu > ul > li > a:before {
    height: 3px;
    bottom: -4px;
    border-radius: 3px;
    background: var(--accent-gradient);
  }
  .navmenu a:hover:before,
  .navmenu li:hover > a:before,
  .navmenu .active:before {
    width: 100%;
  }
}

/* ---------- Hero ---------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg,
    color-mix(in srgb, #1b1b19, transparent 35%) 0%,
    color-mix(in srgb, #1b1b19, transparent 55%) 100%);
}

.hero img {
  transform: scale(1.08);
  will-change: transform;
  object-position: center 22%;
}

@media (max-width: 768px) {
  .hero img {
    object-position: center 18%;
  }
}

.hero .container {
  animation: fadeUp 1.1s ease both;
  will-change: transform, opacity;
}

.hero h2 {
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.hero h2 .accent-text {
  /* The name lights up like the bulb — living amber glow on the dark hero */
  background: linear-gradient(90deg, #f7c04a, #f2a91e, #ffd980, #f2a91e);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s ease infinite;
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
}

/* Typed line set in mono — the developer's cursor */
.hero p [data-typed-items] {
  font-family: var(--mono-font);
  font-size: 0.9em;
  color: #ffffff;
}

.hero .typed-cursor {
  color: var(--glow-color);
  font-weight: 400;
  animation: cursorBlink 1.1s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}

.hero .hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* On phones, stack the two hero actions full-width so nothing clips */
@media (max-width: 480px) {
  .hero .hero-cta { flex-direction: column; align-items: stretch; }
  .hero .hero-cta .btn-get-started,
  .hero .hero-cta .btn-outline { justify-content: center; width: 100%; }
}

.btn-get-started {
  position: relative;
  overflow: hidden;
  background: var(--accent-gradient);
  box-shadow: var(--shadow-accent);
}

.btn-get-started::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
}

.btn-get-started:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(30, 95, 173, 0.45);
}

.hero .btn-outline {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-btn);
  transition: transform 0.4s var(--ease-out), background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  margin-top: 30px;
}

.hero .btn-outline:hover {
  background: #fff;
  color: var(--accent-color);
  border-color: #fff;
  transform: translateY(-3px);
}

/* ---------- Hero dev orbit (web-development themed, animated) ---------- */
/* Signature element: a pulsing "code core" encircled by the real tech stack,
   the front-end trio orbiting one way, the back-end/CMS trio the other.
   Everything scales from a single --size token so the geometry never drifts. */
.dev-orbit {
  --size: clamp(240px, 30vw, 480px);
  --r-ai: calc(var(--size) * 0.45);
  --r-outer: calc(var(--size) * 0.31);
  --r-inner: calc(var(--size) * 0.18);
  --badge: calc(var(--size) * 0.12);
  --orbit-scale: 1;      /* driven by scroll for the "expand" effect */
  --orbit-drift: 0px;    /* driven by scroll for a gentle downward drift */
  --orbit-fade: 1;       /* driven by scroll for the fade-out */
  --orbit-base-op: 1;    /* per-breakpoint ceiling (dimmed on mobile) */
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(calc(-50% + var(--orbit-drift))) scale(var(--orbit-scale));
  opacity: calc(var(--orbit-base-op) * var(--orbit-fade));
  z-index: 3;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
}

/* Decorative orbit rings */
.dev-orbit__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent-color), transparent 55%);
}

.dev-orbit__ring--ai {
  width: calc(var(--r-ai) * 2);
  height: calc(var(--r-ai) * 2);
  animation: orbitRingSpin 80s linear infinite;
}

.dev-orbit__ring--outer {
  width: calc(var(--r-outer) * 2);
  height: calc(var(--r-outer) * 2);
  animation: orbitRingSpin 60s linear infinite reverse;
}

.dev-orbit__ring--inner {
  width: calc(var(--r-inner) * 2);
  height: calc(var(--r-inner) * 2);
  border-style: dotted;
  border-color: color-mix(in srgb, var(--accent-color), transparent 65%);
  animation: orbitRingSpin 40s linear infinite;
}

/* Central code core */
.dev-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * 0.22);
  height: calc(var(--size) * 0.22);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* The bulb lighting up — amber core inside cobalt orbits, straight from the logo */
  background: radial-gradient(circle at 32% 28%, #fff3d6 0%, #f7c04a 30%, #e9a118 58%, #8c5a0a 100%);
  box-shadow:
    inset -8px -8px 22px rgba(0, 0, 0, 0.45),
    inset 7px 7px 18px rgba(255, 255, 255, 0.22),
    0 0 55px rgba(242, 169, 30, 0.5),
    0 0 120px rgba(247, 192, 74, 0.25);
  animation: orbitCorePulse 4.5s ease-in-out infinite;
}

.dev-orbit__core i {
  font-size: calc(var(--size) * 0.1);
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Tech badges that orbit the core */
.dev-orbit__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--badge);
  height: var(--badge);
  margin: calc(var(--badge) / -2) 0 0 calc(var(--badge) / -2);
  border-radius: calc(var(--badge) * 0.26);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
  outline: 1px solid rgba(0, 0, 0, 0.06);
}

.dev-orbit__badge img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* AI trio on the outermost ring — the "intelligence" layer, softly highlighted */
.dev-orbit__badge--a1,
.dev-orbit__badge--a2,
.dev-orbit__badge--a3 {
  --r: var(--r-ai);
  animation: orbitTravel 34s linear infinite;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 22px rgba(76, 142, 224, 0.55);
  outline-color: color-mix(in srgb, var(--accent-color), transparent 55%);
}
.dev-orbit__badge--a2 { animation-delay: -11.33s; }
/* Grok's logo is white-on-transparent → give it a dark badge (on-brand) */
.dev-orbit__badge--a3 { animation-delay: -22.66s; background: #1a1a1a; }

/* Front-end trio on the middle ring */
.dev-orbit__badge--o1,
.dev-orbit__badge--o2,
.dev-orbit__badge--o3 {
  --r: var(--r-outer);
  animation: orbitTravel 26s linear infinite reverse;
}
.dev-orbit__badge--o2 { animation-delay: -8.66s; }
.dev-orbit__badge--o3 { animation-delay: -17.33s; }

/* Back-end / CMS trio on the inner ring */
.dev-orbit__badge--i1,
.dev-orbit__badge--i2,
.dev-orbit__badge--i3 {
  --r: var(--r-inner);
  animation: orbitTravel 18s linear infinite;
}
.dev-orbit__badge--i2 { animation-delay: -6s; }
.dev-orbit__badge--i3 { animation-delay: -12s; }

/* Self-contained orbit: outer rotate carries the badge around,
   inner counter-rotate keeps the logo upright the whole way. */
@keyframes orbitTravel {
  from { transform: rotate(0turn) translateX(var(--r)) rotate(0turn); }
  to   { transform: rotate(1turn) translateX(var(--r)) rotate(-1turn); }
}

@keyframes orbitRingSpin {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to   { transform: translate(-50%, -50%) rotate(1turn); }
}

@keyframes orbitCorePulse {
  0%, 100% { box-shadow: inset -8px -8px 22px rgba(0,0,0,.45), inset 7px 7px 18px rgba(255,255,255,.22), 0 0 45px rgba(242,169,30,.45), 0 0 100px rgba(247,192,74,.2); }
  50%      { box-shadow: inset -8px -8px 22px rgba(0,0,0,.45), inset 7px 7px 18px rgba(255,255,255,.22), 0 0 70px rgba(242,169,30,.65), 0 0 150px rgba(247,192,74,.35); }
}

/* Hero content: centered by default (mobile), split to the left on desktop */
.hero .hero-split { text-align: center; }

/* Two-column desktop hero: content owns the left, orbit owns the right.
   Bootstrap's .justify-content-center utility is !important, so we match it. */
@media (min-width: 992px) {
  .hero .hero-split { text-align: left; }
  .hero .hero-split .row { justify-content: flex-start !important; }
  .hero .hero-split .col-lg-9 { max-width: 560px; margin-left: 0; margin-right: 0; }
  .hero .hero-split .hero-avatar { margin-left: 0; margin-right: 0; }
  .hero .hero-split .hero-cta { justify-content: flex-start; }
  .hero .hero-split h2 { font-size: 56px; }
}

/* Below the two-column breakpoint: the orbit becomes an ambient element
   that frames the centered content instead of sitting beside it. */
@media (max-width: 991px) {
  .dev-orbit {
    --size: min(96vw, 460px);
    top: 42%;
    left: 50%;
    right: auto;
    transform: translate(-50%, calc(-50% + var(--orbit-drift))) scale(var(--orbit-scale));
    z-index: 2;               /* behind the content, in front of the backdrop */
    --orbit-base-op: 0.65;
  }
  /* Hide the core on mobile so the avatar becomes the natural centre */
  .dev-orbit__core { display: none; }
  .hero .hero-split { position: relative; z-index: 4; }
}

@media (max-width: 480px) {
  .dev-orbit { --size: min(112vw, 420px); --orbit-base-op: 0.5; }
  /* Drop the inner ring on the smallest screens to keep it uncluttered */
  .dev-orbit__ring--inner,
  .dev-orbit__badge--i1,
  .dev-orbit__badge--i2,
  .dev-orbit__badge--i3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-orbit__ring,
  .dev-orbit__core,
  .dev-orbit__badge {
    animation: none;
  }
  /* Freeze badges spread around each ring so it still reads as a composition */
  .dev-orbit__badge--a1 { transform: rotate(.083turn) translateX(var(--r)) rotate(-.083turn); }
  .dev-orbit__badge--a2 { transform: rotate(.416turn) translateX(var(--r)) rotate(-.416turn); }
  .dev-orbit__badge--a3 { transform: rotate(.75turn)  translateX(var(--r)) rotate(-.75turn); }
  .dev-orbit__badge--o1 { transform: rotate(0turn)    translateX(var(--r)) rotate(0turn); }
  .dev-orbit__badge--o2 { transform: rotate(.333turn) translateX(var(--r)) rotate(-.333turn); }
  .dev-orbit__badge--o3 { transform: rotate(.666turn) translateX(var(--r)) rotate(-.666turn); }
  .dev-orbit__badge--i1 { transform: rotate(.166turn) translateX(var(--r)) rotate(-.166turn); }
  .dev-orbit__badge--i2 { transform: rotate(.5turn)   translateX(var(--r)) rotate(-.5turn); }
  .dev-orbit__badge--i3 { transform: rotate(.833turn) translateX(var(--r)) rotate(-.833turn); }
}

/* ---------- Section titles ---------- */
.section-title h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

/* ---------- Services cards ---------- */
.services .service-item {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.services .service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.services .service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}

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

.services .service-item .icon {
  transition: transform 0.4s ease;
}

.services .service-item:hover .icon {
  transform: scale(1.12) rotate(-6deg);
}

/* ---------- About image ---------- */
.about .col-lg-4 img {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  transition: transform 0.5s ease;
}

.about .col-lg-4 img:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ---------- Skills progress ---------- */
.skills .progress-bar {
  background: var(--accent-gradient);
  border-radius: 6px;
}

.skills .progress-bar-wrap {
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Stats cards ---------- */
.stats .stats-item {
  background: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 93%);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stats .stats-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.stats .stats-item span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Resume ---------- */
.resume .resume-item {
  transition: transform 0.35s ease;
  padding-bottom: 22px;
}

.resume .resume-item:hover {
  transform: translateX(6px);
}

.resume .resume-item::before {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.resume .resume-item:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* Tech / skill pills */
.tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 10px 0;
  list-style: none;
}

.tech-pills li {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: all 0.3s ease;
}

.tech-pills li:hover {
  background: var(--accent-gradient);
  color: #fff;
  transform: translateY(-3px);
}

/* Highlight badge (e.g. Vibe Coding) */
.badge-soft {
  display: inline-block;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Feature card grid (used for project highlight) */
.feature-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 16px;
  padding: 28px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}

.feature-card .feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  color: var(--accent-color);
  font-size: 26px;
  margin-bottom: 18px;
}

/* ---------- Scroll top button ---------- */
.scroll-top {
  background: var(--accent-gradient) !important;
}

.scroll-top:hover {
  transform: translateY(-4px);
}

/* ---------- Footer / header social ---------- */
.footer .social-links a,
.header .header-social-links a {
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer .social-links a:hover,
.header .header-social-links a:hover {
  transform: translateY(-3px) scale(1.15);
}

/* ---------- Testimonials ---------- */
.testimonials .testimonial-item {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.testimonials .testimonial-item:hover {
  transform: translateY(-6px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Pinterest responsive embed ---------- */
.pinterest-embed-wrap {
  width: 100%;
  display: block;
  min-height: 200px;
}

.pinterest-embed-wrap span {
  margin: 0 auto !important;
}

/*--------------------------------------------------------------
# Immersive Experience (custom)
--------------------------------------------------------------*/

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  background: var(--accent-gradient);
  box-shadow: 0 0 12px rgba(30, 95, 173, 0.6);
  transition: width 0.1s linear;
}

/* Smooth staggered reveal on scroll */
.reveal-init {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-in {
  opacity: 1;
  transform: none;
}

/* Hero scroll-down indicator */
.hero .scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  animation: fadeUp 1.4s ease both;
}

.hero .scroll-indicator .mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  position: relative;
}

.hero .scroll-indicator .mouse::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 4px;
  transform: translateX(-50%);
  animation: scrollWheel 1.6s ease-in-out infinite;
}

@keyframes scrollWheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; }
}

/* Immersive parallax background bands */
.parallax-band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  overflow: hidden;
}

.parallax-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, #081428, transparent 18%),
    color-mix(in srgb, #123763, transparent 26%));
  z-index: 1;
}

/* Living light: amber + cobalt glows drifting slowly behind the ink —
   the same "aurora" language as the mobile nav, now on every parallax band */
.parallax-band::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  background:
    radial-gradient(38% 46% at 82% 18%, color-mix(in srgb, var(--glow-color), transparent 80%), transparent 62%),
    radial-gradient(42% 50% at 12% 82%, color-mix(in srgb, #2c7be0, transparent 78%), transparent 64%);
  animation: bandAurora 18s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bandAurora {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 3%) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-band::after { animation: none; }
}

.parallax-band .container {
  position: relative;
  z-index: 2;
}

.parallax-band h2,
.parallax-band h3,
.parallax-band p {
  color: #fff;
}

.parallax-band .section-title h2::after {
  background: #fff;
}

/* CTA band content */
.cta-band {
  padding: 100px 0;
  text-align: center;
}

.cta-band h2 {
  font-size: 40px;
  font-weight: 700;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.cta-band p {
  max-width: 640px;
  margin: 14px auto 28px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
}

.cta-band .btn-cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent-gradient);
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  padding: 16px 38px;
  border-radius: var(--radius-btn);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
  box-shadow: 0 12px 34px rgba(30, 95, 173, 0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

.cta-band .btn-cta:hover {
  transform: translateY(-4px);
  color: #fff;
  box-shadow: 0 20px 50px rgba(30, 95, 173, 0.55), 0 0 30px color-mix(in srgb, var(--glow-color), transparent 65%);
}

/* On touch / small screens fixed attachment is janky -> use scroll */
@media (max-width: 992px) {
  .parallax-band {
    background-attachment: scroll;
  }
  .cta-band {
    padding: 70px 0;
  }
  .cta-band h2 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero .scroll-indicator .mouse::before {
    animation: none;
  }
}

/* ---------- Hero avatar tilt wrapper (desktop cursor parallax) ----------
   JS sets the tilt transform on THIS wrapper, never on .hero-avatar itself —
   that inner element already owns its transform via the avatarFloat keyframe,
   and the two would fight over the same CSS property if combined. */
.hero-avatar-tilt {
  perspective: 700px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-avatar-tilt { transition: none; }
}

/* ---------- Hero cursor glow — the pointer becomes a light source ---------- */
.hero-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow-color), transparent 78%) 0%, transparent 68%);
  /* Above the dark vignette (z-index:3) so it actually reads as light,
     not just a faint tint smothered underneath it; screen blend keeps
     it additive so text and buttons stay legible where it passes over them. */
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 991px), (pointer: coarse) {
  .hero-cursor-glow { display: none; }
}

/* ---------- Hero avatar (portrait photo) ---------- */
.hero .hero-avatar {
  width: 180px;
  height: 180px;
  margin: 0 auto 26px;
  border-radius: 50%;
  padding: 5px;
  background: var(--accent-gradient);
  box-shadow: 0 12px 40px rgba(30, 95, 173, 0.45);
  animation: avatarFloat 5s ease-in-out infinite;
}

.hero .hero-avatar img {
  position: static;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  animation: none;
  transform: none;
  display: block;
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 768px) {
  .hero .hero-avatar {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-avatar {
    animation: none;
  }
}

/* ---------- Contact page polish (custom) ---------- */

/* Ambient aurora behind the whole section — soft cobalt + amber light
   washes drifting on the pale background, tuned much fainter than the
   dark-mode version so it reads as atmosphere, not a color splash. */
.contact.section {
  position: relative;
}
.contact.section::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    radial-gradient(36% 40% at 12% 8%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 70%),
    radial-gradient(32% 36% at 90% 88%, color-mix(in srgb, var(--glow-color), transparent 93%), transparent 70%);
  animation: bandAurora 24s ease-in-out infinite;
  pointer-events: none;
}
.contact.section > .container {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .contact.section::before { animation: none; }
}

/* The whole info card breathes gently — alive without touching any
   hover-driven transform on its child .info-item rows */
.contact .info-wrap {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  animation: infoWrapBreathe 7s ease-in-out infinite;
}
@keyframes infoWrapBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .contact .info-wrap { animation: none; }
}

.contact .info-item {
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  margin-bottom: 18px !important;
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.contact .info-item:hover {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.contact .info-item i {
  background: var(--accent-gradient) !important;
  color: #fff !important;
  width: 50px;
  height: 50px;
  box-shadow: 0 8px 20px rgba(30, 95, 173, 0.3);
}

.contact .info-item:hover i {
  transform: scale(1.1) rotate(-6deg);
}

.contact iframe {
  border-radius: 14px;
  margin-top: 6px;
}

/* Form card — glows softly the moment any field inside gets focus,
   reinforcing that the conversation has started */
.contact form {
  background-color: var(--surface-color);
  height: 100%;
  padding: 34px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
.contact form:focus-within {
  border-color: color-mix(in srgb, var(--accent-color), transparent 65%);
  box-shadow: 0 20px 55px rgba(10, 18, 32, 0.12),
              0 0 0 5px color-mix(in srgb, var(--accent-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact form {
    padding: 22px;
  }
}

/*--------------------------------------------------------------
# Contact form — floating-label fields (redesign #2)
# The label lives inside the field at rest and rises into a small
# caption the instant it's focused or filled — no separate static
# label line above the box anymore. A center-out gradient underline
# draws in on focus, and a valid, non-empty value pops a check mark.
--------------------------------------------------------------*/
.pf-field {
  position: relative;
}

.pf-field__icon {
  position: absolute;
  left: 16px;
  top: 21px;
  font-size: 16px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  pointer-events: none;
  transition: color 0.3s ease, transform 0.35s var(--ease-spring);
  z-index: 2;
}
.pf-field--area .pf-field__icon {
  top: 18px;
}
.pf-field:focus-within .pf-field__icon {
  color: var(--accent-color);
  transform: scale(1.1);
}

.pf-field__input {
  width: 100%;
  font-size: 15px;
  font-family: var(--default-font);
  color: var(--heading-color);
  padding: 25px 16px 9px 44px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
textarea.pf-field__input {
  min-height: 172px;
  line-height: 1.6;
  padding-top: 30px;
  resize: vertical;
  cursor: text;
}

.pf-field__input:focus {
  outline: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 82%);
}

/* The floating label: resting at the input's own text baseline, it rises
   into a small caption above once the field is focused or has a value.
   `:not(:placeholder-shown)` is what detects "has a value" — every field
   carries placeholder=" " (a lone space) specifically to make that work. */
.pf-field__label {
  position: absolute;
  left: 44px;
  top: 17px;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transform-origin: left top;
  transition: top 0.25s var(--ease-out), font-size 0.25s var(--ease-out),
              color 0.25s ease, font-weight 0.25s ease;
  pointer-events: none;
}
.pf-field--area .pf-field__label {
  top: 19px;
}

.pf-field__input:focus + .pf-field__label,
.pf-field__input:not(:placeholder-shown) + .pf-field__label {
  top: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent-color);
}

/* Gradient underline that draws in from the center on focus */
.pf-field__bar {
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient);
  transition: left 0.35s var(--ease-out), right 0.35s var(--ease-out);
  pointer-events: none;
}
.pf-field__input:focus ~ .pf-field__bar {
  left: 3px;
  right: 3px;
}

/* A quiet checkmark pops in once the value actually validates (email
   pattern, required-not-empty…) — meaningful feedback, not decoration */
.pf-field__valid {
  position: absolute;
  right: 14px;
  top: 21px;
  font-size: 16px;
  color: #1a9d5a;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-spring);
  pointer-events: none;
}
.pf-field__input:not(:placeholder-shown):valid ~ .pf-field__valid {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pf-field__label,
  .pf-field__bar,
  .pf-field__valid,
  .pf-field__icon { transition: none; }
}

/* Reassurance line under the submit button */
.contact form .form-reassure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}
.contact form .form-reassure i { color: #1a9d5a; }

/* Animated gradient submit button with shine */
.contact form button[type=submit] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  background: var(--accent-gradient);
  border: 0;
  padding: 14px 40px;
  border-radius: var(--radius-btn);
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
  box-shadow: var(--shadow-accent);
}

.contact form button[type=submit] i {
  font-size: 16px;
  transition: transform 0.35s var(--ease-spring);
}
.contact form button[type=submit]:hover i {
  transform: translateX(3px) rotate(-12deg);
}
/* Instant tactile response: the press wins over hover and lands in ~60ms */
.contact form button[type=submit]:active {
  transform: scale(0.95);
  box-shadow: 0 6px 16px rgba(30, 95, 173, 0.4);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.contact form button[type=submit]:active i {
  transform: scale(0.9);
  transition: transform 0.06s ease;
}

.contact form button[type=submit]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.contact form button[type=submit]:hover {
  transform: translateY(-3px);
  background: var(--accent-gradient);
  box-shadow: 0 20px 46px rgba(30, 95, 173, 0.5),
              0 0 26px color-mix(in srgb, var(--glow-color), transparent 66%);
}

.contact form button[type=submit]:hover::after {
  left: 140%;
}

/*--------------------------------------------------------------
# Contact page — reinforced entrance & interaction motion
--------------------------------------------------------------*/

/* Fields cascade in on load, one after another */
@media (prefers-reduced-motion: no-preference) {
  .contact form .row > [class*="col-"] {
    animation: contactFieldIn 0.6s var(--ease-out) both;
  }
  .contact form .row > [class*="col-"]:nth-child(1) { animation-delay: 0.06s; }
  .contact form .row > [class*="col-"]:nth-child(2) { animation-delay: 0.15s; }
  .contact form .row > [class*="col-"]:nth-child(3) { animation-delay: 0.24s; }
  .contact form .row > [class*="col-"]:nth-child(4) { animation-delay: 0.33s; }
}
@keyframes contactFieldIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* The whole field lifts a touch when focused (the label's own colour
   change is handled directly by .pf-field__label's :focus-within rule) */
.pf-field {
  border-radius: 12px;
  transition: transform 0.3s var(--ease-out);
}
.pf-field:focus-within {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .pf-field { transition: none; }
}

/* Quick actions get a shine sweep on hover */
.contact .quick-actions a {
  position: relative;
  overflow: hidden;
}
.contact .quick-actions a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.contact .quick-actions a:hover::after { left: 150%; }

/* The map reveals with a soft rise */
@media (prefers-reduced-motion: no-preference) {
  .contact .info-wrap iframe {
    animation: contactFieldIn 0.7s var(--ease-out) 0.5s both;
  }
}

/* WhatsApp floating button - subtle pulse */
@keyframes waPulse {
  0% { box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 0 0 rgba(37, 211, 102, 0); }
}

a[aria-label="Chat WhatsApp"] {
  animation: waPulse 2.4s infinite;
  transition: transform 0.3s ease;
}

a[aria-label="Chat WhatsApp"]:hover {
  transform: scale(1.1);
}

/* Hidden by default at every width; only shown for the open mobile overlay
   (inside the max-width:1199px block below) — defense in depth so the
   injected field can never affect the desktop dropdown nav. */
.nav-tech-field { display: none; }

/* ---------- Mobile navigation menu redesign (custom) ---------- */
@media (max-width: 1199px) {
  /* Full-screen overlay with a living "aurora" backdrop (blur on the overlay = safe) */
  .mobile-nav-active .navmenu {
    background: linear-gradient(160deg, #0c2440 0%, #081426 55%, #060f1c 100%) !important;
    backdrop-filter: blur(8px);
    overflow: hidden;
  }
  /* Slowly drifting cobalt + amber light blobs */
  .mobile-nav-active .navmenu::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: 0;
    background:
      radial-gradient(42% 42% at 22% 26%, color-mix(in srgb, #2c7be0, transparent 52%), transparent 70%),
      radial-gradient(36% 36% at 82% 76%, color-mix(in srgb, var(--glow-color), transparent 66%), transparent 70%),
      radial-gradient(46% 46% at 70% 12%, color-mix(in srgb, #1e5fad, transparent 55%), transparent 72%);
    filter: blur(34px);
    animation: navAurora 16s ease-in-out infinite;
    pointer-events: none;
  }
  /* Faint blueprint grid that pans, masked to fade at the edges */
  .mobile-nav-active .navmenu::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 92% at 50% 40%, #000 52%, transparent 92%);
            mask-image: radial-gradient(120% 92% at 50% 40%, #000 52%, transparent 92%);
    animation: navGridPan 12s linear infinite;
    pointer-events: none;
  }
  /* Keep the links above the animated backdrop */
  .mobile-nav-active .navmenu > ul { z-index: 1; }

  @keyframes navAurora {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(5%, -4%) scale(1.14); }
    66%  { transform: translate(-4%, 5%) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
  }
  @keyframes navGridPan { to { background-position: 34px 34px; } }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav-active .navmenu::before,
    .mobile-nav-active .navmenu::after { animation: none; }
  }

  /* Drifting tech / AI badges — a third, deeper layer behind the links,
     naming the stack this developer actually works in. Reuses the same
     glass-chip look and float keyframes as the homepage's #intro field. */
  .mobile-nav-active .nav-tech-field {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .nav-tech-ball {
    position: absolute;
    width: clamp(30px, 7vw, 42px);
    height: clamp(30px, 7vw, 42px);
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0.55;
    will-change: transform;
  }
  .nav-tech-ball img { width: 58%; height: 58%; object-fit: contain; }
  /* Grok's mark is white-on-transparent — give it a dark chip to stay visible */
  .nav-tech-ball.ntb-dark { background: rgba(0, 0, 0, 0.4); }

  /* Two safe columns hugging the edges — the centred link pills own the
     middle of the screen, so every badge sits in the margin, never behind text. */
  .ntb1, .ntb3, .ntb5, .ntb7, .ntb9 { left: 7%; }
  .ntb2, .ntb4, .ntb6, .ntb8       { right: 7%; }

  .ntb1 { top: 8%;  animation: techFloatA 13s ease-in-out -2s infinite; }
  .ntb2 { top: 14%; animation: techFloatB 15s ease-in-out -5s infinite; }
  .ntb3 { top: 28%; animation: techFloatC 14s ease-in-out -1s infinite; }
  .ntb4 { top: 38%; animation: techFloatA 16s ease-in-out -7s infinite; }
  .ntb5 { top: 48%; animation: techFloatB 12s ease-in-out -3s infinite; }
  .ntb6 { top: 62%; animation: techFloatC 15s ease-in-out -6s infinite; }
  .ntb7 { top: 68%; animation: techFloatA 13s ease-in-out -4s infinite; }
  .ntb8 { top: 84%; animation: techFloatB 14s ease-in-out -8s infinite; }
  .ntb9 { top: 90%; animation: techFloatC 17s ease-in-out -9s infinite; opacity: 0.4; }

  @media (prefers-reduced-motion: reduce) {
    .nav-tech-ball { animation: none !important; }
  }

  /* Centered list, no more big white box */
  .navmenu ul {
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 80px 24px 48px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }

  .mobile-nav-active .navmenu > ul {
    display: flex;
  }

  /* Elegant pill links */
  .navmenu a,
  .navmenu a:focus {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.3px;
    justify-content: center;
    text-align: center;
    width: auto;
    min-width: 220px;
    padding: 13px 30px;
    border-radius: 50px;
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #fff;
    background: var(--accent-gradient);
    box-shadow: 0 10px 26px rgba(30, 95, 173, 0.4);
    transform: translateY(-2px);
  }

  /* Close (X) button styling */
  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    top: 14px;
    right: 16px;
  }

  /* Staggered entrance for the links */
  .mobile-nav-active .navmenu > ul > li {
    opacity: 0;
    animation: navItemIn 0.45s ease forwards;
  }
  .mobile-nav-active .navmenu > ul > li:nth-child(1) { animation-delay: 0.06s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(2) { animation-delay: 0.12s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(3) { animation-delay: 0.18s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(4) { animation-delay: 0.24s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(5) { animation-delay: 0.30s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(6) { animation-delay: 0.36s; }

  @keyframes navItemIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav-active .navmenu > ul > li {
      opacity: 1;
      animation: none;
    }
  }
}

/* ---------- Skills logo grid (custom, replaces progress bars) ---------- */
.skills-group-title {
  font-size: 20px;
  font-weight: 700;
  margin: 34px 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--heading-color);
}

.skills-group-title i {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 8px 18px rgba(30, 95, 173, 0.3);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

.skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 16px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* Accent glow bar that sweeps up on hover */
.skill-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.skill-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.14);
}

.skill-card:hover::before {
  transform: scaleX(1);
}

/* Uniform rounded "icon chip" so every logo sits on a consistent surface */
.skill-logo {
  width: 74px;
  height: 74px;
  padding: 15px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: background 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.skill-card:hover .skill-logo {
  background: color-mix(in srgb, var(--accent-color), transparent 84%);
}

/* Grok's logo is white-on-transparent → needs a dark chip to be visible */
.skill-logo--dark {
  background: #1a1a1a;
}
.skill-card:hover .skill-logo--dark {
  background: #000;
}

.skill-logo img {
  max-width: 100%;
  max-height: 100%;
  /* Start slightly muted, bloom to full colour & scale on hover */
  filter: grayscale(30%);
  opacity: 0.95;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease, opacity 0.45s ease;
}

.skill-card:hover .skill-logo img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.12) rotate(-4deg);
}

/* Icon-based logos (WinDev, Vibe Coding, Contenu IA) */
.skill-logo-icon {
  font-size: 38px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  border-radius: 18px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s ease, color 0.4s ease;
}

.skill-card:hover .skill-logo-icon {
  transform: scale(1.12) rotate(-4deg);
  background: var(--accent-gradient);
  color: #fff;
}

.skill-card span {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--heading-color);
  text-align: center;
}

@media (max-width: 575px) {
  .skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
  .skill-card {
    padding: 20px 10px;
  }
  .skill-logo {
    width: 60px;
    height: 60px;
    padding: 11px;
    border-radius: 15px;
  }
  .skill-logo-icon {
    font-size: 30px;
  }
}

/* ---------- Skill detail modal (custom) ---------- */
.skill-card {
  cursor: pointer;
}

.skill-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.skill-modal.open {
  visibility: visible;
  opacity: 1;
}

.skill-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 31, 0.72);
  backdrop-filter: blur(6px);
}

.skill-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface-color);
  border-radius: 22px;
  padding: 40px 32px 34px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(30px) scale(0.94);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.skill-modal.open .skill-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.skill-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  color: var(--heading-color);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.skill-modal-close:hover {
  background: #e63946;
  color: #fff;
  transform: rotate(90deg);
}

.skill-modal-logo {
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  padding: 18px;
  animation: skillLogoPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.skill-modal-logo img {
  max-width: 100%;
  max-height: 100%;
}

.skill-modal-logo.is-icon {
  font-size: 44px;
  color: var(--accent-color);
}

@keyframes skillLogoPop {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.skill-modal-tag {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.skill-modal-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--heading-color);
}

.skill-modal-desc {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin: 0;
}

/* Hint that cards are clickable */
.skill-card::after {
  content: "\f431";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 14px;
  color: color-mix(in srgb, var(--accent-color), transparent 35%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.skill-card:hover::after {
  opacity: 1;
}

/* ---------- Services page extra polish (custom) ---------- */
.services .service-item {
  padding-top: 44px;
  padding-bottom: 44px;
}

/* Circular tinted badge behind each icon */
.services .service-item .icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 22px;
}

.services .service-item.item-cyan .icon   { background: rgba(13, 202, 240, 0.12); }
.services .service-item.item-orange .icon { background: rgba(253, 126, 20, 0.12); }
.services .service-item.item-teal .icon   { background: rgba(32, 201, 151, 0.12); }
.services .service-item.item-red .icon    { background: rgba(223, 21, 41, 0.12); }
.services .service-item.item-indigo .icon { background: rgba(102, 16, 242, 0.12); }
.services .service-item.item-pink .icon   { background: rgba(243, 38, 140, 0.12); }

/* Badge fills with its colour on hover, icon turns white */
.services .service-item.item-cyan:hover .icon   { background: #0dcaf0; }
.services .service-item.item-orange:hover .icon { background: #fd7e14; }
.services .service-item.item-teal:hover .icon   { background: #20c997; }
.services .service-item.item-red:hover .icon    { background: #df1529; }
.services .service-item.item-indigo:hover .icon { background: #6610f2; }
.services .service-item.item-pink:hover .icon   { background: #f3268c; }

.services .service-item:hover .icon i {
  color: #fff !important;
}

/* Per-item accent colour for the top sweep bar */
.services .service-item.item-cyan::before   { background: #0dcaf0; }
.services .service-item.item-orange::before { background: #fd7e14; }
.services .service-item.item-teal::before   { background: #20c997; }
.services .service-item.item-red::before    { background: #df1529; }
.services .service-item.item-indigo::before { background: #6610f2; }
.services .service-item.item-pink::before   { background: #f3268c; }

/* "En savoir plus" affordance revealed on hover */
.services .service-item h3 {
  margin-top: 6px;
}

.services .service-item .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-color);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.services .service-item:hover .learn-more {
  opacity: 1;
  transform: translateY(0);
}

.services .service-item .learn-more i {
  transition: transform 0.3s ease;
}

.services .service-item:hover .learn-more i {
  transform: translateX(4px);
}

/* ============================================================
   Portfolio (Mes Projets) — premium redesign (custom)
   ============================================================ */

/* ---- Filter pills ---- */
.portfolio .portfolio-filters li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 5px 8px;
  padding: 9px 18px;
  background: var(--surface-color);
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: #fff;
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(30, 95, 173, 0.32);
  transform: translateY(-2px);
}

/* Count badge inside each filter */
.portfolio .portfolio-filters .filter-count {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--default-color), transparent 88%);
  color: var(--default-color);
  transition: background 0.35s ease, color 0.35s ease;
}

.portfolio .portfolio-filters li:hover .filter-count,
.portfolio .portfolio-filters li.filter-active .filter-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ---- Project tiles: see the "pf-card" case-file system further down ---- */

@media (hover: none) {
  /* Services: the "En savoir plus" link is hover-revealed → show it on touch */
  .services .service-item .learn-more {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .services .service-item .learn-more {
    opacity: 1;
    transform: none;
  }
}

/*--------------------------------------------------------------
# Interaction polish (site-wide) — tactile feedback & typographic detail
--------------------------------------------------------------*/

/* Scale on press: subtle tactile feedback on every primary action.
   0.96 is the sweet spot — anything lower feels exaggerated. */
.btn-get-started:active,
.hero .btn-outline:active,
.btn-cta:active,
.pf-feature:active,
.services .learn-more:active,
.php-email-form button[type="submit"]:active,
.skill-card:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

/* Balanced headings avoid lonely single-word last lines;
   pretty body text avoids orphans. */
h1, h2, h3,
.section-title h2,
.hero h2 {
  text-wrap: balance;
}

p,
.section-title p,
.about .content p {
  text-wrap: pretty;
}

/* Dynamic counters shouldn't shift width as digits change */
.stats .stats-item span,
.stats-item [data-purecounter-end] {
  font-variant-numeric: tabular-nums;
}

/* Subtle 1px outline gives content images consistent edge depth.
   Pure black in light, pure white in dark — never a tinted neutral. */
.about .col-lg-4 img,
.portfolio .pf-card__media img,
.resume .resume-item img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  .about .col-lg-4 img,
  .portfolio .pf-card__media img,
  .resume .resume-item img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

/*--------------------------------------------------------------
# Services page — illustrated cards, tech tags & work process
--------------------------------------------------------------*/

/* Ring-spin & dot-float keyframes — reused by the home #intro cards and the
   project cover tiles (the service icon itself is now replaced by an SVG). */
@keyframes svcRingSpin { to { transform: rotate(360deg); } }
@keyframes svcDotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Tech / tool tags — make each service concrete at a glance */
.services-page .service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 16px;
}
.services-page .service-tags span {
  font-family: var(--nav-font);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 50px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: background 0.3s ease;
}
.services-page .service-item:hover .service-tags span {
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
}

/* ---- Work process timeline ("Comment je travaille") ---- */
.process .process-item {
  position: relative;
  text-align: center;
  padding: 0 14px;
}
.process .process-step {
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 14px 30px rgba(30, 95, 173, 0.35);
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.process .process-item:hover .process-step {
  transform: translateY(-6px) scale(1.05);
}
.process .process-step i { font-size: 32px; }
.process .process-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.process .process-item p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

/* Connecting line linking the steps on wider screens */
@media (min-width: 768px) {
  .process .process-item::before {
    content: "";
    position: absolute;
    top: 39px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--accent-color), transparent 70%);
    z-index: 1;
  }
  .process .process-item:first-child::before { display: none; }
}

/*--------------------------------------------------------------
# CV page — heading icons, quick facts, print/download
--------------------------------------------------------------*/

/* Icon badge on each résumé section heading */
.resume-page .resume .resume-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.resume-page .resume .resume-title i {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 12px;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 8px 20px rgba(30, 95, 173, 0.3);
}

/* Quick-facts strip with animated counters */
.cv-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 767px) {
  .cv-facts { grid-template-columns: repeat(2, 1fr); }
}
.cv-fact {
  text-align: center;
  padding: 24px 14px;
  border-radius: 16px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cv-fact:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.cv-fact-num {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.cv-fact-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* Download-CV button (links to the PDF) */
.cv-actions { margin-top: 24px; }
.cv-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--accent-gradient);
  border: 0;
  box-shadow: 0 12px 30px rgba(30, 95, 173, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}
.cv-download:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(30, 95, 173, 0.5);
}
.cv-download:active { transform: scale(0.96); }

/* Clean print layout — CV only */
@media print {
  #header, #footer, .scroll-top, .parallax-band, .cv-actions,
  .mobile-nav-toggle, #preloader, .cv-facts {
    display: none !important;
  }
  .resume.section { padding: 12px 0 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/*--------------------------------------------------------------
# Contact page — availability & quick actions
--------------------------------------------------------------*/
.contact .info-header { padding: 20px 16px 2px; }
.contact .availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a7f4b;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.3);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.contact .availability .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25d366;
  animation: availPulse 2s infinite;
}
@keyframes availPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.contact .info-heading {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 21px;
  margin: 0;
  color: var(--heading-color);
}
.contact .quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 16px 6px;
}
.contact .quick-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--heading-font);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact .quick-actions .qa-wa { background: #25d366; }
.contact .quick-actions .qa-mail { background: var(--accent-gradient); }
.contact .quick-actions a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.contact .quick-actions a:active { transform: scale(0.96); }

/*--------------------------------------------------------------
# WhatsApp mini-chat widget (sticky, contact page)
--------------------------------------------------------------*/
.wa-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  width: 60px;   /* the widget's hit area is just the launcher; the panel floats above */
  height: 60px;
}

/* While the mobile menu is open, the launcher must not sit over the links */
.mobile-nav-active .wa-widget { display: none; }

/* Floating launcher */
.wa-fab {
  position: relative;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  animation: waPulse 2.4s infinite;
  transition: transform 0.3s ease, background 0.3s ease;
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab:active { transform: scale(0.94); }
.wa-fab .wa-fab-closeicon { display: none; font-size: 24px; }
.wa-widget.is-open .wa-fab { background: #128c7e; animation: none; }
.wa-widget.is-open .wa-fab .wa-fab-open { display: none; }
.wa-widget.is-open .wa-fab .wa-fab-closeicon { display: block; }

.wa-fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--background-color);
}
.wa-widget.is-open .wa-fab-badge { display: none; }

/* Chat panel — floats above the launcher (absolute), so it never inflates
   the widget's clickable box when closed (that box would otherwise swallow
   clicks on the form and, on mobile, on the open nav menu). */
.wa-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(86vw, 330px);
  border-radius: 16px;
  overflow: hidden;
  background: #ece5dd;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform-origin: bottom right;
  transform: translateY(16px) scale(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
}
.wa-widget.is-open .wa-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Header */
.wa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #075e54;
  color: #fff;
}
.wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa-who { flex: 1; line-height: 1.25; min-width: 0; }
.wa-who strong { font-size: 15px; display: block; }
.wa-who span { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 5px; }
.wa-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34ff8b;
  animation: availPulse 2s infinite;
}
.wa-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.85;
  padding: 4px;
  line-height: 0;
}
.wa-close:hover { opacity: 1; }

/* Body / message bubble */
.wa-body {
  padding: 18px 14px;
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
}
.wa-bubble {
  position: relative;
  background: #fff;
  padding: 10px 12px 20px;
  border-radius: 10px;
  border-top-left-radius: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  max-width: 88%;
}
.wa-bubble-time {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 10px;
  color: #667781;
}

/* Input row */
.wa-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #f0f0f0;
  align-items: center;
}
.wa-text {
  flex: 1;
  border: 0;
  border-radius: 50px;
  padding: 11px 16px;
  font-size: 14px;
  background: #fff;
  color: #111b21;
  outline: none;
}
.wa-send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.wa-send:hover { background: #1ebd5b; }
.wa-send:active { transform: scale(0.92); }

@media (max-width: 480px) {
  .wa-widget { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-online { animation: none; }
}

/*--------------------------------------------------------------
# Home "Ce que je fais" — floating tech field + animated icons
--------------------------------------------------------------*/
#intro {
  position: relative;
  overflow: hidden;
}
#intro > .container { position: relative; z-index: 2; }

/* Ambient field of floating tech chips behind the section */
.tech-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Soft accent glows for depth */
.tech-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--accent-color), transparent 88%), transparent 42%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 46%);
}

.tech-ball {
  position: absolute;
  width: clamp(40px, 4.6vw, 60px);
  height: clamp(40px, 4.6vw, 60px);
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  outline: 1px solid rgba(0, 0, 0, 0.04);
  opacity: 0.62;
  will-change: transform;
}
.tech-ball img { width: 56%; height: 56%; object-fit: contain; }
.tech-ball.tb-dark { background: #1a1a1a; }

@keyframes techFloatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(14px, -30px) rotate(6deg); }
}
@keyframes techFloatB {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-16px, -34px) rotate(-6deg); }
}
@keyframes techFloatC {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(12px, -18px) rotate(5deg); }
  66% { transform: translate(-12px, -28px) rotate(-4deg); }
}

.tb1  { top: 8%;  left: 5%;  animation: techFloatA 11s ease-in-out -1s infinite; }
.tb2  { top: 14%; left: 90%; animation: techFloatB 13s ease-in-out -3s infinite; }
.tb3  { top: 32%; left: 2%;  animation: techFloatC 15s ease-in-out -5s infinite; }
.tb4  { top: 42%; left: 94%; animation: techFloatA 12s ease-in-out -2s infinite; }
.tb5  { top: 64%; left: 6%;  animation: techFloatB 14s ease-in-out -6s infinite; }
.tb6  { top: 72%; left: 91%; animation: techFloatC 12s ease-in-out -4s infinite; }
.tb7  { top: 9%;  left: 30%; animation: techFloatB 13s ease-in-out -7s infinite; }
.tb8  { top: 11%; left: 66%; animation: techFloatC 16s ease-in-out -2s infinite; }
.tb9  { top: 85%; left: 22%; animation: techFloatA 12s ease-in-out -5s infinite; }
.tb10 { top: 87%; left: 74%; animation: techFloatB 15s ease-in-out -1s infinite; }
.tb11 { top: 48%; left: 14%; animation: techFloatC 14s ease-in-out -8s infinite; }
.tb12 { top: 52%; left: 84%; animation: techFloatA 13s ease-in-out -3s infinite; }
.tb13 { top: 90%; left: 48%; animation: techFloatB 12s ease-in-out -6s infinite; }
.tb14 { top: 4%;  left: 80%; animation: techFloatC 15s ease-in-out -4s infinite; }

/* Animated icons for the three "Ce que je fais" cards */
.index-page #intro .service-item .icon::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 62%);
  animation: svcRingSpin 18s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}
.index-page #intro .service-item:hover .icon::before {
  animation-duration: 7s;
  opacity: 0.9;
}
.index-page #intro .service-item .icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 80%);
  animation: svcDotFloat 4.5s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tech-ball,
  .index-page #intro .service-item .icon::before,
  .index-page #intro .service-item .icon::after {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Unified service icons — one brand voice (cobalt chip, amber on hover)
# Replaces the template's six-colour rainbow with the Ouattware system.
# Placed last so it wins the cascade over the .item-* rules above.
--------------------------------------------------------------*/
.services .service-item[class*="item-"] .icon i {
  color: var(--accent-color);
}
.services .service-item[class*="item-"] .icon {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}
/* Hover: the chip lights up like the bulb — cobalt fill, warm amber glow */
.services .service-item[class*="item-"]:hover .icon {
  background: var(--accent-gradient);
  box-shadow: 0 12px 26px -8px rgba(30, 95, 173, 0.5),
              0 0 26px color-mix(in srgb, var(--glow-color), transparent 68%);
}
.services .service-item[class*="item-"]:hover .icon i {
  color: #fff !important;
}
/* Top sweep bar and the dashed ring/orb all speak cobalt */
.services .service-item[class*="item-"]::before {
  background: var(--accent-gradient);
}
.index-page #intro .service-item .icon::after {
  background: var(--glow-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow-color), transparent 80%);
}

/*--------------------------------------------------------------
# Services page — illustrated "blueprint" cover per card (CSS/SVG, animated)
# A cobalt band with a drifting grid, an amber light-sweep and floating
# UI tiles; the service icon lifts up to overlap its lower edge.
--------------------------------------------------------------*/
.services-page .service-item {
  padding-top: 0;               /* the cover bleeds to the top edge */
}

.services-page .svc-illus {
  position: relative;
  margin: 0 -30px 24px;         /* bleed to the card's side padding, gap below */
  height: 152px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(130% 150% at 15% 0%, #2c7be0 0%, #1e5fad 48%, #143c72 100%);
}

/* The bespoke SVG scene carries each service's identity now,
   so the old overlapping icon disc is retired. */
.services-page .service-item .icon { display: none; }

.services-page .svc-illus__art {
  position: relative;
  z-index: 2;
  width: 84%;
  max-width: 272px;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(6, 16, 32, 0.38));
  transition: transform 0.55s var(--ease-spring);
}
.services-page .service-item:hover .svc-illus__art {
  transform: translateY(-5px) scale(1.03);
}
.services-page .svc-illus__art .art-pulse {
  transform-origin: center;
  animation: artPulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .services-page .svc-illus__art .art-pulse { animation: none; }
}

/* Drifting blueprint grid, faded toward the bottom */
.services-page .svc-illus__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 42%, transparent 80%);
          mask-image: radial-gradient(130% 110% at 50% 0%, #000 42%, transparent 80%);
  animation: svcGridPan 20s linear infinite;
}
@keyframes svcGridPan { to { background-position: 26px 26px; } }

/* Amber light sweeping across the band — the bulb again */
.services-page .svc-illus__sweep {
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--glow-color), transparent 55%), transparent);
  filter: blur(6px);
  animation: svcSweep 6.5s ease-in-out infinite;
}
@keyframes svcSweep { 0% { left: -45%; } 55%, 100% { left: 125%; } }

@media (max-width: 575px) {
  .services-page .svc-illus { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .svc-illus__grid,
  .services-page .svc-illus__sweep { animation: none; }
}

/* Shared pulse keyframe — used by the little "alive" details inside every
   bespoke SVG scene, both here and on the Services page illustrations. */
@keyframes artPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/*--------------------------------------------------------------
# Projects — case-file cards (redesign #2)
# A horizontal split card (media | body) with the description always
# visible — no more hover-to-reveal. Each category carries its own
# accent (cobalt/Web, violet/Mobile, teal/Infographie) through three
# custom properties, so one ruleset serves all three palettes.
--------------------------------------------------------------*/
.portfolio-item.filter-web,    .pf-feature-item.filter-web    { --pf-accent: #1e5fad; --pf-accent-2: #2c7be0; }
.portfolio-item.filter-mobile, .pf-feature-item.filter-mobile { --pf-accent: #6d4fe0; --pf-accent-2: #8a6ff0; }
.portfolio-item.filter-design, .pf-feature-item.filter-design { --pf-accent: #0e9d8c; --pf-accent-2: #14b8a6; }

.pf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-color);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 91%);
  box-shadow: 0 1px 1px rgba(10, 18, 32, 0.04), 0 10px 30px -8px rgba(10, 18, 32, 0.16);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease;
}
@media (min-width: 576px) {
  .pf-card { flex-direction: row; }
}
.pf-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--pf-accent), transparent 55%);
  box-shadow: 0 2px 3px rgba(10, 18, 32, 0.05),
              0 26px 55px -16px color-mix(in srgb, var(--pf-accent), transparent 35%);
}

/* Colored spine — the one signature element, always on the left edge
   whether the card is stacked (mobile) or split (desktop) */
.pf-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  z-index: 3;
  background: linear-gradient(180deg, var(--pf-accent), var(--pf-accent-2));
}

.pf-card__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 220px;   /* stacked mobile: explicit, since the img below is out of flow */
  overflow: hidden;
}
@media (min-width: 576px) {
  .pf-card__media {
    width: 42%;
    flex-basis: 42%;
    height: auto;      /* row mode: stretches to match .pf-card__body's own height */
    min-height: 200px; /* floor, in case the description is a single short line */
  }
}
/* Absolutely positioned (out of normal flow) so a source image's native
   aspect ratio — some are wide banners, some are tall portrait kakemonos —
   never dictates the row's height. Without this, flexbox's hypothetical
   sizing pass reads the (still in-flow) image's intrinsic ratio *before*
   stretch is applied, so one tall photo would inflate the whole card and
   leave the neighbouring short description stranded in empty space. */
.pf-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pf-card:hover .pf-card__media img {
  transform: scale(1.08);
}

/* Zoom-to-lightbox control — small, explicit, always reachable (no more
   hover-only affordance that touch devices could never see) */
.pf-card__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  background: rgba(10, 18, 32, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-spring), background 0.3s ease;
}
.pf-card:hover .pf-card__zoom {
  opacity: 1;
  transform: scale(1);
}
.pf-card__zoom:hover {
  background: var(--pf-accent);
  border-color: transparent;
}
@media (hover: none) {
  .pf-card__zoom { opacity: 1; transform: scale(1); }
}

.pf-card__body {
  position: relative;
  flex: 1 1 auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--heading-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--pf-accent);
  background: color-mix(in srgb, var(--pf-accent), transparent 90%);
  padding: 5px 12px;
  border-radius: 50px;
}
.pf-card__cat i {
  font-size: 12px;
}

.pf-card__body h4 {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--heading-color);
}
.pf-card__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  flex: 1;
}

/* Cover (SVG scene) tiles reuse the same media slot */
.pf-card__cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(130% 140% at 20% 0%, var(--pf-accent-2) 0%, var(--pf-accent) 55%, color-mix(in srgb, var(--pf-accent), #000 32%) 100%);
}
.pf-card__cover-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 45%, transparent 82%);
          mask-image: radial-gradient(120% 120% at 50% 40%, #000 45%, transparent 82%);
  animation: svcGridPan 22s linear infinite;
}
.pf-card__art {
  position: relative;
  z-index: 2;
  width: 78%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(6, 16, 32, 0.4));
  transition: transform 0.55s var(--ease-spring);
}
.pf-card:hover .pf-card__art {
  transform: translateY(-5px) scale(1.04);
}
.pf-card__art .art-pulse {
  transform-origin: center;
  animation: artPulse 3.2s ease-in-out infinite;
}

/* Filter pills pick up the matching category gradient once selected */
.portfolio-filters li[data-filter=".filter-web"].filter-active {
  background: linear-gradient(135deg, #2c7be0, #1e5fad);
  box-shadow: 0 10px 24px rgba(30, 95, 173, 0.32);
}
.portfolio-filters li[data-filter=".filter-mobile"].filter-active {
  background: linear-gradient(135deg, #8a6ff0, #6d4fe0);
  box-shadow: 0 10px 24px rgba(109, 79, 224, 0.32);
}
.portfolio-filters li[data-filter=".filter-design"].filter-active {
  background: linear-gradient(135deg, #14b8a6, #0e9d8c);
  box-shadow: 0 10px 24px rgba(14, 157, 140, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .pf-card__cover-grid,
  .pf-card__art .art-pulse { animation: none; }
}

/*--------------------------------------------------------------
# Home — "Projets phares" feature cards
# A vertical sibling of the pf-card system (image on top, full width):
# more spacious for a 3-up showcase than the dense case-file layout,
# but sharing the same per-category accent variables.
--------------------------------------------------------------*/
.pf-feature {
  display: block;
  position: relative;
  height: 100%;
  background: var(--surface-color);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 91%);
  box-shadow: 0 1px 1px rgba(10, 18, 32, 0.04), 0 10px 30px -8px rgba(10, 18, 32, 0.16);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease;
}
.pf-feature:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--pf-accent), transparent 55%);
  box-shadow: 0 2px 3px rgba(10, 18, 32, 0.05),
              0 30px 60px -16px color-mix(in srgb, var(--pf-accent), transparent 35%);
  color: inherit;
  text-decoration: none;
}

/* Top spine — the same signature, rotated to run along the top edge */
.pf-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 3;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
}

.pf-feature__media {
  position: relative;
  height: 230px;
  overflow: hidden;
}
.pf-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pf-feature:hover .pf-feature__media img {
  transform: scale(1.08);
}
/* Dark wash at the base so the category chip stays legible over any photo */
.pf-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 18, 31, 0.6), transparent 55%);
}

.pf-feature__cat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heading-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: color-mix(in srgb, var(--pf-accent), transparent 12%);
  padding: 5px 12px;
  border-radius: 50px;
}

.pf-feature__body {
  padding: 22px 24px 24px;
}
.pf-feature__body h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--heading-color);
}
.pf-feature__body p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}
.pf-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--pf-accent);
}
.pf-feature__link i {
  font-size: 13px;
  transition: transform 0.3s ease;
}
.pf-feature:hover .pf-feature__link i {
  transform: translateX(4px);
}