/*
Theme Name: Jacques Corporate One Page
Theme URI: https://example.com/
Author: Jacques
Author URI: https://example.com/
Description: Thème WordPress one-page corporate avec Bootstrap, Font Awesome et formulaire de contact en fenêtre modale.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: jacques-corporate
*/

/* Logo font — also enqueue via wp_enqueue_style() in functions.php for best performance */
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

:root {
  --color-primary: #0000FF;
  --color-black: #000000;
  --color-dark: #090b13;
  --color-dark-soft: #121622;
  --color-white: #ffffff;
  --color-muted: #aab0c0;
  --color-border: rgba(255,255,255,.12);
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-logo: "Italiana", serif;
  --section-space: clamp(5rem, 9vw, 8rem);
  --transition: 220ms ease;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-primary); }
img { max-width: 100%; height: auto; }

.site-header {
  min-height:68px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: rgba(0,0,0,.82);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(14px);
}
.navbar-brand { padding: 0; }
.navbar{
    padding:.55rem 0;
}

/* ===== Jacques Rima logo ===== */
.jacques-logo {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
}

/* diamond monogram */
.logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--color-primary);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  border-width:1px;
}
.logo-mark span {
  display: block;
  transform: rotate(-45deg);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--color-primary);
  transition: color var(--transition);
}
.jacques-logo:hover .logo-mark { background: var(--color-primary); }
.jacques-logo:hover .logo-mark span { color: var(--color-white); }

/* wordmark */
.logo-text { line-height: 1; }
.logo-name {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  transition: color .4s ease;
}
.jacques-logo:hover .logo-name { color: var(--color-primary); }

.logo-rule {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 3px;
}
.logo-rule .line {
  height: 1px;
  background: var(--color-border);
  flex: 1;
  transition: background .5s ease;
}
.jacques-logo:hover .logo-rule .line { background: rgba(0,0,255,.6); }
.logo-rule .label {
  font-size: .48rem;
  letter-spacing: .28em;
  color: var(--color-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .logo-name { font-size: 1.05rem; letter-spacing: .14em; }
  .logo-rule .label { display: none; }
}
/* ===== end logo ===== */
/* ===== Premium nav menu ===== */
.navbar-nav { gap: 0; }

.nav-item { position: relative; }
.nav-item + .nav-item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-border);
}
@media (max-width: 991.98px) {
  .nav-item + .nav-item::before { display: none; }
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.7) !important;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .65rem 1.05rem !important;
  border: 1px solid transparent;
  transition: color .4s ease, letter-spacing .4s ease, border-color .4s ease, background .4s ease, transform .4s ease;
}
.nav-link::before {
  content: "\f105"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .62rem;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  bottom: 6px;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-white) !important;
  letter-spacing: .12em;
  background: rgba(0,0,255,.07);
  border-color: rgba(0,0,255,.35);
  transform: translateY(-1px);
}
.nav-link:hover::before,
.nav-link.active::before {
  opacity: 1;
  transform: translateX(0);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - 2.1rem);
}

/* Contact CTA — soft-filled ghost: visible at rest without being a heavy solid block */
.nav-cta {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,255,.14);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  padding: .55rem 1.4rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .4s ease, border-color .4s ease, letter-spacing .4s ease, background .4s ease;
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-cta:hover {
  background: rgba(0,0,255,.14);
  letter-spacing: .14em;
}
.nav-cta:hover::before { transform: scaleX(1); }

@media (max-width: 991.98px) {
  .nav-item .nav-cta { margin-top: .6rem; width: 100%; justify-content: center; }
}

/* Custom toggler — three bars that resolve into an X, in place of the stock icon */
.navbar-toggler {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(0,0,255,.25); }
.navbar-toggler-icon {
  position: relative;
  width: 18px;
  height: 1px;
  background: var(--color-white);
  transition: background .35s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-white);
  transition: transform .35s ease, top .35s ease, opacity .35s ease;
}
.navbar-toggler-icon::before { top: -6px; }
.navbar-toggler-icon::after { top: 6px; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--color-primary);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--color-primary);
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1.2rem;
    padding-top: 1.2rem !important;
    border-top: 1px solid var(--color-border);
  }
  .nav-link { padding: .7rem 0 !important; border-color: transparent !important; background: transparent !important; transform: none !important; }
  .nav-link::after { display: none; }
  .nav-link::before { display: none; }
}

/* ===== "Plus" dropdown — groups overflow links so the menu doesn't wrap past 4-5 items ===== */
.nav-item.dropdown .dropdown-toggle::after { display: none; }
.nav-item.dropdown .nav-link::before { content: none; } /* no chevron-in on the group trigger, it has its own indicator */
.dropdown-toggle-icon {
  font-size: .6rem;
  color: var(--color-primary);
  transition: transform .35s ease;
}
.nav-item.dropdown.show .dropdown-toggle-icon,
.nav-link[aria-expanded="true"] .dropdown-toggle-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  margin-top: .4rem;
  min-width: 200px;
  padding: .4rem;
  background: var(--color-dark-soft);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}
.dropdown-item {
  color: rgba(255,255,255,.75);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .65rem .9rem;
  border-left: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease, padding-left .3s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--color-white);
  background: rgba(0,0,255,.08);
  border-left-color: var(--color-primary);
  padding-left: 1.15rem;
}

@media (max-width: 991.98px) {
  .dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .dropdown-item { padding: .5rem 0; }

  /* No "Plus" trigger on mobile — submenu items just sit inline in the stacked list */
  .nav-item.dropdown > .nav-link.dropdown-toggle { display: none; }
  .nav-item.dropdown .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0;
    padding: 0;
  }
}
/* ===== end dropdown ===== */
/* ===== end premium nav menu ===== */


.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 8rem 0 5rem;
  background:
    radial-gradient(circle at 78% 28%, rgba(0,0,255,.28), transparent 26%),
    linear-gradient(135deg, #000 0%, #090b13 48%, #101526 100%);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-kicker::before { content: ""; width: 34px; height: 2px; background: var(--color-primary); }
.hero-title {
  max-width: 900px;
  margin: 1rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 10vw, 9rem);
  line-height: .88;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.hero-title span { color: var(--color-primary); }
.hero-copy { max-width: 700px; color: #c4c8d2; font-size: 1.08rem; }

.btn-primary-custom,
.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .75rem 1.3rem;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.btn-primary-custom { background: var(--color-primary); color: #fff; }
.btn-primary-custom:hover { background: #fff; border-color: #fff; color: #000; }
.btn-outline-custom { background: transparent; color: #fff; }
.btn-outline-custom:hover { background: #fff; border-color: #fff; color: #000; }

.section { padding: var(--section-space) 0; position: relative; }
.section-alt { background: var(--color-black); }
.section-soft { background: var(--color-dark-soft); }
.section-number {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .12em;
}
.section-title {
  margin: .25rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: .95;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.section-intro { max-width: 720px; color: var(--color-muted); }
.blue-line { width: 72px; height: 4px; background: var(--color-primary); margin: 1.5rem 0; }

.stat-card,
.service-card,
.quality-card,
.reference-card,
.portfolio-card {
  height: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--color-border);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.stat-card:hover,
.service-card:hover,
.quality-card:hover,
.reference-card:hover,
.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
}
.stat-card { padding: 1.6rem; }
.stat-card strong { display: block; color: var(--color-primary); font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.stat-card span { color: var(--color-muted); }

.portfolio-card { overflow: hidden; }
.portfolio-visual {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(0,0,255,.8), rgba(0,0,0,.15)),
    #111;
  border-bottom: 1px solid var(--color-border);
}
.portfolio-visual i { font-size: 4rem; opacity: .9; }
.portfolio-content { padding: 1.5rem; }
.portfolio-content small { color: var(--color-primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-content h3 { margin: .35rem 0 .65rem; font-family: var(--font-display); font-size: 2rem; letter-spacing: .03em; }
.portfolio-content p { color: var(--color-muted); margin: 0; }

.service-card, .quality-card { padding: 2rem; }
.card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  color: #fff;
  background: var(--color-primary);
  font-size: 1.35rem;
}
.service-card h3, .quality-card h3, .reference-card h3 { font-family: var(--font-display); font-size: 2rem; letter-spacing: .03em; }
.service-card p, .quality-card p, .reference-card p { color: var(--color-muted); }

.reference-card { padding: 1.7rem; text-align: center; }
.reference-logo {
  min-height: 90px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border: 1px dashed rgba(255,255,255,.18);
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: .08em;
}

.skill-item { margin-bottom: 1.5rem; }
.skill-header { display: flex; justify-content: space-between; margin-bottom: .55rem; font-weight: 700; }
.progress { height: 8px; background: rgba(255,255,255,.09); border-radius: 0; }
.progress-bar { background: var(--color-primary); }

.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; width: 2px; background: rgba(255,255,255,.14); }
.timeline-item { position: relative; padding: 0 0 2.5rem 2rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: .45rem;
  width: 16px;
  height: 16px;
  border: 3px solid var(--color-primary);
  background: var(--color-dark);
}
.timeline-date { color: var(--color-primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.timeline-item h3 { margin: .35rem 0; font-family: var(--font-display); font-size: 2rem; }
.timeline-item p { color: var(--color-muted); }

.cta-section {
  background: linear-gradient(100deg, var(--color-primary), #1111aa);
}
.cta-section .section-title { margin-bottom: 0; }

.site-footer { padding: 2.4rem 0; background: #000; border-top: 1px solid var(--color-border); }
.social-link {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border);
}
.social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.modal-content { background: var(--color-dark); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.modal-header, .modal-footer { border-color: var(--color-border); }
.modal-title { font-family: var(--font-display); font-size: 2.4rem; letter-spacing: .04em; }
.btn-close { filter: invert(1); }
.form-control, .form-select {
  min-height: 50px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: #0d1019;
  color: #fff;
}
.form-control:focus, .form-select:focus { background: #0d1019; color: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(0,0,255,.18); }
.form-control::placeholder { color: #7c8291; }
.alert { border-radius: 0; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding: 1rem 0; }
  .hero-title { font-size: clamp(4rem, 16vw, 7rem); }
}

.hero {
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9rem 1.5rem 6rem;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(28, 31, 55, 0.95) 0%,
            rgba(9, 11, 19, 0.95) 42%,
            #05060a 100%
        );
}

/* Fine grille de fond */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    opacity: 0.24;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
    mask-image: radial-gradient(
        circle at center,
        #000 20%,
        transparent 78%
    );
}

/* Grain subtil */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

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

.hero-content {
    width: min(100%, 1050px);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Kicker */

.hero-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 2rem;
    padding: 0.55rem 1rem 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(14px);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.hero-kicker-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
}

.hero-kicker::before {
    display: none;
}

/* Titre */

.hero-title {
    max-width: 1020px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.7rem, 8.5vw, 8.4rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
}

.hero-title-highlight {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0.08em auto 0;
    padding: 0 0.08em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.72);
}

.hero-title-highlight::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0.08em;
    height: 0.08em;
    z-index: -1;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
}

/* Description */

.hero-copy {
    max-width: 660px;
    margin: 2.1rem auto 0;
    color: rgba(225, 228, 238, 0.66);
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    font-weight: 300;
    line-height: 1.9;
    text-align: center;
}

/* Actions */

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.7rem;
}

.hero-actions .btn-primary-custom,
.hero-actions .btn-outline-custom {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0 1.6rem;
    border-radius: 100px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    will-change: transform;
}

.hero-actions .btn-primary-custom {
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    box-shadow:
        0 14px 35px rgba(0, 0, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-actions .btn-primary-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-actions .btn-primary-custom span,
.hero-actions .btn-primary-custom i {
    position: relative;
    z-index: 2;
}

.hero-actions .btn-primary-custom:hover {
    color: #000;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.hero-actions .btn-primary-custom:hover::before {
    transform: translateX(0);
}

.hero-actions .btn-primary-custom i {
    transition: transform 0.35s ease;
}

.hero-actions .btn-primary-custom:hover i {
    transform: translateY(4px);
}

.hero-actions .btn-outline-custom {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
}

.hero-actions .btn-outline-custom::after {
    display: none;
}

.hero-actions .btn-outline-custom:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

.hero-actions .btn-outline-custom i {
    transition: transform 0.35s ease;
}

.hero-actions .btn-outline-custom:hover i {
    transform: translate(3px, -3px);
}

/* Signature sous les boutons */

.hero-signature {
    width: min(100%, 620px);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-signature span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    white-space: nowrap;
}

.hero-signature i {
    color: var(--color-primary);
    font-size: 0.25rem;
}

.hero-signature-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.16)
    );
}

.hero-signature-line:last-child {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.16),
        transparent
    );
}

/* Halos */

.hero-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    will-change: transform;
}

.hero-glow-left {
    width: 360px;
    height: 360px;
    left: -170px;
    top: 20%;
    background: rgba(0, 0, 255, 0.2);
}

.hero-glow-right {
    width: 430px;
    height: 430px;
    right: -220px;
    bottom: -100px;
    background: rgba(66, 69, 255, 0.16);
}

/* Cercles décoratifs */

.hero-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.hero-orbit-one {
    width: min(72vw, 920px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hero-orbit-two {
    width: min(54vw, 680px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border-style: dashed;
    transform: translate(-50%, -50%);
}

/* Scroll */

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero-scroll:hover {
    color: #fff;
}

.hero-scroll-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 0.65rem;
}

/* Responsive */

@media (max-width: 767.98px) {
    .hero {
        min-height: auto;
        padding: 8rem 1rem 6rem;
    }

    .hero-title {
        font-size: clamp(3.2rem, 15vw, 5.3rem);
        line-height: 0.92;
    }

    .hero-copy {
        max-width: 510px;
        margin-top: 1.6rem;
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .hero-actions {
        width: 100%;
        margin-top: 2.2rem;
    }

    .hero-actions .btn-primary-custom,
    .hero-actions .btn-outline-custom {
        width: min(100%, 340px);
    }

    .hero-signature {
        display: none;
    }

    .hero-scroll {
        display: none;
    }

    .hero-orbit-one {
        width: 130vw;
    }

    .hero-orbit-two {
        width: 96vw;
    }
}

@media (max-width: 430px) {
    .hero-kicker {
        letter-spacing: 0.12em;
        font-size: 0.61rem;
    }

    .hero-title {
        font-size: clamp(3rem, 15vw, 4rem);
    }
}

.hero-title-highlight::before {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-title-highlight.is-visible::before {
}
/* ===== Compact premium responsive header ===== */
.site-header {
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
  background: rgba(0,0,0,.94);
  border-bottom-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
#mainNav { min-height: 68px; padding: .55rem 0; }
.header-container { max-width: 1240px; }
.jacques-logo { gap: .75rem; }
.logo-mark { width: 32px; height: 32px; }
.logo-mark span { font-size: .78rem; }
.logo-name { font-size: 1rem; letter-spacing: .19em; }
.logo-rule { gap: .38rem; margin-top: 4px; }
.logo-rule .label { font-size: .45rem; letter-spacing: .26em; }

.navbar-nav { gap: .12rem; }
.nav-item + .nav-item::before { display: none; }
.nav-link {
  gap: .42rem;
  padding: .5rem .72rem !important;
  font-size: .67rem;
  letter-spacing: .09em;
  border-radius: 999px;
}
.nav-link > i:first-child {
  width: 13px;
  color: var(--color-primary);
  font-size: .72rem;
  text-align: center;
}
.nav-link::before { display: none; }
.nav-link::after { left: 50%; bottom: 2px; transform: translateX(-50%); }
.nav-link:hover,
.nav-link.active {
  letter-spacing: .1em;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
  transform: none;
}
.nav-link:hover::after,
.nav-link.active::after { width: 18px; }

.nav-contact-item { margin-left: .45rem; }
.nav-cta {
  gap: .5rem;
  min-height: 36px;
  padding: .48rem .9rem;
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .1em;
}
.nav-cta i { font-size: .7rem; }

.dropdown-menu { min-width: 190px; border-radius: 12px; padding: .45rem; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: 8px;
  font-size: .68rem;
  padding: .65rem .75rem;
}
.dropdown-item i { width: 15px; color: var(--color-primary); text-align: center; }
.dropdown-item:hover,
.dropdown-item:focus { padding-left: .9rem; }

.navbar-toggler {
  width: 36px;
  height: 36px;
  border-color: rgba(255,255,255,.18);
  border-radius: 50%;
}

@media (max-width: 991.98px) {
  #mainNav { min-height: 62px; padding: .45rem 0; }
  .header-container { position: relative; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-name { font-size: .92rem; }

  .navbar-collapse {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    max-height: calc(100svh - 62px);
    overflow-y: auto;
    margin: 0;
    padding: 1.15rem max(1rem, calc((100vw - 720px) / 2)) 1.5rem !important;
    background: rgba(5,6,10,.985);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 28px 50px rgba(0,0,0,.55);
    backdrop-filter: blur(20px);
  }
  body.admin-bar .navbar-collapse { top: 108px; max-height: calc(100svh - 108px); }
  .mobile-menu-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: .8rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-white);
    font-family: var(--font-logo);
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-menu-heading small {
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: .56rem;
    letter-spacing: .16em;
  }
  .navbar-nav { gap: .28rem; }
  .nav-link {
    width: 100%;
    justify-content: flex-start;
    gap: .85rem;
    padding: .78rem .85rem !important;
    border: 1px solid transparent !important;
    border-radius: 10px;
    font-size: .76rem;
    background: transparent !important;
  }
  .nav-link > i:first-child { width: 18px; font-size: .85rem; }
  .nav-link:hover,
  .nav-link.active { background: rgba(255,255,255,.045) !important; border-color: var(--color-border) !important; }
  .nav-link::after { display: none; }

  .nav-item.dropdown > .nav-link.dropdown-toggle { display: none; }
  .nav-item.dropdown .dropdown-menu {
    display: grid !important;
    position: static !important;
    gap: .28rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .dropdown-item {
    gap: .85rem;
    padding: .78rem .85rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255,255,255,.7);
  }
  .dropdown-item:hover,
  .dropdown-item:focus { padding-left: .85rem; border-color: var(--color-border); }

  .nav-contact-item { margin: .65rem 0 0; }
  .nav-item .nav-cta {
    width: 100%;
    min-height: 46px;
    margin: 0;
    justify-content: center;
    border-radius: 10px;
  }
  .mobile-menu-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-menu-footer i { margin-right: .45rem; color: var(--color-primary); font-size: .42rem; }
  body.mobile-menu-open { overflow: hidden; }
}

@media (max-width: 782px) {
  body.admin-bar .navbar-collapse { top: 108px; }
}

@media (max-width: 480px) {
  .logo-text { max-width: 158px; }
  .logo-name { font-size: .82rem; letter-spacing: .15em; }
  .logo-rule .label { display: inline; font-size: .4rem; }
}
/* ===== end compact premium responsive header ===== */

/* ===== Refined professional logo proportions ===== */
.site-header {
  background: rgba(0, 0, 0, .76);
  border-bottom-color: rgba(255, 255, 255, .085);
  backdrop-filter: blur(18px);
}

#mainNav {
  min-height: 64px;
  padding: .45rem 0;
}

.jacques-logo {
  gap: .72rem;
  padding: .15rem 0;
}

.logo-mark {
  width: 29px;
  height: 29px;
  border-color: rgba(0, 0, 255, .78);
  border-width: 1px;
}

.logo-mark span {
  font-size: .69rem;
  letter-spacing: 0;
}

.logo-text {
  line-height: .92;
}

.logo-name {
  font-size: .92rem;
  letter-spacing: .16em;
}

.logo-rule {
  gap: .35rem;
  margin-top: 4px;
}

.logo-rule .label {
  font-size: .43rem;
  letter-spacing: .22em;
  color: rgba(170, 176, 192, .76);
}

.logo-rule .line {
  background: rgba(255, 255, 255, .09);
}

.jacques-logo:hover .logo-mark {
  background: rgba(0, 0, 255, .12);
}

.jacques-logo:hover .logo-mark span {
  color: var(--color-primary);
}

.jacques-logo:hover .logo-name {
  color: var(--color-white);
}

.nav-link {
  font-size: .69rem;
  letter-spacing: .085em;
  padding: .48rem .72rem !important;
}

.nav-link:hover,
.nav-link.active {
  letter-spacing: .095em;
  transform: none;
}

.nav-cta {
  padding: .46rem .9rem;
  font-size: .67rem;
  letter-spacing: .09em;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .jacques-logo { gap: .6rem; }
  .logo-mark { width: 27px; height: 27px; }
  .logo-name { font-size: .82rem; letter-spacing: .13em; }
  .logo-rule .label { font-size: .39rem; }
  .nav-link { padding-inline: .56rem !important; }
}

@media (max-width: 991.98px) {
  #mainNav { min-height: 58px; padding: .36rem 0; }
  .jacques-logo { gap: .62rem; }
  .logo-mark { width: 27px; height: 27px; }
  .logo-mark span { font-size: .64rem; }
  .logo-name { font-size: .84rem; letter-spacing: .14em; }
  .logo-rule { margin-top: 3px; }
  .logo-rule .label { font-size: .39rem; }
  .navbar-toggler { width: 34px; height: 34px; }
  .navbar-collapse {
    top: 58px;
    max-height: calc(100svh - 58px);
  }
  body.admin-bar .navbar-collapse {
    top: 104px;
    max-height: calc(100svh - 104px);
  }
}

@media (max-width: 480px) {
  .jacques-logo { gap: .55rem; }
  .logo-mark { width: 25px; height: 25px; }
  .logo-name { font-size: .76rem; letter-spacing: .12em; }
  .logo-rule .label { font-size: .36rem; letter-spacing: .18em; }
}
/* ===== end refined professional logo proportions ===== */

.logo-mark{
    position:relative;
    overflow:hidden;
}

.logo-mark::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-170%;
    width:65%;
    height:340%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );
    transform:rotate(28deg);
    transition:left .9s cubic-bezier(.22,1,.36,1);
}

.jacques-logo:hover .logo-mark::before{
    left:220%;
}

.logo-mark::before{
    animation:logoShine 7s infinite;
}

@keyframes logoShine{
    0%,82%{
        left:-170%;
    }
    100%{
        left:220%;
    }
}

.hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, rgba(3, 6, 15, .26) 0%, rgba(3, 6, 15, .42) 50%, rgba(3, 6, 15, .60) 100%), url("assets/image/hero-software-background.png") center center/cover no-repeat
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 44%, transparent 0%, rgba(2, 5, 12, .10) 50%, rgba(2, 5, 12, .45) 100%)
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 6, 15, .18), transparent 30%, transparent 70%, rgba(3, 6, 15, .18))
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 34px;
    padding-bottom: 34px
}

.hero-panel {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 58px 42px;
    text-align: center;
    border: 1px solid rgba(203, 211, 255, .28);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(7, 11, 24, .66) 0%, rgba(6, 10, 22, .76) 100%);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow: 0 34px 100px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(160, 112, 255, .26), transparent 28%, transparent 68%, rgba(68, 178, 255, .18));
    filter: blur(12px);
    opacity: .65
}

.hero-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none
}

.hero-glow-left {
    width: 360px;
    height: 360px;
    left: -170px;
    top: 20%;
    background: rgba(137, 74, 255, .18)
}

.hero-glow-right {
    width: 400px;
    height: 400px;
    right: -190px;
    bottom: 8%;
    background: rgba(39, 148, 255, .15)
}

.hero-alert {
    position: absolute;
    left: 50%;
    top: -12px;
    z-index: 6;
    width: calc(100% - 30px);
    max-width: 650px;
    transform: translateX(-50%);
    font-size: .82rem
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 auto 28px;
    padding: 8px 16px 8px 9px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .12);
    font-family: "Inter", "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76)
}

.hero-kicker-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(122, 91, 255, .34), rgba(94, 101, 255, .16));
    color: #b3a8ff;
    font-size: .75rem
}

.hero-title {
    max-width: 940px;
    margin: 0 auto 24px;
    font-family: "Inter", "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(3.15rem, 5vw, 5.55rem);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -.052em;
    text-transform: none;
    color: #f7f9ff;
    text-wrap: balance;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.hero-title-highlight {
    display: block;
    margin-top: 5px;
    background: linear-gradient(90deg, #8e63ff 0%, #8c78ff 28%, #659fff 61%, #54ceff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.hero-copy {
    max-width: 720px;
    margin: 0 auto 32px;
    font-family: "Inter", "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.01rem;
    line-height: 1.72;
    font-weight: 400;
    color: rgba(236, 241, 255, .70);
    text-wrap: balance
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px
}

.btn-primary-custom,
.btn-outline-custom {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 13px 25px;
    border-radius: 14px;
    font-family: "Inter", "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: .83rem;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease
}

.btn-primary-custom {
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(135deg, #7958ec 0%, #5668ff 52%, #269cff 100%);
    color: #fff;
    box-shadow: 0 14px 36px rgba(74, 77, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .22)
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 19px 46px rgba(74, 77, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .26)
}

.btn-outline-custom {
    border: 1px solid rgba(178, 191, 255, .30);
    background: rgba(4, 8, 18, .28);
    color: rgba(255, 255, 255, .90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.btn-outline-custom:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 206, 255, .48);
    background: rgba(255, 255, 255, .06);
    color: #fff
}

.btn-primary-custom i,
.btn-outline-custom i {
    font-size: .76rem
}

.hero-code-icon {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .86rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .86)
}

.hero-signature {
    width: 100%;
    max-width: 660px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin: 0 auto 32px
}

.hero-signature-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(221, 226, 255, .28))
}

.hero-signature-line:last-child {
    background: linear-gradient(90deg, rgba(221, 226, 255, .28), transparent)
}

.hero-signature-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: .63rem;
    font-weight: 650;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: rgba(236, 240, 255, .58)
}

.hero-signature-code {
    color: rgba(255, 255, 255, .72);
    font-family: "SFMono-Regular", Consolas, monospace
}

.hero-signature-content i.fa-circle {
    font-size: 3px;
    color: #8367ff
}

.hero-trust-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 auto;
    width: 100%;
    max-width: 860px
}

.hero-trust-item {
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 14px;
    border-right: 1px solid rgba(255, 255, 255, .10);
    font-family: "Inter", "Manrope", sans-serif;
    font-size: .67rem;
    font-weight: 500;
    color: rgba(241, 244, 255, .73)
}

.hero-trust-item:last-child {
    border-right: 0
}

.hero-trust-item i {
    font-size: 1.35rem;
    color: #8c70ff;
    filter: drop-shadow(0 0 11px rgba(125, 94, 255, .26))
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 4;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: rgba(244, 246, 255, .55);
    text-decoration: none;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: .59rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase
}

.hero-scroll-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    background: rgba(5, 8, 17, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .58rem;
    transition: transform .25s ease
}

.hero-scroll:hover {
    color: #fff
}

.hero-scroll:hover .hero-scroll-icon {
    transform: translateY(3px)
}

@media (min-width:992px) and (max-height:900px) {
    .hero-panel {
        padding: 34px 48px 30px
    }

    .hero-kicker {
        margin-bottom: 19px
    }

    .hero-title {
        font-size: clamp(2.85rem, 4.5vw, 4.8rem);
        margin-bottom: 18px
    }

    .hero-copy {
        margin-bottom: 24px;
        font-size: .94rem;
        line-height: 1.62
    }

    .hero-actions {
        margin-bottom: 25px
    }

    .hero-signature {
        margin-bottom: 23px
    }

    .hero-trust-item {
        min-height: 62px
    }
}

@media (min-width:992px) and (max-height:760px) {
    .hero-panel {
        padding: 24px 40px 22px
    }

    .hero-kicker {
        margin-bottom: 12px
    }

    .hero-title {
        font-size: clamp(2.5rem, 4vw, 4rem);
        margin-bottom: 13px
    }

    .hero-copy {
        margin-bottom: 18px;
        font-size: .87rem;
        line-height: 1.54
    }

    .hero-actions {
        margin-bottom: 18px
    }

    .hero-signature {
        margin-bottom: 15px
    }

    .hero-trust-item {
        min-height: 52px;
        gap: 6px
    }

    .hero-trust-item i {
        font-size: 1rem
    }
}

@media (max-width:991.98px) {
    .hero {
        height: auto;
        min-height: 100svh;
        background-position: center center
    }

    .hero-container {
        min-height: 100svh;
        padding-top: 80px;
        padding-bottom: 80px
    }

    .hero-panel {
        max-width: 820px;
        padding: 40px 34px 34px
    }

    .hero-title {
        font-size: clamp(2.7rem, 7.8vw, 4.6rem)
    }

    .hero-copy {
        max-width: 650px
    }

    .hero-trust-row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px
    }

    .hero-trust-item {
        border-right: 0
    }

    .hero-scroll {
        display: none
    }
}

@media (max-width:575.98px) {
    .hero-container {
        padding-top: 62px;
        padding-bottom: 62px
    }

    .hero-panel {
        padding: 28px 18px 24px;
        border-radius: 23px
    }

    .hero-kicker {
        margin-bottom: 17px;
        font-size: .58rem;
        letter-spacing: .045em
    }

    .hero-kicker-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px
    }

    .hero-title {
        font-size: clamp(2.15rem, 10vw, 3.15rem);
        line-height: 1.04;
        letter-spacing: -.042em;
        margin-bottom: 17px
    }

    .hero-copy {
        margin-bottom: 23px;
        font-size: .85rem;
        line-height: 1.6
    }

    .hero-actions {
        width: 100%;
        gap: 9px;
        margin-bottom: 24px
    }

    .btn-primary-custom,
    .btn-outline-custom {
        flex: 1;
        min-width: 145px;
        min-height: 44px;
        padding: 11px 13px;
        font-size: .72rem
    }

    .hero-signature {
        margin-bottom: 20px
    }

    .hero-signature-line {
        display: none
    }

    .hero-signature-content {
        flex-wrap: wrap;
        white-space: normal;
        line-height: 1.7
    }

    .hero-trust-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .hero-trust-item {
        min-height: 65px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 12px;
        background: rgba(255, 255, 255, .025);
        font-size: .61rem
    }

    .hero-trust-item:last-child {
        grid-column: 1/-1
    }

    .hero-trust-item i {
        font-size: 1.05rem
    }
}

@media (prefers-reduced-motion:reduce) {

    .btn-primary-custom,
    .btn-outline-custom,
    .hero-scroll-icon {
        transition: none
    }
}

.hero .hero-title,
.hero .hero-title * {
    text-transform: none !important;
    font-stretch: normal !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    outline: none !important
}

.hero .hero-title-highlight {
    border: 0 !important;
    text-decoration: none !important
}

/* ===== More visible Jacques Rima logo ===== */

.jacques-logo {
    gap: .75rem;
}

/* Diamond */
.logo-mark {
    width: 31px;
    height: 31px;
    border: 1.5px solid #5f6fff;
    background: rgba(75, 88, 255, .10);
    box-shadow:
        0 0 0 1px rgba(95, 111, 255, .08),
        0 0 18px rgba(75, 88, 255, .20);
}

.logo-mark span {
    color: #8d98ff;
    font-size: .72rem;
    font-weight: 600;
}

/* Jacques Rima */
.logo-name {
    color: #ffffff;
    font-size: .96rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-shadow: 0 1px 10px rgba(255,255,255,.08);
}

/* Portfolio */
.logo-rule .label {
    color: rgba(255, 255, 255, .70);
    font-size: .44rem;
    font-weight: 500;
    letter-spacing: .24em;
}

/* Lines around Portfolio */
.logo-rule .line {
    background: rgba(255, 255, 255, .30);
}

/* Hover */
.jacques-logo:hover .logo-mark {
    background: #5668ff;
    border-color: #7d89ff;
    box-shadow: 0 0 22px rgba(86, 104, 255, .45);
}

.jacques-logo:hover .logo-mark span {
    color: #ffffff;
}

.jacques-logo:hover .logo-name {
    color: #ffffff;
}

.jacques-logo:hover .logo-rule .label {
    color: #ffffff;
}

.jacques-logo:hover .logo-rule .line {
    background: #6575ff;
}

/* ===== Navigation color consistency ===== */

.nav-link {
    color: rgba(255, 255, 255, .82) !important;
    border-color: transparent;
}

.nav-link > i:first-child {
    color: #8d98ff;
    filter: drop-shadow(0 0 8px rgba(95, 111, 255, .20));
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff !important;
    background: rgba(95, 111, 255, .09);
    border-color: rgba(125, 137, 255, .24);
}

.nav-link:hover > i:first-child,
.nav-link.active > i:first-child {
    color: #aab2ff;
    filter: drop-shadow(0 0 10px rgba(95, 111, 255, .38));
}

/* Small underline */
.nav-link::after {
    background: linear-gradient(
        90deg,
        #8e63ff,
        #659fff,
        #54ceff
    );
}

/* "Plus" arrow */
.dropdown-toggle-icon {
    color: #8d98ff;
}

/* Dropdown */
.dropdown-menu {
    background: rgba(8, 10, 20, .96);
    border-color: rgba(125, 137, 255, .18);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .55),
        0 0 25px rgba(86, 104, 255, .06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dropdown-item {
    color: rgba(255, 255, 255, .76);
}

.dropdown-item i {
    color: #8d98ff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #ffffff;
    background: rgba(95, 111, 255, .10);
    border-color: rgba(125, 137, 255, .30);
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: #b0b7ff;
}

/* Contact button */
.nav-cta {
    color: #ffffff;
    border-color: rgba(125, 137, 255, .72);

    background: linear-gradient(
        135deg,
        rgba(121, 88, 236, .22),
        rgba(86, 104, 255, .18),
        rgba(38, 156, 255, .12)
    );

    box-shadow:
        0 8px 25px rgba(74, 77, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.nav-cta i {
    color: #aab2ff;
}

.nav-cta::before {
    background: linear-gradient(
        135deg,
        #7958ec 0%,
        #5668ff 55%,
        #269cff 100%
    );
}

.nav-cta:hover {
    color: #ffffff;
    border-color: rgba(170, 178, 255, .85);
    box-shadow:
        0 12px 32px rgba(74, 77, 255, .28),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

.nav-cta:hover i {
    color: #ffffff;
}

/* Mobile navigation */
@media (max-width: 991.98px) {

    .navbar-collapse {
        background: rgba(5, 6, 14, .985);
        border-top-color: rgba(125, 137, 255, .14);

        box-shadow:
            0 28px 55px rgba(0, 0, 0, .65),
            0 0 35px rgba(86, 104, 255, .05);
    }

    .mobile-menu-heading {
        color: #ffffff;
        border-bottom-color: rgba(125, 137, 255, .15);
    }

    .mobile-menu-heading small {
        color: rgba(170, 178, 255, .72);
    }

    .nav-link {
        color: rgba(255, 255, 255, .80) !important;
    }

    .nav-link:hover,
    .nav-link.active {
        color: #ffffff !important;
        background: rgba(95, 111, 255, .09) !important;
        border-color: rgba(125, 137, 255, .18) !important;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, .72);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #ffffff;
        background: rgba(95, 111, 255, .08);
        border-color: rgba(125, 137, 255, .18);
    }

    .mobile-menu-footer {
        color: rgba(255, 255, 255, .52);
        border-top-color: rgba(125, 137, 255, .14);
    }

    .mobile-menu-footer i {
        color: #8d98ff;
        filter: drop-shadow(0 0 6px rgba(95, 111, 255, .45));
    }
}

/* =========================================================
   PREMIUM ABOUT SECTION
========================================================= */

.section-about-premium {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(121, 88, 236, .10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 55%,
            rgba(38, 156, 255, .08),
            transparent 32%
        ),
        #05060a;
}

.section-about-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}

.section-about-premium .container {
    position: relative;
    z-index: 2;
}


/* Small title */

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    margin-bottom: 1.5rem;
    padding: .55rem .9rem;

    border: 1px solid rgba(141, 152, 255, .18);
    border-radius: 999px;

    background: rgba(141, 152, 255, .055);

    color: rgba(255,255,255,.72);

    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-eyebrow i {
    color: #8d98ff;

    filter:
        drop-shadow(
            0 0 8px rgba(95,111,255,.35)
        );
}


/* Main title */

.premium-title {
    max-width: 760px;

    margin: 0 0 1.5rem;

    font-family:
        "Inter",
        "Manrope",
        "Helvetica Neue",
        sans-serif;

    font-size: clamp(2.6rem, 5vw, 4.8rem);

    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}

.premium-title span {
    display: inline;

    background:
        linear-gradient(
            90deg,
            #8e63ff 0%,
            #8c78ff 28%,
            #659fff 62%,
            #54ceff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Accent line */

.premium-line {
    width: 82px;
    height: 3px;

    margin: 1.7rem 0 2rem;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #8e63ff,
            #659fff,
            #54ceff
        );

    box-shadow:
        0 0 20px rgba(101,159,255,.26);
}


/* Text */

.section-about-premium .section-intro {
    max-width: 700px;

    margin-bottom: 1.3rem;

    color: rgba(236,241,255,.66);

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
}


/* =========================================================
   STATS GRID
========================================================= */

.stats-premium-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;

    position: relative;
}


/* Cards */

.premium-stat-card {
    position: relative;

    min-height: 190px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1.7rem;

    overflow: hidden;

    border:
        1px solid rgba(178,191,255,.14);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Glow */

.premium-stat-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    top: -75px;

    border-radius: 50%;

    background:
        rgba(95,111,255,.14);

    filter: blur(35px);

    transition:
        transform .5s ease,
        opacity .5s ease;

    opacity: .65;
}


/* Small top gradient */

.premium-stat-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;
    right: 20px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(141,152,255,.7),
            rgba(84,206,255,.55),
            transparent
        );

    opacity: .55;
}


/* Hover */

.premium-stat-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(141,152,255,.38);

    background:
        linear-gradient(
            145deg,
            rgba(95,111,255,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.32),
        0 0 32px rgba(86,104,255,.08),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.premium-stat-card:hover::before {
    transform: scale(1.25);
    opacity: 1;
}


/* Stat icon */

.stat-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    margin-bottom: 1.3rem;

    border:
        1px solid rgba(141,152,255,.20);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(121,88,236,.20),
            rgba(38,156,255,.10)
        );

    color: #9ca6ff;

    font-size: .85rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);
}


/* Numbers */

.premium-stat-card strong {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: .55rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: clamp(2.1rem, 3vw, 3rem);

    font-weight: 700;
    line-height: 1;

    letter-spacing: -.045em;

    background:
        linear-gradient(
            90deg,
            #a18aff,
            #7d98ff,
            #62cfff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Labels */

.premium-stat-card span {
    position: relative;
    z-index: 2;

    max-width: 165px;

    color: rgba(239,242,255,.60);

    font-size: .76rem;
    font-weight: 500;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .about-content {
        text-align: center;
    }

    .premium-title {
        margin-left: auto;
        margin-right: auto;
    }

    .premium-line {
        margin-left: auto;
        margin-right: auto;
    }

    .section-about-premium .section-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .stats-premium-grid {
        max-width: 680px;
        margin: 1rem auto 0;
    }
}


@media (max-width: 575.98px) {

    .premium-title {
        font-size: clamp(
            2.25rem,
            10vw,
            3.3rem
        );
    }

    .section-about-premium .section-intro {
        font-size: .9rem;
        line-height: 1.75;
    }

    .stats-premium-grid {
        gap: 10px;
    }

    .premium-stat-card {
        min-height: 165px;

        padding: 1.3rem;

        border-radius: 16px;
    }

    .stat-icon {
        width: 35px;
        height: 35px;

        margin-bottom: 1rem;
    }

    .premium-stat-card strong {
        font-size: 2rem;
    }

    .premium-stat-card span {
        font-size: .68rem;
    }
}

/* =========================================================
   PREMIUM ABOUT SECTION — IMAGE BACKGROUND
========================================================= */

.section-about-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 10, .96) 0%,
            rgba(5, 6, 10, .90) 34%,
            rgba(5, 6, 10, .62) 58%,
            rgba(5, 6, 10, .30) 100%
        ),
        url("assets/image/a-propos-software-background.png")
        center center / cover no-repeat;
}


/* Dark cinematic overlay */
.section-about-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 10, .38) 0%,
            transparent 22%,
            transparent 75%,
            rgba(5, 6, 10, .70) 100%
        );
}


/* Subtle premium glow */
.section-about-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(121, 88, 236, .10),
            transparent 34%
        );
}


/* Keep all content above the background */
.section-about-premium .container {
    position: relative;
    z-index: 2;
}


/* Improve text readability */
.section-about-premium .premium-title {
    text-shadow:
        0 3px 25px rgba(0, 0, 0, .45);
}

.section-about-premium .section-intro {
    color: rgba(240, 243, 255, .78);
    text-shadow:
        0 2px 12px rgba(0, 0, 0, .50);
}


/* Glass effect for stats */
.section-about-premium .premium-stat-card {
    background:
        linear-gradient(
            145deg,
            rgba(12, 15, 30, .76),
            rgba(7, 9, 20, .60)
        );

    border-color:
        rgba(160, 170, 255, .20);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}


/* Hover */
.section-about-premium .premium-stat-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(79, 72, 170, .24),
            rgba(7, 10, 24, .72)
        );

    border-color:
        rgba(141, 152, 255, .40);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .38),
        0 0 35px rgba(86, 104, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .section-about-premium {
        background:
            linear-gradient(
                rgba(5, 6, 10, .78),
                rgba(5, 6, 10, .86)
            ),
            url("assets/image/a-propos-software-background.png")
            68% center / cover no-repeat;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .section-about-premium {
        background:
            linear-gradient(
                180deg,
                rgba(5, 6, 10, .72) 0%,
                rgba(5, 6, 10, .88) 42%,
                rgba(5, 6, 10, .96) 100%
            ),
            url("assets/image/a-propos-software-background.png")
            72% center / cover no-repeat;
    }

    .section-about-premium .section-intro {
        color: rgba(240, 243, 255, .82);
    }
}

.section-about-premium .stats-premium-grid {
    position: relative;
}

.section-about-premium .premium-stat-card {
    background: rgba(8, 11, 24, .58);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.section-about-premium .premium-stat-card:hover {
    background: rgba(20, 23, 50, .72);
}


/* =========================================================
   EXTRA COMPACT STATS — portrait more visible
========================================================= */

.stats-premium-grid {
    width: 100%;
    max-width: 330px;
    margin-left: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}


/* CARDS */

.section-about-premium .premium-stat-card {
    min-height: 105px;
    padding: .8rem .85rem;

    border-radius: 12px;

    background: rgba(5, 8, 20, .62);

    border: 1px solid rgba(160, 170, 255, .24);

    backdrop-filter: blur(11px) saturate(120%);
    -webkit-backdrop-filter: blur(11px) saturate(120%);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}


/* ICON */

.section-about-premium .stat-icon {
    width: 25px;
    height: 25px;

    margin-bottom: .5rem;

    border-radius: 7px;

    font-size: .58rem;

    color: #aab2ff;

    background: rgba(105, 112, 255, .13);
}


/* NUMBER */

.section-about-premium .premium-stat-card strong {
    margin-bottom: .25rem;

    font-size: 1.4rem;
    line-height: 1;

    background: linear-gradient(
        90deg,
        #b29cff,
        #8fa5ff,
        #72d4ff
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.section-about-premium .premium-stat-card span {
    max-width: 125px;

    color: rgba(255, 255, 255, .82);

    font-size: .57rem;
    font-weight: 500;
    line-height: 1.35;
}


/* Smaller decorative glow */

.section-about-premium .premium-stat-card::before {
    width: 65px;
    height: 65px;

    top: -35px;
    right: -30px;

    filter: blur(24px);
}


/* HOVER */

.section-about-premium .premium-stat-card:hover {
    transform: translateY(-3px);

    background: rgba(9, 12, 28, .76);

    border-color: rgba(141, 152, 255, .48);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .stats-premium-grid {
        max-width: 330px;
        margin: 1.5rem auto 0;
    }
}


@media (max-width: 575.98px) {

    .stats-premium-grid {
        max-width: 300px;
        gap: 6px;
    }

    .section-about-premium .premium-stat-card {
        min-height: 95px;
        padding: .7rem;
    }

    .section-about-premium .stat-icon {
        width: 23px;
        height: 23px;
        margin-bottom: .4rem;
    }

    .section-about-premium .premium-stat-card strong {
        font-size: 1.25rem;
    }

    .section-about-premium .premium-stat-card span {
        font-size: .54rem;
    }
}

@media (min-width: 992px) {

    .section-about-premium {
        background:
            linear-gradient(
                90deg,
                rgba(5, 6, 10, .96) 0%,
                rgba(5, 6, 10, .88) 35%,
                rgba(5, 6, 10, .42) 60%,
                rgba(5, 6, 10, .15) 100%
            ),
            url("assets/image/a-propos-software-background.png")
            60% center / cover no-repeat;
    }
}

/* =========================================================
   ABOUT — ULTRA COMPACT CONTENT
========================================================= */

.about-content-compact {
    max-width: 590px;
}


/* ---------- EYEBROW ---------- */

.about-content-compact .section-eyebrow {
    margin-bottom: 1rem;
    padding: .42rem .7rem;

    font-size: .58rem;
    letter-spacing: .13em;

    border-radius: 999px;
}

.about-content-compact .section-eyebrow i {
    font-size: .62rem;
}


/* ---------- TITLE ---------- */

.about-content-compact .premium-title {
    max-width: 580px;

    margin: 0;

    font-size: clamp(2rem, 3.4vw, 3.35rem);
    line-height: 1.03;

    letter-spacing: -.04em;
}

.about-content-compact .premium-title span {
    display: inline;
}


/* ---------- GRADIENT LINE ---------- */

.about-content-compact .premium-line {
    width: 58px;
    height: 2px;

    margin: 1.1rem 0 1.25rem;
}


/* ---------- PARAGRAPHS ---------- */

.about-content-compact .section-intro {
    max-width: 570px;

    margin: 0 0 .75rem;

    font-size: .82rem;
    line-height: 1.65;

    color: rgba(245, 247, 255, .78);
}


/* =========================================================
   STATS INSIDE TEXT COLUMN
========================================================= */

.stats-premium-grid.stats-inside-content {
    width: 100%;
    max-width: 520px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 7px;

    margin: 1.35rem 0 0;
}


/* ---------- CARD ---------- */

.stats-inside-content .premium-stat-card,
.section-about-premium .stats-inside-content .premium-stat-card {
    min-height: 100px;

    padding: .7rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    border-radius: 11px;

    border: 1px solid rgba(160, 170, 255, .22);

    background: rgba(5, 8, 20, .64);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255,255,255,.06);
}


/* ---------- ICON ---------- */

.section-about-premium
.stats-inside-content
.stat-icon {

    width: 23px;
    height: 23px;

    margin: 0 0 .45rem;

    border-radius: 6px;

    font-size: .54rem;

    color: #aab2ff;

    background: rgba(105,112,255,.14);
}


/* ---------- NUMBER ---------- */

.section-about-premium
.stats-inside-content
.premium-stat-card strong {

    margin: 0 0 .2rem;

    font-size: 1.25rem;
    line-height: 1;

    background: linear-gradient(
        90deg,
        #b29cff,
        #8fa5ff,
        #72d4ff
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ---------- LABEL ---------- */

.section-about-premium
.stats-inside-content
.premium-stat-card span {

    max-width: 100px;

    color: rgba(255,255,255,.78);

    font-size: .51rem;
    line-height: 1.3;
}


/* ---------- HOVER ---------- */

.section-about-premium
.stats-inside-content
.premium-stat-card:hover {

    transform: translateY(-3px);

    background: rgba(12,15,34,.78);

    border-color: rgba(141,152,255,.46);
}


/* =========================================================
   DESKTOP — LEAVE PORTRAIT AREA EMPTY
========================================================= */

@media (min-width: 992px) {

    .section-about-premium .row {
        justify-content: flex-start;
    }

    .about-content-compact {
        margin-right: auto;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .about-content-compact {
        max-width: 650px;
        margin: 0 auto;

        text-align: center;
    }

    .about-content-compact .premium-line {
        margin-left: auto;
        margin-right: auto;
    }

    .stats-premium-grid.stats-inside-content {
        max-width: 520px;

        margin-left: auto;
        margin-right: auto;
    }

    .stats-inside-content .premium-stat-card {
        align-items: center;
        text-align: center;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .about-content-compact .premium-title {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .about-content-compact .section-intro {
        font-size: .76rem;
        line-height: 1.6;
    }

    .stats-premium-grid.stats-inside-content {
        max-width: 310px;

        grid-template-columns: repeat(2, 1fr);

        gap: 6px;
    }

    .stats-inside-content .premium-stat-card,
    .section-about-premium
    .stats-inside-content
    .premium-stat-card {

        min-height: 88px;
        padding: .65rem;
    }
}

/* =========================================================
   PREMIUM PORTFOLIO
========================================================= */

.portfolio-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(121, 88, 236, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(38, 156, 255, .10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #05060a 0%,
            #080a12 48%,
            #05060a 100%
        );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.portfolio-premium::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );
}


/* Extra ambient glow */

.portfolio-premium::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -300px;
    top: 15%;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(86, 104, 255, .08);

    filter: blur(100px);

    pointer-events: none;
}


.portfolio-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.portfolio-premium .section-number {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


/* Little luminous dot */

.portfolio-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.7);
}


/* =========================================================
   TITLE
========================================================= */

.portfolio-premium .section-title {
    max-width: 720px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        "Helvetica Neue",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 4.6rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.portfolio-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff 0%,
            #8c78ff 30%,
            #659fff 65%,
            #54ceff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* =========================================================
   INTRO
========================================================= */

.portfolio-premium .section-intro {
    max-width: 620px;

    color:
        rgba(236,241,255,.66);

    font-size: .95rem;

    line-height: 1.75;
}


/* =========================================================
   CARDS
========================================================= */

.portfolio-premium .portfolio-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    border:
        1px solid rgba(160,170,255,.15);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* Top premium highlight */

.portfolio-premium .portfolio-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            transparent
        );

    opacity: .6;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.portfolio-premium .portfolio-visual {
    position: relative;

    height: 175px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(120,95,255,.22),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #0b0e1c,
            #11162a
        );
}


/* Grid inside visual */

.portfolio-premium .portfolio-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    mask-image:
        radial-gradient(
            circle,
            #000,
            transparent 75%
        );
}


/* Glow behind icon */

.portfolio-premium .portfolio-visual::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        rgba(101,159,255,.17);

    filter: blur(35px);
}


/* Icon */

.portfolio-premium .portfolio-visual i {
    position: relative;
    z-index: 3;

    font-size: 2.6rem;

    background:
        linear-gradient(
            135deg,
            #b29cff,
            #8fa5ff,
            #54ceff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 0 18px rgba(101,159,255,.25)
        );

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.portfolio-premium .portfolio-content {
    padding: 1.35rem 1.4rem 1.5rem;
}


.portfolio-premium .portfolio-content small {
    display: block;

    margin-bottom: .45rem;

    color: #8d98ff;

    font-size: .59rem;
    font-weight: 650;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.portfolio-premium .portfolio-content h3 {
    margin: 0 0 .55rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.25rem;

    font-weight: 650;

    letter-spacing: -.025em;

    color: #ffffff;
}


.portfolio-premium .portfolio-content p {
    margin: 0;

    color:
        rgba(236,241,255,.60);

    font-size: .78rem;

    line-height: 1.6;
}


/* =========================================================
   CARD HOVER
========================================================= */

.portfolio-premium .portfolio-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(141,152,255,.38);

    box-shadow:
        0 28px 60px rgba(0,0,0,.34),
        0 0 30px rgba(86,104,255,.08),
        inset 0 1px 0 rgba(255,255,255,.08);
}


.portfolio-premium
.portfolio-card:hover
.portfolio-visual i {

    transform:
        translateY(-4px)
        scale(1.08);
}


/* =========================================================
   DIFFERENT SUBTLE GLOW PER CARD
========================================================= */

.portfolio-premium
.row > div:nth-child(2n)
.portfolio-visual {

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(38,156,255,.20),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #090c19,
            #10192a
        );
}


.portfolio-premium
.row > div:nth-child(3n)
.portfolio-visual {

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(142,99,255,.20),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #0c0d1b,
            #171126
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .portfolio-premium .section-title {
        font-size:
            clamp(2.2rem, 10vw, 3.2rem);
    }

    .portfolio-premium .section-intro {
        font-size: .86rem;
    }

    .portfolio-premium .portfolio-visual {
        height: 145px;
    }

    .portfolio-premium .portfolio-card {
        border-radius: 16px;
    }

    .portfolio-premium .portfolio-content {
        padding: 1.15rem;
    }
}


/* =========================================================
   PREMIUM SERVICES
========================================================= */

.services-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(84, 206, 255, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(142, 99, 255, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #070911 0%,
            #090c16 50%,
            #05060a 100%
        );
}


/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */

.services-premium::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            #000 15%,
            transparent 80%
        );

    mask-image:
        radial-gradient(
            circle at center,
            #000 15%,
            transparent 80%
        );
}


/* Large ambient glow */

.services-premium::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 50%;

    z-index: -1;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(71, 91, 255, .045);

    filter: blur(110px);

    pointer-events: none;
}


.services-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.services-premium .section-number {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-family: "Inter", "Manrope", sans-serif;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


.services-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.75);
}


/* =========================================================
   TITLE
========================================================= */

.services-premium .section-title {
    max-width: 800px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        "Helvetica Neue",
        sans-serif;

    font-size: clamp(2.6rem, 5vw, 4.6rem);

    font-weight: 700;
    line-height: 1.03;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.services-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff 0%,
            #8c78ff 28%,
            #659fff 62%,
            #54ceff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Intro */

.services-premium .section-intro {
    max-width: 650px;

    color: rgba(236,241,255,.65);

    font-size: .92rem;
    line-height: 1.7;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.services-premium .service-card {
    position: relative;

    height: 100%;
    min-height: 205px;

    padding: 1.55rem;

    overflow: hidden;

    border:
        1px solid rgba(160,170,255,.14);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.014)
        );

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.045);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Gradient line */

.services-premium .service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;
    right: 20px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            #54ceff,
            transparent
        );

    opacity: .45;

    transition:
        opacity .4s ease;
}


/* Ambient light inside card */

.services-premium .service-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -65px;
    top: -65px;

    border-radius: 50%;

    background:
        rgba(101,159,255,.10);

    filter: blur(35px);

    pointer-events: none;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* =========================================================
   ICON
========================================================= */

.services-premium .card-icon {
    position: relative;
    z-index: 2;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin: 0 0 1.2rem;

    border:
        1px solid rgba(141,152,255,.25);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.18),
            rgba(84,206,255,.08)
        );

    color: #9da7ff;

    font-size: .88rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 25px rgba(86,104,255,.08);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .4s ease,
        color .4s ease;
}


/* =========================================================
   TEXT
========================================================= */

.services-premium .service-content {
    position: relative;
    z-index: 2;
}


.services-premium .service-card h3 {
    margin: 0 0 .55rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.2rem;
    font-weight: 650;

    letter-spacing: -.025em;

    color: #fff;
}


.services-premium .service-card p {
    max-width: 290px;

    margin: 0;

    color:
        rgba(236,241,255,.59);

    font-size: .76rem;
    line-height: 1.65;
}


/* =========================================================
   CORNER ARROW
========================================================= */

.service-arrow {
    position: absolute;

    top: 1.4rem;
    right: 1.4rem;

    z-index: 3;

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(141,152,255,.14);

    border-radius: 50%;

    color:
        rgba(170,178,255,.48);

    font-size: .58rem;

    transition:
        transform .4s ease,
        color .4s ease,
        border-color .4s ease,
        background .4s ease;
}


/* =========================================================
   HOVER
========================================================= */

.services-premium .service-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(141,152,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(100,90,255,.075),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 26px 60px rgba(0,0,0,.30),
        0 0 30px rgba(86,104,255,.07),
        inset 0 1px 0 rgba(255,255,255,.07);
}


.services-premium .service-card:hover::before {
    opacity: .9;
}


.services-premium .service-card:hover::after {
    transform: scale(1.3);
    opacity: 1;
}


.services-premium
.service-card:hover
.card-icon {

    transform:
        translateY(-3px);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.35),
            rgba(84,206,255,.18)
        );
}


.services-premium
.service-card:hover
.service-arrow {

    transform:
        translate(2px,-2px);

    color: #fff;

    border-color:
        rgba(141,152,255,.40);

    background:
        rgba(141,152,255,.10);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .services-premium .section-title {
        font-size:
            clamp(2.2rem, 10vw, 3.2rem);
    }

    .services-premium .section-intro {
        font-size: .84rem;
    }

    .services-premium .service-card {
        min-height: 175px;
        padding: 1.3rem;

        border-radius: 15px;
    }

    .services-premium .card-icon {
        width: 38px;
        height: 38px;

        margin-bottom: 1rem;
    }

    .services-premium .service-card h3 {
        font-size: 1.08rem;
    }

    .services-premium .service-card p {
        font-size: .72rem;
    }
}

/* =========================================================
   PREMIUM REFERENCES
========================================================= */

.references-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(86, 104, 255, .10),
            transparent 38%
        ),
        radial-gradient(
            circle at 8% 20%,
            rgba(142, 99, 255, .07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #05060a 0%,
            #070912 50%,
            #05060a 100%
        );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.references-premium::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 78%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 78%
        );
}


/* Ambient light */

.references-premium::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 250px;

    left: 50%;
    bottom: -180px;

    z-index: -1;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(86,104,255,.12);

    filter: blur(100px);

    pointer-events: none;
}


.references-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.references-premium .section-number {
    display: inline-flex;
    align-items: center;

    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


.references-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.75);
}


/* =========================================================
   TITLE
========================================================= */

.references-premium .section-title {
    max-width: 780px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        "Helvetica Neue",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 4.6rem);

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.references-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff 0%,
            #8c78ff 30%,
            #659fff 65%,
            #54ceff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


/* =========================================================
   INTRO
========================================================= */

.references-premium .section-intro {
    max-width: 630px;

    color:
        rgba(236,241,255,.63);

    font-size: .9rem;

    line-height: 1.7;
}


/* =========================================================
   REFERENCE CARDS
========================================================= */

.references-premium .premium-reference-card {
    position: relative;

    height: 100%;
    min-height: 150px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 1rem;

    overflow: hidden;

    border:
        1px solid rgba(160,170,255,.14);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.012)
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Top gradient */

.references-premium
.premium-reference-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 20%;
    right: 20%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            transparent
        );

    opacity: .45;

    transition:
        opacity .4s ease;
}


/* Glow */

.references-premium
.premium-reference-card::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    left: 50%;
    top: 35%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(101,159,255,.07);

    filter: blur(35px);

    pointer-events: none;

    transition:
        opacity .4s ease,
        transform .5s ease;
}


/* =========================================================
   LOGO
========================================================= */

.references-premium .reference-logo {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 .85rem;

    padding: 0;

    border: 0;

    color: rgba(255,255,255,.86);

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .92rem;
    font-weight: 700;

    letter-spacing: .15em;

    text-align: center;

    transition:
        color .4s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   PARTNER STATUS
========================================================= */

.reference-status {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: .4rem;

    color:
        rgba(236,241,255,.38);

    font-size: .55rem;
    font-weight: 500;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.reference-dot {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 7px rgba(141,152,255,.75);
}


/* =========================================================
   HOVER
========================================================= */

.references-premium
.premium-reference-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(141,152,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(100,90,255,.07),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 24px 50px rgba(0,0,0,.30),
        0 0 25px rgba(86,104,255,.07),
        inset 0 1px 0 rgba(255,255,255,.07);
}


.references-premium
.premium-reference-card:hover::before {

    opacity: .9;
}


.references-premium
.premium-reference-card:hover::after {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1.35);
}


.references-premium
.premium-reference-card:hover
.reference-logo {

    transform:
        translateY(-2px);

    color: #ffffff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .references-premium .section-title {
        font-size:
            clamp(2.2rem, 10vw, 3.2rem);
    }

    .references-premium .section-intro {
        font-size: .84rem;
    }

    .references-premium
    .premium-reference-card {

        min-height: 125px;

        padding: .8rem;

        border-radius: 13px;
    }

    .references-premium
    .reference-logo {

        margin-bottom: .65rem;

        font-size: .78rem;

        letter-spacing: .11em;
    }

    .reference-status {
        font-size: .49rem;
    }
}

/* =========================================================
   COMPETENCES — EXPERTISE EXPLORER
========================================================= */

.competences-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 30%,
            rgba(142, 99, 255, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(84, 206, 255, .08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05060a 0%,
            #080a14 50%,
            #05060a 100%
        );
}


/* Grid background */

.competences-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}


/* Glow */

.competences-premium::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -450px;
    top: 20%;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(86, 104, 255, .08);

    filter: blur(120px);
}


.competences-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.competences-heading {
    max-width: 850px;

    margin-bottom: 3rem;
}


.competences-premium .section-number {
    display: inline-flex;
    align-items: center;

    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


.competences-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.75);
}


.competences-premium .section-title {
    max-width: 800px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 4.5rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.competences-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff,
            #659fff,
            #54ceff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


.competences-premium .section-intro {
    max-width: 680px;

    color:
        rgba(236,241,255,.64);

    font-size: .9rem;

    line-height: 1.75;
}


/* =========================================================
   EXPLORER
========================================================= */

.skills-explorer {
    display: grid;

    grid-template-columns: 290px minmax(0, 1fr);

    gap: 18px;

    align-items: start;
}


/* =========================================================
   LEFT NAVIGATION
========================================================= */

.skills-nav {
    position: sticky;

    top: 95px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 9px;

    border:
        1px solid rgba(160,170,255,.13);

    border-radius: 20px;

    background:
        rgba(8,10,20,.62);

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* category button */

.skills-nav-item {
    position: relative;

    width: 100%;

    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border:
        1px solid transparent;

    border-radius: 13px;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


.skills-nav-item:hover {
    background:
        rgba(255,255,255,.035);
}


.skills-nav-item.active {
    border-color:
        rgba(141,152,255,.22);

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.13),
            rgba(84,206,255,.06)
        );
}


/* Icon */

.skills-nav-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(141,152,255,.20);

    border-radius: 10px;

    background:
        rgba(105,112,255,.09);

    color: #9da7ff;

    font-size: .78rem;
}


.skills-nav-item.active
.skills-nav-icon {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.32),
            rgba(84,206,255,.16)
        );
}


/* Nav text */

.skills-nav-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.skills-nav-content small {
    margin-bottom: 2px;

    color: #8d98ff;

    font-size: .48rem;

    letter-spacing: .14em;
}


.skills-nav-content strong {
    color:
        rgba(255,255,255,.90);

    font-size: .72rem;

    font-weight: 650;
}


.skills-nav-content > span {
    margin-top: 2px;

    color:
        rgba(236,241,255,.38);

    font-size: .56rem;
}


.skills-nav-arrow {
    margin-left: auto;

    color:
        rgba(141,152,255,.30);

    font-size: .55rem;

    transition:
        transform .35s ease,
        color .35s ease;
}


.skills-nav-item.active
.skills-nav-arrow {

    transform:
        translateX(3px);

    color: #8d98ff;
}


/* =========================================================
   CONTENT PANEL
========================================================= */

.skills-content {
    position: relative;

    min-height: 525px;

    padding: 2rem;

    border:
        1px solid rgba(160,170,255,.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(18px) saturate(120%);

    box-shadow:
        0 25px 65px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.05);
}


.skills-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            #54ceff,
            transparent
        );

    opacity: .65;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.skill-category-header {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    margin-bottom: 1.8rem;
}


.category-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(141,152,255,.25);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.18),
            rgba(84,206,255,.08)
        );

    color: #a4adff;

    font-size: .95rem;
}


.category-label {
    display: block;

    margin-bottom: .3rem;

    color: #8d98ff;

    font-size: .55rem;
    font-weight: 650;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.skill-category-header h3 {
    margin: 0 0 .4rem;

    color: #fff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.55rem;

    font-weight: 650;

    letter-spacing: -.03em;
}


.skill-category-header p {
    max-width: 600px;

    margin: 0;

    color:
        rgba(236,241,255,.52);

    font-size: .75rem;

    line-height: 1.6;
}


/* =========================================================
   TECHNOLOGY GRID
========================================================= */

.technology-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 10px;
}


/* =========================================================
   TECHNOLOGY CARD
========================================================= */

.technology-card {
    position: relative;

    min-height: 135px;

    padding: 1.15rem;

    overflow: hidden;

    border:
        1px solid rgba(160,170,255,.10);

    border-radius: 14px;

    background:
        rgba(5,8,20,.48);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}


.technology-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(141,152,255,.30);

    background:
        rgba(15,18,40,.66);
}


/* Last card */

.technology-card-wide {
    grid-column: span 2;
}


/* Number */

.technology-index {
    position: absolute;

    top: 12px;
    right: 13px;

    color:
        rgba(141,152,255,.25);

    font-size: .48rem;
    font-weight: 700;

    letter-spacing: .10em;
}


/* Icon */

.technology-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    margin-bottom: .8rem;

    border:
        1px solid rgba(141,152,255,.16);

    border-radius: 8px;

    background:
        rgba(105,112,255,.07);

    color: #9da7ff;

    font-size: .66rem;
}


/* Title */

.technology-card h4 {
    max-width: 90%;

    margin: 0 0 .4rem;

    color:
        rgba(255,255,255,.90);

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .79rem;

    font-weight: 620;

    line-height: 1.45;
}


/* Description */

.technology-card p {
    margin: 0;

    color:
        rgba(236,241,255,.43);

    font-size: .62rem;

    line-height: 1.55;
}


/* =========================================================
   TAB TRANSITION
========================================================= */

.skills-content .tab-pane {
    transition:
        opacity .3s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .skills-explorer {
        display: block;
    }


    .skills-nav {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        margin-bottom: 14px;
    }


    .skills-content {
        min-height: auto;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .competences-heading {
        margin-bottom: 2rem;
    }


    .competences-premium .section-title {
        font-size:
            clamp(2.15rem, 10vw, 3rem);
    }


    .skills-nav {
        grid-template-columns:
            1fr;

        padding: 6px;
    }


    .skills-nav-item {
        min-height: 66px;
    }


    .skills-content {
        padding: 1.2rem;

        border-radius: 16px;
    }


    .skill-category-header {
        gap: 11px;

        margin-bottom: 1.25rem;
    }


    .category-icon {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }


    .skill-category-header h3 {
        font-size: 1.2rem;
    }


    .technology-grid {
        grid-template-columns: 1fr;
    }


    .technology-card-wide {
        grid-column: auto;
    }


    .technology-card {
        min-height: 115px;

        padding: 1rem;
    }
}

/* =========================================================
   PREMIUM QUALITIES
========================================================= */

.qualities-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(142, 99, 255, .09),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(84, 206, 255, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #070911 0%,
            #090b15 48%,
            #05060a 100%
        );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.qualities-premium::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.024) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 80%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 80%
        );
}


/* Ambient glow */

.qualities-premium::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 350px;

    left: 50%;
    bottom: -250px;

    z-index: -1;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(86,104,255,.10);

    filter: blur(110px);

    pointer-events: none;
}


.qualities-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.qualities-premium .section-number {
    display: inline-flex;
    align-items: center;

    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


.qualities-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.75);
}


/* =========================================================
   TITLE
========================================================= */

.qualities-premium .section-title {
    max-width: 760px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        "Helvetica Neue",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 4.6rem);

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.qualities-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff 0%,
            #8c78ff 30%,
            #659fff 65%,
            #54ceff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* =========================================================
   INTRO
========================================================= */

.qualities-premium .section-intro {
    max-width: 650px;

    color:
        rgba(236,241,255,.64);

    font-size: .9rem;

    line-height: 1.7;
}


/* =========================================================
   QUALITY CARDS
========================================================= */

.qualities-premium .premium-quality-card {
    position: relative;

    min-height: 230px;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 1.45rem;

    overflow: hidden;

    border:
        1px solid rgba(160,170,255,.13);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.012)
        );

    backdrop-filter:
        blur(15px) saturate(120%);

    -webkit-backdrop-filter:
        blur(15px) saturate(120%);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Top light */

.qualities-premium
.premium-quality-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 18%;
    right: 18%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            #54ceff,
            transparent
        );

    opacity: .48;
}


/* Ambient glow inside card */

.qualities-premium
.premium-quality-card::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(101,159,255,.09);

    filter: blur(40px);

    pointer-events: none;

    transition:
        transform .5s ease,
        opacity .4s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.quality-number {
    position: absolute;

    top: 1.25rem;
    right: 1.25rem;

    color:
        rgba(141,152,255,.24);

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .55rem;
    font-weight: 700;

    letter-spacing: .12em;
}


/* =========================================================
   ICON
========================================================= */

.qualities-premium .card-icon {
    position: relative;
    z-index: 2;

    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    margin: 0 0 1.3rem;

    border:
        1px solid rgba(141,152,255,.23);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.18),
            rgba(84,206,255,.07)
        );

    color: #a2abff;

    font-size: .85rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 24px rgba(86,104,255,.07);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        color .4s ease,
        background .4s ease;
}


/* =========================================================
   TITLE
========================================================= */

.qualities-premium
.premium-quality-card h3 {

    position: relative;
    z-index: 2;

    margin: 0 0 .65rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.15rem;
    font-weight: 650;

    letter-spacing: -.025em;

    color: #ffffff;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.qualities-premium
.premium-quality-card p {

    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 230px;

    color:
        rgba(236,241,255,.58);

    font-size: .74rem;

    line-height: 1.65;
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.quality-line {
    position: relative;
    z-index: 2;

    width: 26px;
    height: 2px;

    margin-top: auto;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #8e63ff,
            #659fff,
            #54ceff
        );

    opacity: .55;

    transition:
        width .4s cubic-bezier(.22,1,.36,1),
        opacity .4s ease;
}


/* =========================================================
   HOVER
========================================================= */

.qualities-premium
.premium-quality-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(141,152,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(101,90,255,.075),
            rgba(255,255,255,.017)
        );

    box-shadow:
        0 26px 55px rgba(0,0,0,.30),
        0 0 30px rgba(86,104,255,.07),
        inset 0 1px 0 rgba(255,255,255,.07);
}


.qualities-premium
.premium-quality-card:hover
.card-icon {

    transform:
        translateY(-3px);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.34),
            rgba(84,206,255,.16)
        );
}


.qualities-premium
.premium-quality-card:hover
.quality-line {

    width: 55px;

    opacity: 1;
}


.qualities-premium
.premium-quality-card:hover::after {

    transform: scale(1.35);

    opacity: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .qualities-premium .section-title {
        font-size:
            clamp(2.2rem, 10vw, 3.2rem);
    }

    .qualities-premium .section-intro {
        font-size: .84rem;
    }

    .qualities-premium
    .premium-quality-card {

        min-height: 190px;

        padding: 1.25rem;

        border-radius: 15px;
    }

    .qualities-premium .card-icon {
        width: 37px;
        height: 37px;

        margin-bottom: 1rem;
    }

    .qualities-premium
    .premium-quality-card h3 {

        font-size: 1.05rem;
    }

    .qualities-premium
    .premium-quality-card p {

        font-size: .7rem;
    }
}

/* =========================================================
   PARCOURS PREMIUM
========================================================= */

.parcours-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(142, 99, 255, .09),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(84, 206, 255, .07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #05060a 0%,
            #070912 48%,
            #05060a 100%
        );
}


/* Technical grid */

.parcours-premium::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: .11;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}


/* Ambient glow */

.parcours-premium::after {
    content: "";

    position: absolute;

    width: 800px;
    height: 400px;

    left: 50%;
    bottom: -320px;

    transform: translateX(-50%);

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(86, 104, 255, .10);

    filter: blur(120px);

    pointer-events: none;
}


.parcours-premium .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.parcours-premium .section-number {
    display: inline-flex;
    align-items: center;

    gap: .7rem;

    margin-bottom: .9rem;

    color: #8d98ff;

    font-size: .66rem;
    font-weight: 650;

    letter-spacing: .16em;
}


.parcours-premium .section-number::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8d98ff;

    box-shadow:
        0 0 12px rgba(141,152,255,.75);
}


/* =========================================================
   MAIN TITLE
========================================================= */

.parcours-premium .section-title {
    max-width: 820px;

    margin: 0 0 1rem;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 4.6rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.parcours-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff,
            #659fff,
            #54ceff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.parcours-intro {
    max-width: 650px;

    margin-bottom: 3.5rem;

    color:
        rgba(236,241,255,.62);

    font-size: .9rem;

    line-height: 1.7;
}


/* =========================================================
   COLUMNS
========================================================= */

.parcours-columns {
    position: relative;
}


.parcours-column {
    position: relative;

    height: 100%;
}


/* =========================================================
   COLUMN HEADINGS
========================================================= */

.parcours-column-header {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 2.2rem;
}


.parcours-header-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    border:
        1px solid rgba(141,152,255,.24);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(142,99,255,.18),
            rgba(84,206,255,.08)
        );

    color: #a6afff;

    font-size: .82rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);
}


.parcours-column-header span {
    display: block;

    margin-bottom: .15rem;

    color: #8d98ff;

    font-size: .52rem;

    font-weight: 650;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.parcours-column-header h3 {
    margin: 0;

    color: #fff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

    letter-spacing: -.03em;
}


/* =========================================================
   TIMELINE
========================================================= */

.premium-timeline {
    position: relative;

    padding-left: 32px;
}


/* Vertical line */

.premium-timeline::before {
    content: "";

    position: absolute;

    left: 6px;
    top: 7px;
    bottom: 15px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            #8e63ff,
            rgba(101,159,255,.45),
            rgba(84,206,255,.08)
        );
}


/* =========================================================
   ITEM
========================================================= */

.premium-timeline-item {
    position: relative;

    padding: 0 0 2.6rem;

    transition:
        transform .35s ease;
}


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


/* Dot */

.timeline-dot {
    position: absolute;

    left: -31px;
    top: 7px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    border:
        2px solid #0a0c15;

    background: #8d98ff;

    box-shadow:
        0 0 0 3px rgba(141,152,255,.10),
        0 0 14px rgba(141,152,255,.40);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   DATE
========================================================= */

.timeline-date {
    display: inline-block;

    margin-bottom: .65rem;

    color: #8d98ff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .62rem;
    font-weight: 650;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* =========================================================
   JOB / SCHOOL
========================================================= */

.timeline-content h4 {
    margin: 0 0 .4rem;

    color: #ffffff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: 1.08rem;

    font-weight: 700;

    letter-spacing: -.02em;

    line-height: 1.3;
}


/* =========================================================
   SUBTITLE
========================================================= */

.timeline-subtitle {
    display: inline-block;

    margin-bottom: .75rem;

    background:
        linear-gradient(
            90deg,
            #a18aff,
            #7f98ff,
            #67cfff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: .75rem;
    font-weight: 550;

    font-style: italic;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.timeline-content p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(236,241,255,.55);

    font-size: .78rem;

    line-height: 1.75;
}


/* =========================================================
   HOVER
========================================================= */

.premium-timeline-item:hover {
    transform:
        translateX(4px);
}


.premium-timeline-item:hover
.timeline-dot {

    transform: scale(1.2);

    box-shadow:
        0 0 0 4px rgba(141,152,255,.12),
        0 0 20px rgba(101,159,255,.55);
}


.premium-timeline-item:hover
.timeline-content h4 {

    color: #f9faff;
}


/* =========================================================
   DIVIDER BETWEEN FORMATION / EXPERIENCE
========================================================= */

@media (min-width: 992px) {

    .parcours-columns > div:first-child {
        padding-right: 3rem;
    }

    .parcours-columns > div:last-child {
        position: relative;

        padding-left: 3rem;
    }


    .parcours-columns > div:last-child::before {
        content: "";

        position: absolute;

        left: 0;
        top: 0;
        bottom: 0;

        width: 1px;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(141,152,255,.15) 15%,
                rgba(101,159,255,.12) 85%,
                transparent
            );
    }
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .parcours-intro {
        margin-bottom: 2.5rem;
    }

    .parcours-column {
        max-width: 680px;
    }
}


@media (max-width: 575.98px) {

    .parcours-premium .section-title {
        font-size:
            clamp(2.2rem, 10vw, 3.1rem);
    }


    .parcours-intro {
        font-size: .82rem;
    }


    .parcours-column-header {
        margin-bottom: 1.7rem;
    }


    .parcours-header-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .parcours-column-header h3 {
        font-size: 1.3rem;
    }


    .premium-timeline {
        padding-left: 28px;
    }


    .timeline-dot {
        left: -27px;

        width: 10px;
        height: 10px;
    }


    .timeline-content h4 {
        font-size: .98rem;
    }


    .timeline-content p {
        font-size: .72rem;
    }


    .premium-timeline-item {
        padding-bottom: 2rem;
    }
}

/* =========================================================
   PREMIUM CTA
========================================================= */

.cta-premium {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: clamp(4rem, 7vw, 6.5rem) 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(142, 99, 255, .17),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 45%,
            rgba(84, 206, 255, .13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05060a 0%,
            #090c18 48%,
            #05060a 100%
        );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.cta-premium::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .028) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000,
            transparent 78%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000,
            transparent 78%
        );
}


/* =========================================================
   BOTTOM GLOW
========================================================= */

.cta-premium::after {
    content: "";

    position: absolute;

    width: 720px;
    height: 280px;

    left: 50%;
    bottom: -210px;

    transform: translateX(-50%);

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(86, 104, 255, .17);

    filter: blur(100px);

    pointer-events: none;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.cta-premium-inner {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    padding:
        clamp(2rem, 4vw, 3.2rem);

    overflow: hidden;

    border:
        1px solid rgba(160, 170, 255, .18);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018)
        );

    backdrop-filter:
        blur(20px) saturate(120%);

    -webkit-backdrop-filter:
        blur(20px) saturate(120%);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}


/* Ligne lumineuse supérieure */

.cta-premium-inner::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8e63ff,
            #659fff,
            #54ceff,
            transparent
        );

    opacity: .75;
}


/* Halo interne */

.cta-premium-inner::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(101, 159, 255, .11);

    filter: blur(70px);

    pointer-events: none;
}


/* =========================================================
   CONTENT
========================================================= */

.cta-premium-content {
    position: relative;

    z-index: 2;

    max-width: 720px;
}


/* =========================================================
   KICKER
========================================================= */

.cta-kicker {
    display: inline-flex;

    align-items: center;

    gap: .65rem;

    margin-bottom: 1.1rem;

    padding:
        .5rem .8rem;

    border:
        1px solid rgba(141, 152, 255, .18);

    border-radius: 999px;

    background:
        rgba(105, 112, 255, .06);

    color:
        rgba(255, 255, 255, .68);

    font-size: .61rem;

    font-weight: 650;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.cta-kicker i {
    color: #9da7ff;

    font-size: .62rem;

    filter:
        drop-shadow(
            0 0 7px rgba(141, 152, 255, .45)
        );
}


/* =========================================================
   TITLE
========================================================= */

.cta-premium .section-title {
    max-width: 700px;

    margin: 0;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.5rem, 4.7vw, 4.5rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -.045em;

    text-transform: none;

    color: #f7f9ff;
}


.cta-title-highlight {
    background:
        linear-gradient(
            90deg,
            #8e63ff,
            #659fff,
            #54ceff
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


/* =========================================================
   COPY
========================================================= */

.cta-copy {
    max-width: 610px;

    margin:
        1.25rem 0 0;

    color:
        rgba(236, 241, 255, .59);

    font-size: .86rem;

    line-height: 1.75;
}


/* =========================================================
   PHONE CONTAINER
========================================================= */

.cta-contact-info {
    display: flex;

    align-items: center;

    margin-top: 1.4rem;
}


/* =========================================================
   PHONE
========================================================= */

.cta-phone {
    display: inline-flex;

    align-items: center;

    gap: .75rem;

    padding:
        .55rem .85rem .55rem .55rem;

    border:
        1px solid rgba(141, 152, 255, .16);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);

    text-decoration: none;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   PHONE ICON
========================================================= */

.cta-phone-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(142, 99, 255, .22),
            rgba(84, 206, 255, .11)
        );

    border:
        1px solid rgba(141, 152, 255, .18);

    color: #a6afff;

    font-size: .7rem;

    transition:
        color .35s ease,
        transform .35s ease,
        background .35s ease;
}


/* =========================================================
   PHONE TEXT
========================================================= */

.cta-phone-content {
    display: flex;

    flex-direction: column;

    gap: 1px;
}


.cta-phone-content small {
    color:
        rgba(236, 241, 255, .42);

    font-size: .51rem;

    font-weight: 500;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.cta-phone-content strong {
    color:
        rgba(255, 255, 255, .90);

    font-size: .76rem;

    font-weight: 650;

    letter-spacing: .035em;

    transition:
        color .35s ease;
}


/* =========================================================
   PHONE HOVER
========================================================= */

.cta-phone:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(141, 152, 255, .34);

    background:
        rgba(105, 112, 255, .07);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18);
}


.cta-phone:hover
.cta-phone-icon {

    transform:
        rotate(-5deg);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(142, 99, 255, .38),
            rgba(84, 206, 255, .20)
        );
}


.cta-phone:hover
.cta-phone-content strong {

    color: #9ecfff;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.cta-premium-button {
    position: relative;

    z-index: 3;

    flex: 0 0 auto;

    min-height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 1rem;

    padding:
        .55rem .65rem
        .55rem 1.45rem;

    border:
        1px solid rgba(255, 255, 255, .15);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #7958ec 0%,
            #5668ff 54%,
            #269cff 100%
        );

    color: #fff;

    font-family:
        "Inter",
        "Manrope",
        sans-serif;

    font-size: .75rem;

    font-weight: 650;

    letter-spacing: .035em;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 15px 40px rgba(74, 77, 255, .28),
        inset 0 1px 0 rgba(255, 255, 255, .22);

    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease;
}


.cta-premium-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 22px 50px rgba(74, 77, 255, .40),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}


/* =========================================================
   BUTTON ICON
========================================================= */

.cta-button-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .16);

    border:
        1px solid rgba(255, 255, 255, .15);

    font-size: .67rem;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background .35s ease;
}


.cta-premium-button:hover
.cta-button-icon {

    transform:
        translateX(3px);

    background:
        rgba(255, 255, 255, .24);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .cta-premium-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 2rem;
    }


    .cta-premium-button {
        align-self: flex-start;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .cta-premium {
        padding:
            3.5rem 0;
    }


    .cta-premium-inner {
        padding:
            1.6rem;

        border-radius: 20px;
    }


    .cta-premium .section-title {
        font-size:
            clamp(2.1rem, 10vw, 3rem);
    }


    .cta-copy {
        font-size: .79rem;
    }


    .cta-kicker {
        font-size: .53rem;

        letter-spacing: .09em;
    }


    /* PHONE */

    .cta-contact-info {
        width: 100%;
    }


    .cta-phone {
        width: 100%;
    }


    .cta-phone-content strong {
        font-size: .72rem;
    }


    /* BUTTON */

    .cta-premium-button {
        width: 100%;

        justify-content:
            space-between;

        min-height: 54px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cta-phone,
    .cta-phone-icon,
    .cta-phone-content strong,
    .cta-premium-button,
    .cta-button-icon {
        transition: none;
    }


    .cta-phone:hover,
    .cta-premium-button:hover {
        transform: none;
    }
}

/* =========================================================
   PREMIUM FOOTER
========================================================= */

.site-footer {
    position: relative;

    padding: 1.6rem 0;

    border-top:
        1px solid rgba(141, 152, 255, .12);

    background:
        linear-gradient(
            180deg,
            #05060a 0%,
            #070811 100%
        );
}


/* Ligne lumineuse très discrète */

.site-footer::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: min(600px, 70%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(142, 99, 255, .45),
            rgba(101, 159, 255, .45),
            rgba(84, 206, 255, .30),
            transparent
        );
}


/* =========================================================
   FOOTER INNER
========================================================= */

.footer-inner {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 2rem;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright {
    color:
        rgba(236, 241, 255, .42);

    font-size: .67rem;

    line-height: 1.5;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.footer-legal {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: .55rem;
}


.footer-legal a,
.footer-cookie-button {
    position: relative;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        rgba(236, 241, 255, .46);

    font-family: inherit;

    font-size: .62rem;

    font-weight: 500;

    line-height: 1.5;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .3s ease;
}


.footer-legal a:hover,
.footer-cookie-button:hover {
    color: #9da7ff;
}


/* Séparateurs */

.footer-separator {
    color:
        rgba(141, 152, 255, .30);

    font-size: .65rem;
}


/* =========================================================
   SOCIALS
========================================================= */

.footer-socials {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: .45rem;
}


.site-footer .social-link {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(141, 152, 255, .14);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .025);

    color:
        rgba(236, 241, 255, .58);

    font-size: .7rem;

    text-decoration: none;

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.site-footer .social-link:hover {
    transform:
        translateY(-2px);

    color: #ffffff;

    border-color:
        rgba(141, 152, 255, .35);

    background:
        linear-gradient(
            135deg,
            rgba(142, 99, 255, .18),
            rgba(84, 206, 255, .08)
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .footer-inner {
        grid-template-columns: 1fr;

        justify-items: center;

        gap: 1rem;

        text-align: center;
    }


    .footer-socials {
        justify-content: center;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .site-footer {
        padding: 1.5rem 0;
    }


    .footer-inner {
        gap: 1.1rem;
    }


    .footer-legal {
        gap: .4rem;
    }


    .footer-legal a,
    .footer-cookie-button {
        font-size: .58rem;
    }


    .footer-copyright {
        font-size: .6rem;
    }
}