/* ===== Fond + gradients ===== */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #181823;
    overflow-x: hidden;   /* empêche juste le scroll horizontal */
    overflow-y: auto;     /* autorise le scroll vertical */
    font-family: 'Inter', sans-serif;
}

body {
    padding-top: 90px; /* ajuste si ton header est plus haut/bas */
}

/* ========================= */
/* CONTAINER GLOBAL (alignement) */
/* ========================= */

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .skills2__desc br { display: none; }
}

  .hero__image-wrapper img {
    width: 267px;
    height: 576px;
    object-fit: cover;
    max-width: none;
  }

}

@media (max-width: 400px) {
  .container { padding: 0 16px; }
}
/* Container large pour testimonials */
.container-wide {
  width: 100%;
  max-width: 1600px; /* tu peux monter à 1800px si tu veux encore plus large */
  margin: 0 auto;
  padding: 0 60px; /* plus de “respiration” sur les côtés */
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .container-wide {
    padding: 0 26px; /* mobile = normal */
  }
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

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

    padding: 26px;
    background: transparent;

    opacity: 1;
    transform: translateY(0);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
      opacity 0.35s ease,
      transform 0.35s cubic-bezier(0.4,0.0,0.2,1),
      background 0.35s ease,
      backdrop-filter 0.35s ease,
      -webkit-backdrop-filter 0.35s ease;
}

/* Caché (scroll down) */
.site-header.hide {
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
}

/* Visible (scroll up) — Smooth */
.site-header.show {
    opacity: 1;
    transform: translateY(0);
    background: rgba(250, 250, 250, 0.01);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(16px);
}




/* Logo + actions largeur fixe */
.logo,
.actions {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
}

.logo { justify-content: flex-start; }
.actions { justify-content: flex-end; gap: 12px; }

/* Menu */
.menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.menu ul {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.menu a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    color: white;        /* ADAPTÉ pour ton fond sombre */
}

/* ===== Boutons ===== */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 12px;
    padding: 16px 20px;
    height: 52px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
}

.btn-secondary {
    background: #fff;
    border: 1px solid #E0E0E0;
    color: #696f81;
}

.btn-primary {
    background: linear-gradient(180deg, #7066EB 0%, #5B4DF3 100%);
    color: #FFF;
    border: none;
}

/* Responsive header */
@media (max-width: 768px) {
    .menu {
        display: none;
    }

    .site-header {
        padding: 14px 24px;
        justify-content: space-between;
    }

    .logo,
    .actions {
        flex: 0 0 auto;
    }
}

/* ===================== */
/* HERO SECTION (NO IMG) */
/* ===================== */

.hero {
    margin: 26px 0;
    border-radius: 20px;
    padding: 80px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero__title {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.1;
    color: #ffffff;           /* ⇦ adapté à ton fond sombre */
    letter-spacing: -0.02em;
}

.hero__accent {
    color: inherit;
}

.hero__accent--underline {
    position: relative;
    display: inline-block;
}

.hero__accent--word {
    position: relative;
    z-index: 1;
}

.hero__scribble {
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.hero__desc {
    margin: 40px auto 30px;
    max-width: 720px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 2vw, 20px);
    line-height: 1.6;
    color: #fff;         
}

.hero__actions {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Gradient local derrière la hero */
.hero {
    position: relative;
    z-index: 1;
}

.hero__image-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 0;
}

/* Gradient local autour de l'image */
.hero__image-wrapper::before {
    content: "";
    position: absolute;

    /* déborde un peu au-dessus et en dessous de l'image */
    top: -12%;
    bottom: -2%;

    /* un peu plus large que l'image */
    left: 50%;
    width: 90%;
    transform: translateX(-50%);

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

    background:
        radial-gradient(circle at 30% 25%, rgba(145, 190, 255, 0.6), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 110, 0.55), transparent 30%),
        radial-gradient(circle at 70% 40%, rgba(90, 20, 200, 0.45), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(40, 30, 150, 0.4), transparent 30%);
    filter: blur(80px);
}

/* picture transparent au layout flex → l'img se centre directement */
.hero__image-wrapper picture {
    display: contents;
}

/* Image elle-même (border + radius) */
.hero__image-wrapper img {
    width: 100%;
    max-width: 1300px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    object-fit: cover;
    display: block;
}

/* ============================== */
/* UNIFICATION DES BOUTONS HEADER & HERO */
/* ============================== */

/* Tous les boutons (button ou <a>) */
.btn,
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;          /* même hauteur */
    padding: 16px 20px;    /* même padding */
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    box-sizing: border-box;
    text-decoration: none !important; /* supprime soulignements définitivement */
}

/* Bouton Contact (primary) */
.btn-primary {
    background: linear-gradient(180deg, #7066EB 0%, #5B4DF3 100%);
    color: #FFF;
    border: none;
}

/* Bouton Resume (secondary) */
.btn-secondary {
    background: #FFF;
    border: 1px solid #E0E0E0;
    color: #696f81;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

/* Évite tout comportement de lien par défaut */
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active {
    text-decoration: none !important;
}

/* ============================== */
/* HERO IMAGE (full-width screen) */
/* ============================== */

.hero__image-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.hero__image-wrapper img {
    width: 100%;
    max-width: 1300px;
    border-radius: 24px;

    /* Bordure externe subtile */
    border: 20px solid rgba(255, 255, 255, 0.09);

    /* Masque l’image pour un arrondi parfait */
    overflow: hidden;
    display: block;

    /* Inner glow (effet de ton image) */
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.06),
        0 0 0 rgba(0,0,0,0); /* garde l’ombre interne seule */
}

/* ========================= */
/*      PROJECTS SECTION     */
/* ========================= */

.projects-section {
  padding: 0;
}

.projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.projects-title {
  margin: 0 0 12px;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.projects-desc {
  margin: 0;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #696f81;
}

/* Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}

/* Cards */
.project-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.project-card:hover {
  border-color: rgba(110, 99, 236, 0.3);
  background: rgba(110, 99, 236, 0.05);
  transform: translateY(-3px);
}

.project-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
}

/* Cover */
.project-card__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.project-card--wide .project-card__cover {
  aspect-ratio: auto;
  width: 50%;
}

.project-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  opacity: 0.85;
}

.project-card:hover .project-card__cover img {
  transform: scale(1.04);
  opacity: 1;
}

/* Body */
.project-card__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-card__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

.project-card__tag--year {
  background: rgba(110, 99, 236, 0.1);
  border-color: rgba(110, 99, 236, 0.25);
  color: #9d95f5;
}

.project-card__title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.project-card__desc {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  color: #696f81;
  line-height: 1.65;
}

.project-card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #6E63EC;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.project-card:hover .project-card__link {
  color: #9d95f5;
}

/* Responsive */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card--wide {
    flex-direction: column;
  }

  .project-card--wide .project-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }

  .project-card__body {
    padding: 20px 20px 24px;
  }
}

/* ========================= */
/*       SKILLS 2 SECTION    */
/* ========================= */

.skills2-section {
  margin: 80px auto;
  padding: 0;
}

.skills2__inner {
  text-align: left;
}

.skills2__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  max-width: 680px;
}

.skills2__title {
  margin: 0;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.skills2__desc {
  margin: 0;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #696f81;
}

/* ========================= */
/*     SKILLS SHOWCASE       */
/* ========================= */

.skills2__showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* ----- LEFT LIST ------ */

.skills2__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.skills2__item {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 24px 20px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.skills2__item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.skills2__item.is-active {
  background: rgba(255, 255, 255, 0.04);
}

/* Progress bar (left border indicator) */
.skills2__item-bar {
  flex-shrink: 0;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.skills2__item-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #6E63EC;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.skills2__item.is-active .skills2__item-progress {
  animation: skillProgress var(--skill-duration, 4s) linear forwards;
}

@keyframes skillProgress {
  from { height: 0%; }
  to   { height: 100%; }
}

.skills2__item-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skills2-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s ease;
}

.skills2__item.is-active .skills2-card__title {
  color: #ffffff;
}

.skills2-card__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #696f81;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.skills2__item.is-active .skills2-card__desc {
  max-height: 80px;
  opacity: 1;
}

/* ----- RIGHT PANEL ------ */

.skills2__panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 668px;
  aspect-ratio: 668 / 540;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.skills2__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.skills2__slide.is-active {
  opacity: 1;
}

.skills2__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------- Responsive -------- */

@media (max-width: 1024px) {
  .skills2__showcase {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .skills2__panel {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .skills2__item {
    padding: 20px 14px;
  }

  .skills2-card__title {
    font-size: 20px;
  }

  .skills2-card__desc {
    font-size: 16px;
  }

  .skills2__panel {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* ========================= */
/* STANDARDISATION SECTIONS */
/* ========================= */

section {
  margin: 80px auto;
  padding: 0;
}

.hero,
.skills-section {
  padding: 80px 0;
}

/* ========================= */
/*     CLIENTS SECTION       */
/* ========================= */

.clients-section {
  padding: 40px 0 80px;
}

.clients-title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  color: #696f81;
}

.clients-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px 64px;
}

.clients-logos img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.clients-logos img:hover {
  opacity: 0.9;
}

/* ========================= */
/*   SUPERLIST Testimonials  */
/* ========================= */


.testimonials-heading {
  margin: 60px auto 60px;   /* marge haute / respiration */
  text-align: center;
}

.testimonials-title {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}




.testimonials-scroller {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 160px;
  padding: 0 40px;
  height: 560px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}



/* la grille */
.testimonials2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-width: 0;
}

/* colonnes verticales */
.testimonials2-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;

  animation: scrollCols linear infinite;
  opacity: 0.65;

  --col-offset: 0px;
  transform: translateY(var(--col-offset));
}

.col-1 {
  --col-offset: 80px;
  animation-duration: 36s;
}

.col-2 {
  --col-offset: -40px;
  animation-duration: 51s;
}

.col-3 {
  --col-offset: 160px;
  animation-duration: 27s;
}


/* ANIMATION */
@keyframes scrollCols {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-55%); }
}

/* CARDS */
.t2-card {
  max-width: 350px;
  padding: 28px 30px 36px;
  border-radius: 22px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  font-size: 15px;
}

/* ===== Fade top & bottom ===== */

.testimonials-scroller::before,
.testimonials-scroller::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}

/* FONDU HAUT */
.testimonials-scroller::before {
  top: 0;          /* ✔ le fade redevient visible en haut */
  height: 180px;
  background: linear-gradient(
    to bottom,
    #181824 0%,
    rgba(24, 24, 36, 0.65) 35%,
    rgba(24, 24, 36, 0.25) 70%,
    rgba(24, 24, 36, 0) 100%
  );
}


/* FONDU BAS */
.testimonials-scroller::after {
  bottom: 0;
  height: 180px;
  background: linear-gradient(
    to top,
    #181824 0%,
    rgba(24, 24, 36, 0.65) 35%,
    rgba(24, 24, 36, 0.25) 70%,
    rgba(24, 24, 36, 0) 100%
  );
}

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

@media (max-width: 700px) {
  .testimonials-scroller {
    height: 540px;
    padding: 0 40px;
  }

  .testimonials2-grid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .testimonials2-col {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .col-2,
  .col-3 {
    display: none;
  }

  .col-1 {
    --col-offset: 0px;
    animation-duration: 30s;
  }

  .t2-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .testimonials-scroller::before,
  .testimonials-scroller::after {
    height: 80px;
  }
}

/* ========================= */
/*        RESUME SECTION     */
/* ========================= */

.resume-section {
  margin: 80px auto;
  padding: 0;
}

.resume-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.resume-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
}

.resume-desc {
  margin: 0;
  max-width: 600px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: #696f81;
}

/* Mobile spacing refinement */
@media (max-width: 700px) {
  .resume-section {
    margin: 80px auto;
  }

  .resume-inner {
    gap: 20px;
  }
}

/* ========================= */
/*   RESUME – AMBIENT HALO   */
/* ========================= */

.resume-section {
  position: relative;
  overflow: visible; /* IMPORTANT */
}

.resume-inner {
  position: relative;
  z-index: 1;
}

/* Halo vertical surdimensionné */
.resume-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 900px;
  height: 900px; /* PLUS GRAND que la section */

  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(110, 99, 236, 0.35) 0%,
      rgba(110, 99, 236, 0.22) 30%,
      rgba(110, 99, 236, 0.12) 50%,
      rgba(110, 99, 236, 0.05) 65%,
      rgba(110, 99, 236, 0) 75%
    );

  filter: blur(80px);
}


@media (max-width: 900px) {
  .resume-section::before {
    width: 600px;
    height: 360px;
    filter: blur(80px);
  }
}

@media (max-width: 600px) {
  .resume-section::before {
    width: 420px;
    height: 300px;
    filter: blur(70px);
  }
}

@media (max-width: 768px) {
  .hero { padding: 24px 0 80px; }
}











/* ========================= */
/* BACKGROUND — FRAMER STYLE */
/* ========================= */

body {
  background-color: #181823;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

/* LAYER 1 — GLOW PRINCIPAL */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(circle at 20% 25%, rgba(120, 170, 255, 0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(231, 72, 84, 0.40), transparent 30%),
    radial-gradient(circle at 50% 70%, rgba(90, 60, 255, 0.20), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(40, 30, 120, 0.25), transparent 55%);

  filter: blur(90px);
}

/* LAYER 2 — VIGNETTE / PROFONDEUR */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(circle at center, transparent 40%, rgba(10, 10, 20, 0.4) 100%);
}

/* ========================= */
/*  DESIGN SYSTEM ANIMATION  */
/* ========================= */

.ds-demo {
  width: 100%;
  height: 100%;
  background: #FF3330;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.ds-canvas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 320px;
  padding: 28px 32px;
  background: #312E40;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.ds-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(110,99,236,.7);
  margin-bottom: 2px;
}

/* Field group row */
.ds-field-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ds-state-label {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,.22);
  font-family: 'Inter', sans-serif;
  width: 46px;
  flex-shrink: 0;
  text-align: right;
}

.ds-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Label */
.ds-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  font-family: 'Inter', sans-serif;
  transition: color .2s;
}

.ds-label--active  { color: #6E63EC; }
.ds-label--error   { color: rgba(240,80,80,.85); }
.ds-label--disabled{ color: rgba(255,255,255,.18); }

/* Input box */
.ds-input {
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  position: relative;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

/* States */
.ds-input--hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

.ds-input--focus {
  border-color: #6E63EC;
  background: rgba(110,99,236,.07);
  box-shadow: 0 0 0 3px rgba(110,99,236,.18);
}

.ds-input--error {
  border-color: rgba(240,80,80,.7);
  background: rgba(240,80,80,.06);
  box-shadow: 0 0 0 3px rgba(240,80,80,.12);
}

.ds-input--filled {
  border-color: rgba(80,210,140,.5);
  background: rgba(80,210,140,.05);
}

.ds-input--disabled {
  border-color: rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  opacity: .45;
}

/* Text inside inputs */
.ds-placeholder {
  color: rgba(255,255,255,.22);
  font-size: 12px;
}

.ds-value {
  color: rgba(255,255,255,.8);
  font-size: 12px;
  flex: 1;
}

.ds-check {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Hint */
.ds-hint {
  font-size: 10px;
  font-weight: 300;
}
.ds-hint--error { color: rgba(240,80,80,.8); }

/* Typing cursor */
.ds-typed {
  color: rgba(255,255,255,.8);
  font-size: 12px;
}

.ds-cursor {
  color: #6E63EC;
  font-size: 14px;
  line-height: 1;
  animation: ds-blink .8s step-end infinite;
}

@keyframes ds-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Stagger entrance — each row fades in */
.ds-field-group {
  opacity: 0;
  transform: translateY(6px);
  animation: ds-row-in .4s ease forwards;
}

.ds-field-group:nth-child(2) { animation-delay: .1s; }
.ds-field-group:nth-child(3) { animation-delay: .22s; }
.ds-field-group:nth-child(4) { animation-delay: .34s; }
.ds-field-group:nth-child(5) { animation-delay: .46s; }
.ds-field-group:nth-child(6) { animation-delay: .58s; }
.ds-field-group:nth-child(7) { animation-delay: .70s; }

@keyframes ds-row-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 700px) {
  .ds-canvas { width: 260px; padding: 20px 18px; gap: 14px; }
  .ds-state-label { width: 38px; font-size: 9px; }
}

/* ========================= */
/*   FIGMA PROTO ANIMATION   */
/* ========================= */

.fpd-demo {
  width: 100%;
  height: 100%;
  background: #0085F2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dot grid background */
.fpd-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Central card */
.fpd-card {
  position: relative;
  z-index: 1;
  background: #312E40;
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 80px 80px;
  grid-template-rows: 80px 80px;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
}

/* Icon buttons */
.fpd-btn {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.45);
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
  position: relative;
}

/* btn 3 spans full width on second row */
.fpd-btn--3 {
  grid-column: 1 / -1;
  width: 100%;
}

/* Hover state (triggered via animation) */
.fpd-btn--hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 24px rgba(255,255,255,.15);
}

/* Animated hover states triggered by keyframes on each button */
.fpd-btn--1 { animation: fpd-btn1 9s ease-in-out infinite; }
.fpd-btn--2 { animation: fpd-btn2 9s ease-in-out infinite; }
.fpd-btn--3 { animation: fpd-btn3 9s ease-in-out infinite; }

@keyframes fpd-btn1 {
  0%, 8%    { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
  12%, 22%  { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); color: #fff; transform: scale(1.06); box-shadow: 0 0 24px rgba(255,255,255,.15); }
  27%, 100% { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
}

@keyframes fpd-btn2 {
  0%, 33%   { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
  38%, 50%  { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); color: #fff; transform: scale(1.06); box-shadow: 0 0 24px rgba(255,255,255,.15); }
  55%, 100% { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
}

@keyframes fpd-btn3 {
  0%, 60%   { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
  65%, 80%  { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); color: #fff; transform: scale(1.06); box-shadow: 0 0 24px rgba(255,255,255,.15); }
  85%, 100% { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); transform: scale(1); box-shadow: none; }
}

/* Cursor — positioned inside .fpd-card (position: relative) */
.fpd-cursor {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 2px 10px rgba(0,0,0,.45);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  /* Base at top-left of card; transforms carry it to each button center */
  top: 0; left: 0;
  animation: fpd-cursor 9s ease-in-out infinite;
  animation-fill-mode: both;
}

/*
  Card layout (padding:28, buttons:80×80, gap:14):
    Card width  = 28 + 80 + 14 + 80 + 28 = 230px
    Card height = 28 + 80 + 14 + 80 + 28 = 230px
  Button centers (from card top-left, offset -6.5px for cursor half-size):
    btn1: (28+40-6.5, 28+40-6.5) = (61.5, 61.5)
    btn2: (28+80+14+40-6.5, 28+40-6.5) = (155.5, 61.5)
    btn3: (230/2 - 6.5, 28+80+14+40-6.5) = (108.5, 155.5)
*/
@keyframes fpd-cursor {
  /* Fade in on btn1 */
  0%   { transform: translate(61.5px, 61.5px); opacity: 0; }
  6%   { transform: translate(61.5px, 61.5px); opacity: 1; }
  /* Hold + hover pulse on btn1 */
  20%  { transform: translate(61.5px, 61.5px) scale(0.8); opacity: 1; }
  25%  { transform: translate(61.5px, 61.5px) scale(1); opacity: .7; }
  /* Move to btn2 */
  33%  { transform: translate(155.5px, 61.5px); opacity: 1; }
  /* Hold on btn2 */
  50%  { transform: translate(155.5px, 61.5px) scale(0.8); opacity: 1; }
  55%  { transform: translate(155.5px, 61.5px) scale(1); opacity: .7; }
  /* Move to btn3 */
  63%  { transform: translate(108.5px, 155.5px); opacity: 1; }
  /* Hold on btn3 */
  78%  { transform: translate(108.5px, 155.5px) scale(0.8); opacity: 1; }
  83%  { transform: translate(108.5px, 155.5px) scale(1); opacity: 0; }
  /* Jump back silently */
  84%  { transform: translate(61.5px, 61.5px); opacity: 0; }
  100% { transform: translate(61.5px, 61.5px); opacity: 0; }
}

/* ========================= */
/*   USABILITY TEST ANIMATION */
/* ========================= */

/* Animated counter properties */
@property --n1 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@property --n2 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.ut-demo {
  width: 100%; height: 100%;
  background: #6E63EC;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 80px;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
}

/* ── Todo card ── */
.ut-todo {
  position: relative;
  background: #312E40;
  border-radius: 16px;
  padding: 14px 14px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.ut-todo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ut-todo__title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.ut-todo__count {
  font-weight: 400;
  color: rgba(255,255,255,.4);
  margin-left: 4px;
}

.ut-todo__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: #e84040;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* List items */
.ut-todo__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ut-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  animation: ut-item-in 9s ease-in-out infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.ut-item:last-child { border-bottom: none; }

.ut-item--1 { animation-delay: 0.1s; }
.ut-item--2 { animation-delay: 0.22s; }
.ut-item--3 { animation-delay: 0.34s; }
.ut-item--4 { animation-delay: 0.46s; }

@keyframes ut-item-in {
  0%, 4%   { opacity: 0; transform: translateY(6px); }
  16%, 80% { opacity: 1; transform: translateY(0); }
  92%,100% { opacity: 0; transform: translateY(-4px); }
}

/* Checkbox */
.ut-cb {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ut-cb--checked {
  border-color: #e84040;
  animation: ut-cb-fill 9s ease-in-out infinite;
  animation-delay: 0.22s;
  animation-fill-mode: both;
}

.ut-cb--checked svg {
  animation: ut-check-pop 9s ease-in-out infinite;
  animation-delay: 0.22s;
  animation-fill-mode: both;
}

@keyframes ut-cb-fill {
  0%, 14%  { background: transparent; border-color: rgba(255,255,255,.25); }
  22%, 80% { background: #e84040; border-color: #e84040; }
  92%,100% { background: transparent; border-color: rgba(255,255,255,.25); }
}

@keyframes ut-check-pop {
  0%, 17%  { opacity: 0; transform: scale(0.4); }
  25%, 80% { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(0.4); }
}

/* Item text */
.ut-item__text {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  font-family: 'Inter', sans-serif;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ut-item__text--done {
  color: rgba(255,255,255,.3);
  position: relative;
}

.ut-item__text--done::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: rgba(255,255,255,.3);
  transform: scaleX(0);
  transform-origin: left;
  animation: ut-strike 9s ease-in-out infinite;
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

@keyframes ut-strike {
  0%, 20%  { transform: scaleX(0); }
  30%, 80% { transform: scaleX(1); }
  92%,100% { transform: scaleX(0); }
}

/* FAB */
.ut-todo__fab {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #e84040;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ut-fab-in 9s ease-in-out infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes ut-fab-in {
  0%, 8%   { opacity: 0; transform: scale(0.6); }
  18%, 80% { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(0.6); }
}

/* ── Metrics row ── */
.ut-metrics {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.ut-metric {
  flex: 1;
  background: #312E40;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: ut-metric-in 9s ease-in-out infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.ut-metric--1 { animation-delay: 0.55s; }
.ut-metric--2 { animation-delay: 0.70s; }

@keyframes ut-metric-in {
  0%, 8%   { opacity: 0; transform: translateY(8px); }
  20%, 80% { opacity: 1; transform: translateY(0); }
  92%,100% { opacity: 0; transform: translateY(4px); }
}

/* Animated percentage numbers */
.ut-metric__num {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Animation moved to ::before so @property value is animated on the same element
   that reads it via counter-reset — avoids the inherits:false propagation issue */
.ut-metric__num--1::before {
  content: counter(c1) "%";
  counter-reset: c1 var(--n1);
  animation: ut-count1 9s ease-in-out infinite;
  animation-delay: 0.55s;
  animation-fill-mode: both;
}

.ut-metric__num--2::before {
  content: counter(c2) "%";
  counter-reset: c2 var(--n2);
  animation: ut-count2 9s ease-in-out infinite;
  animation-delay: 0.70s;
  animation-fill-mode: both;
}

@keyframes ut-count1 {
  0%, 8%   { --n1: 0;  color: rgba(255,255,255,.85); }
  30%, 80% { --n1: 76; color: #4ade80; }
  93%,100% { --n1: 0;  color: rgba(255,255,255,.85); }
}
@keyframes ut-count2 {
  0%, 8%   { --n2: 0;  color: rgba(255,255,255,.85); }
  30%, 80% { --n2: 11; color: #f87171; }
  93%,100% { --n2: 0;  color: rgba(255,255,255,.85); }
}

.ut-metric__desc {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .ut-demo { padding: 12px; gap: 8px; }
  .ut-todo__title { font-size: 14px; }
  .ut-item__text { font-size: 11px; }
  .ut-metric__num { font-size: 24px; }
  .ut-metric__desc { font-size: 10px; }
}

/* NOISE / GRAIN */
body::marker {
  content: "";
}