*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
html.lenis{scroll-behavior:auto}
body{margin:0;background:var(--sw-canvas);color:var(--sw-text);font-family:var(--sw-font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:#2563eb;color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:600;line-height:1.17;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(34px,3.8vw,54px)}
h3{font-size:28px}
p{color:var(--sw-body)}
strong{color:var(--sw-text);font-weight:650}
button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--sw-cyan);outline-offset:5px;border-radius:3px}
[hidden]{display:none!important}
.shell{width:min(calc(100% - var(--sw-margin)*2),1280px);margin-inline:auto}
.section{padding-block:clamp(36px,3.8vw,56px)}
.eyebrow{font-size:12px;font-weight:650;line-height:1.6;letter-spacing:.1em;color:#b9cbe2}
.section-number{color:#89c3ff;margin-right:14px}
.text-light{color:#aad5ff}
.skip-link{position:fixed;top:10px;left:20px;z-index:100;background:#fff;color:#0b0f19;padding:12px 20px;transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.header{position:sticky;top:0;z-index:40;background:#0b0f19;border-bottom:1px solid #ffffff14}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:90px;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px}
.brand__mark{position:relative;display:block;width:39px;height:39px;overflow:hidden}
.brand__mark img{position:absolute;max-width:none;width:112px;left:-35px;top:-30px}
.brand__name{font-size:20px;letter-spacing:.035em;font-weight:750}
.brand__dot{color:var(--sw-cyan)}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:550}
.nav>a{color:#d1dbea;padding-block:12px;transition:color .18s;min-height:44px}
.nav>a:hover,.nav>a[aria-current]{color:#fff}
.nav .nav__contact{padding:12px 17px;border:1px solid #455775;border-radius:8px;color:#f8fafc}
.nav__contact span{display:inline-block;margin-left:14px;color:#aad5ff;font-size:18px;line-height:1}
.header__menu{display:none;border:1px solid #455775;background:transparent;color:#fff;min-height:44px;padding:8px 14px;align-items:center;gap:12px;border-radius:8px}
.header__menu-icon{height:10px;width:16px;border-block:1px solid currentColor}
.signal{display:inline-block;width:6px;height:6px;border-radius:50%;background:#83d8ff;box-shadow:0 0 14px #38bdf855;flex-shrink:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:52px;border-radius:8px;padding:13px 20px;font-size:14px;font-weight:650;transition:transform .2s,background .2s}
.button--primary{background:#2563eb;color:#fff;border:1px solid #4b83ed;box-shadow:0 6px 28px #2563eb20}
.button--primary:hover{background:#1d4ed8;transform:translateY(-2px)}
.button span{font-size:21px;line-height:1;font-weight:400}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;min-height:48px}
.text-link span{color:#aad5ff;transition:transform .2s}
.text-link:hover span{transform:translateY(3px)}
.scroll-cue{display:flex;align-items:center;gap:12px;min-height:44px;color:#cad7e9}
.scroll-cue>span{width:30px;height:38px;display:grid;place-items:center;border:1px solid #526987;border-radius:18px;line-height:0}
.scroll-cue svg,.footer__top-icon svg,.contact__avatar svg,.footer__contact-avatar svg{display:block;flex-shrink:0}
/* === SECTION VALEURS & IMPACT (INTRO) === */
.intro {
  position: relative;
  margin-block: clamp(20px, 2.5vw, 34px);
  padding: clamp(34px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(10, 15, 26, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35), rgba(37, 99, 235, 0.5), transparent);
}

.intro::after {
  content: "";
  position: absolute;
  top: -80px;
  left: 25%;
  width: 380px;
  height: 280px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), transparent 70%);
  pointer-events: none;
}

.intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  align-items: center;
  gap: 48px;
}

.intro__statement-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intro__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sw-cyan, #38bdf8);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.intro__statement {
  font-size: clamp(25px, 2.5vw, 33px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #f8fafc;
  font-weight: 750;
  margin: 0;
}

.intro__statement-highlight {
  background: linear-gradient(135deg, #cbd5e1 20%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro__tagline {
  font-size: 13.5px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 2px 0 0;
  max-width: 36ch;
}

.intro__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: transform 0.22s var(--sw-ease), border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}

.fact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 20px rgba(37, 99, 235, 0.12);
}

.fact-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fact-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 650;
  color: #bae6fd;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fact-card__icon {
  color: var(--sw-cyan, #38bdf8);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fact-card__value {
  font-size: clamp(32px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8fafc;
  line-height: 1.1;
  margin-top: 4px;
}

.fact-card__plus {
  color: var(--sw-cyan, #38bdf8);
  font-size: 0.75em;
  margin-left: 2px;
  vertical-align: top;
}

.fact-card__value--text {
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  line-height: 1.25;
  margin-top: 8px;
  margin-bottom: 3px;
}

.fact-card__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}

.fact-card__label strong {
  color: #e2e8f0;
  font-weight: 650;
  font-size: 12.5px;
}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:34px}
.section-heading>div{min-width:0}
.section-heading .eyebrow{margin-bottom:22px}
.section-heading>p{max-width:365px;flex:0 1 365px;font-size:17px;line-height:1.75;padding-bottom:4px}
.expertise__list{border-top:0}
.service{border-bottom:1px solid #ffffff24}
.service summary{display:grid;grid-template-columns:44px minmax(0,1fr) 225px 36px;align-items:center;gap:16px;padding:29px 2px;cursor:pointer;list-style:none}
.service summary::-webkit-details-marker{display:none}
.service summary:hover .service__title{color:#b7ddff}
.service__number{color:#b0c4df;font-size:13px;font-variant-numeric:tabular-nums}
.service__title{font-size:clamp(21px,2vw,27px);font-weight:550;letter-spacing:-.02em;line-height:1.4}
.service__hint{color:#b7c4d6;font-size:14px}
.service__number{transition:color .35s ease}
.service__body{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;padding:0 32px 38px 62px}
.service__body p{font-size:16px;line-height:1.8;max-width:62ch}
.service__deliverables{padding-left:20px;color:#d0dbeb;font-size:15px;line-height:1.85;margin:22px 0}
.service__deliverables li{padding-left:3px;margin-bottom:6px}
.service__deliverables li::marker{color:#9acbff}
.service__body--text{display:block;max-width:960px;padding-bottom:35px}
.service__body--text .tags{margin-top:24px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{color:#d0e4ff;font-size:12px;border:1px solid #445674;border-radius:5px;padding:5px 10px}
.software-art{align-self:center;border:1px solid #47628d;border-radius:10px;background:linear-gradient(130deg,#16233b,#0d1524);box-shadow:0 16px 60px #0003;transform:perspective(900px) rotateY(-6deg) rotateX(3deg);transition:transform .4s}
.service:hover .software-art{transform:perspective(900px) rotateY(-2deg)}
.software-art__bar{display:flex;align-items:center;gap:5px;min-height:42px;padding:8px 12px;border-bottom:1px solid #ffffff1a}
.software-art__bar i{height:4px;width:4px;background:#8ea5c7;border-radius:50%;flex-shrink:0}
.software-art__bar span{margin-left:10px;font-size:12px;color:#c1d3ed}
.software-art__layout{display:flex;height:168px}
.software-art__sidebar{width:52px;padding:20px 10px;display:flex;flex-direction:column;gap:17px;border-right:1px solid #ffffff15}
.software-art__sidebar b{width:25px;height:3px;background:#526e93;border-radius:4px}
.software-art__sidebar b:first-child{background:#60a5fa}
.software-art__content{flex:1;min-width:0;padding:20px 24px}
.software-art__line{display:block;width:49%;height:5px;background:#6787ac;border-radius:5px;margin-bottom:17px}
.software-art__tiles{display:flex;gap:10px}
.software-art__tiles i{width:30%;height:29px;background:linear-gradient(130deg,#29589755,#2866a522);border:1px solid #4c8fcb3b;border-radius:3px}
.software-art__chart{height:57px;display:flex;align-items:flex-end;gap:8px;margin-top:16px}
.software-art__chart i{width:10%;height:24%;background:linear-gradient(#4c9aec,#2456aa);border-radius:2px 2px 0 0}
.software-art__chart i:nth-child(2){height:42%}.software-art__chart i:nth-child(3){height:36%}.software-art__chart i:nth-child(4){height:65%}.software-art__chart i:nth-child(5){height:56%}.software-art__chart i:nth-child(6){height:84%}.software-art__chart i:nth-child(7){height:100%;background:linear-gradient(#87d6ff,#3584d0)}
.software-art__caption{display:block;padding:12px;border-top:1px solid #ffffff1a;color:#c1d3ed;letter-spacing:.03em;font-size:11px;line-height:1.65}
.tech-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:32px}
.tech-line>span{font-size:12px;letter-spacing:.08em;color:#b7c4d6}
.tech-line p{font-size:16px;color:#d9e4f3}
.tech-line i{margin-inline:16px;font-size:14px;font-style:normal;color:#93abc9}
.approach{background:radial-gradient(ellipse at 22% 52%,#10244750,transparent 48%),#090e18;border-block:1px solid #ffffff14;padding-bottom:48px}
.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.journey__stage{position:sticky;top:120px;height:440px;margin-bottom:40px}
.journey__chapters{padding-bottom:16px}
.chapter{padding-block:34px 46px;max-width:490px;border-bottom:1px solid #ffffff1c}
.chapter:last-child{border:0}
.chapter__index{color:#9ed4ff;font-size:15px;margin-bottom:20px}
.chapter__index span{color:#bbcee5;font-size:12px;letter-spacing:.08em;margin-left:14px}
.chapter h3{font-size:32px;line-height:1.3;margin-bottom:22px}
.chapter>p:not(.chapter__index){font-size:16px;line-height:1.85}
.chapter__outcome{display:block;font-size:14px;color:#c1ddff;margin-top:26px}
.collaboration__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.engagement{display:flex;flex-direction:column;border:1px solid #ffffff24;border-radius:12px;padding:32px 28px;background:#101724;transition:transform .25s,border-color .25s}
.engagement:hover{transform:translateY(-4px);border-color:#7bb6f5}
.engagement--featured{border-color:#4a75ae;background:radial-gradient(ellipse at 50% 0,#16448650,transparent 75%),#0f192b}
.engagement__symbol{display:block;color:#acd8ff;font-size:34px;line-height:1;margin-bottom:32px}
.engagement .eyebrow{margin-bottom:18px}
.engagement h3{font-size:26px;line-height:1.35;margin-bottom:20px}
.engagement>p:not(.eyebrow){font-size:16px;line-height:1.8;margin-bottom:28px}
.engagement__foot{display:block;padding-top:20px;margin-top:auto;border-top:1px solid #ffffff24;font-size:13px;color:#c1d1e7}
/* === PARTENAIRES STUDIO SADAWEB === */
.partners {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  align-items: center;
  gap: 48px;
  margin-top: clamp(36px, 4vw, 52px);
  padding: clamp(32px, 4vw, 44px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(10, 15, 26, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.partners::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35), rgba(37, 99, 235, 0.5), transparent);
}

.partners::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
  pointer-events: none;
}

.partners__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partners__intro .eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sw-cyan, #38bdf8);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.partners__intro .section-number {
  color: var(--sw-cyan, #38bdf8);
  margin-right: 0;
  font-size: 13px;
}

.partners h3 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #f8fafc;
  margin: 0;
  line-height: 1.2;
}

.partners__description {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 4px 0 0;
  max-width: 38ch;
}

.partners__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 5px 12px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 550;
  color: #bae6fd;
}

.partners__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.partners__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 0.22s var(--sw-ease), border-color 0.22s ease, box-shadow 0.22s ease;
}

.partner-card:only-child {
  grid-column: 1 / -1;
}

.partner-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 20px rgba(37, 99, 235, 0.12);
}

.partner-card__ambient {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 70%);
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.partner-card:hover .partner-card__ambient {
  opacity: 1;
}

.partner-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.partner-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.partner-card__logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s var(--sw-ease), border-color 0.22s ease;
}

.partner-card:hover .partner-card__logo-badge {
  transform: scale(1.05);
  border-color: rgba(56, 189, 248, 0.5);
}

.partner-card__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f8fafc;
  margin: 0;
  line-height: 1.2;
}

.partner-card__domain {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.partner-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}

.partner-card__text {
  font-size: 12.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
  flex-grow: 1;
}

.partner-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.partner-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #e0f2fe;
}
.team{background:#0e1521;border-block:1px solid #ffffff14}
.team__photo{position:relative;border-radius:12px;overflow:hidden;background:#182438}
.team__photo img{width:100%;height:570px;object-fit:cover;object-position:center 46%;filter:saturate(.85)}
.team__photo::after{position:absolute;content:"";inset:45% 0 0;background:linear-gradient(transparent,#050b16f5);pointer-events:none}
.team__photo figcaption{position:absolute;z-index:1;bottom:28px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.team__photo figcaption>span:first-child{font-size:26px;font-weight:600;letter-spacing:-.02em}
.team__photo figcaption>span:last-child{font-size:12px;letter-spacing:.1em;color:#e2edfc}
.team__story{display:grid;grid-template-columns:1fr 1.13fr;gap:56px;margin-top:36px}
.team__story .eyebrow{margin-bottom:22px}
.team__story h3{font-size:30px;line-height:1.4}
.team__story>div>p:not(.eyebrow){font-size:16px;line-height:1.85;margin-bottom:22px}
.team__values{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:#c0dcfa;margin-top:26px}
.team__values span::before{display:none!important}
.security{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.security .eyebrow{margin-bottom:24px}
.security h2{font-size:clamp(34px,3.7vw,52px)}
.security__intro{font-size:17px;margin-top:26px;max-width:420px;line-height:1.8}
.security__list article{display:flex;gap:24px;padding-block:25px;border-bottom:1px solid #ffffff24}
.security__list article:first-child{padding-top:0}
.security__list article>span{color:#acd2ff;font-size:13px;padding-top:5px}
.security__list h3{font-size:23px;margin-bottom:14px}
.security__list p{font-size:16px;line-height:1.8}
.contact{background:radial-gradient(ellipse at 55% 105%,#16397380,transparent 65%),#0c1320;border-top:1px solid #365b88}
.contact__heading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:28px}
.contact h2{font-size:clamp(35px,5vw,72px);line-height:1.17}
.contact__arrow{display:grid;place-items:center;width:100px;aspect-ratio:1;border:1px solid #6989b1;border-radius:50%;line-height:0;color:#c3e4ff;background:#182d482f;transition:background .25s,transform .25s;flex-shrink:0}
.contact__arrow svg{display:block;width:62%;height:62%}
.contact__arrow:hover{transform:rotate(5deg);background:#244b77}
.contact__layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;margin-top:52px;align-items:start}
.contact__details{min-width:0;border-top:1px solid #ffffff26;padding-top:28px}
.contact__details p{font-size:16px;line-height:1.8}
.contact__email{display:inline-block;color:#f0f6ff;font-size:clamp(16px,1.25vw,19px);margin-top:24px;text-decoration:underline;text-decoration-color:#84aada;text-underline-offset:7px;overflow-wrap:anywhere}
.contact__email:hover{text-decoration-color:#c9edff}
.copy-button{display:block;color:#c3dcff;background:transparent;border:0;padding:12px 0;font-size:14px;min-height:48px}
.copy-button>span{margin-left:12px}
.contact__status{display:block;font-size:14px;color:#b9e2ff;min-height:24px}
.contact__person{display:flex;flex-direction:column;gap:4px;margin-top:28px}
.contact__person strong{font-weight:650;font-size:16px}
.contact__person span:last-child{margin-top:14px;color:#bfd3ee}
.contact-form{padding:32px;border:1px solid #425a7b;border-radius:14px;background:#0d1728}
.contact-form h3{font-size:26px;line-height:1.3;margin-bottom:12px}
.contact-form__hint{font-size:14px;color:#c6d4e8;margin-bottom:26px}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;min-width:0}
.field label{font-size:15px;font-weight:600;line-height:1.55;color:#eff5ff}
.field__optional{font-size:12px;font-weight:400;color:#c1d1e6}
.field input,.field textarea{font:inherit;font-size:16px;line-height:1.6;min-width:0;width:100%;color:#f8fafc;background:#09111f;border:1px solid #667c9e;border-radius:7px;padding:12px 14px;min-height:50px;transition:border-color .18s,background .18s}
.field textarea{resize:vertical;min-height:150px}
.field input:hover,.field textarea:hover{border-color:#a6c7f1}
.field input:focus,.field textarea:focus{border-color:#b2dbff;outline:2px solid #74bbff;outline-offset:3px;background:#101e32}
.field input::placeholder,.field textarea::placeholder{color:#b5c6dd;opacity:1}
.field :user-invalid{border-color:#ffb4ab}
.contact-form__delivery{font-size:14px;line-height:1.65;margin:2px 0 22px}
.contact-form__status{font-size:14px;line-height:1.65;min-height:0;color:#c5e5ff}
.contact-form__status:not(:empty){margin-top:18px}
.contact-form button:disabled{cursor:wait;opacity:.75}
/* === FOOTER STUDIO SADAWEB === */
.footer {
  position: relative;
  background: #070a12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 72px;
  padding-bottom: 38px;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 960px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.3) 30%, rgba(37, 99, 235, 0.65) 50%, rgba(56, 189, 248, 0.3) 70%, transparent 100%);
}

.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 200px;
  background: radial-gradient(ellipse at top, rgba(37, 99, 235, 0.12), transparent 70%);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  z-index: 1;
}

.footer__top-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.2fr 1.7fr;
  gap: 48px;
  align-items: start;
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer .brand--footer {
  margin-bottom: 2px;
}

.footer .brand__name {
  font-size: 19px;
  letter-spacing: 0.035em;
  font-weight: 750;
}

.footer .brand__mark {
  transform: scale(.88);
  margin-right: -4px;
}

.footer__description {
  font-size: 13.5px;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 36ch;
  margin: 0;
}

.footer__availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 6px 13px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 550;
  color: #a7f3d0;
  margin-top: 4px;
  backdrop-filter: blur(8px);
}

.footer__status-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.85);
}

.footer__status-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.6);
  animation: swPulse 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes swPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.footer__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sw-cyan, #38bdf8);
  margin: 0 0 18px;
  line-height: 1.4;
}

.footer__link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__nav-link {
  color: #cbd5e1;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.18s ease, transform 0.18s ease;
}

.footer__nav-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.footer__contact-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.footer__contact-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

.footer__contact-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(56, 189, 248, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  font-size: 13px;
  color: #e0f2fe;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.footer__contact-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer__contact-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

.footer__contact-role {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.3;
}

.footer__contact-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 9px;
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 550;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer__contact-button:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(56, 189, 248, 0.55);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.footer__contact-button-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer__contact-button-arrow {
  font-size: 14px;
  color: #38bdf8;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.footer__contact-button:hover .footer__contact-button-arrow {
  transform: translate(2px, -2px);
}

.footer__contact-location {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #8899ac;
}

.footer__pin-icon {
  color: var(--sw-cyan, #38bdf8);
  flex-shrink: 0;
}

.footer__bottom-row {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #94a3b8;
  flex-wrap: wrap;
}

.footer__meta p {
  margin: 0;
}

.footer__meta-dot {
  color: rgba(255, 255, 255, 0.25);
}

.footer__tagline {
  color: #64748b;
  font-style: italic;
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.6);
  color: #d1deee;
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
  min-height: 38px;
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer__top:hover {
  border-color: rgba(56, 189, 248, 0.45);
  color: #ffffff;
  background: rgba(37, 99, 235, 0.16);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}

.footer__top-icon {
  display: grid;
  place-items: center;
  line-height: 0;
  color: #38bdf8;
  transition: transform 0.2s ease;
}

.footer__top:hover .footer__top-icon {
  transform: translateY(-2px);
}
[data-reveal]{transition:opacity .42s ease-out,transform .5s var(--sw-ease)}
[data-reveal].is-pending:not(:focus-within){opacity:0;transform:translateY(14px)}
[data-motion="static"] [data-reveal]{opacity:1;transform:none;transition:none}
[data-motion="static"] .journey__stage{position:relative;top:0}
@media(max-width:1100px){
.header__inner{height:80px}.nav{gap:18px}.nav__contact span{margin-left:8px}
.intro__inner { grid-template-columns: 1fr; gap: 36px; }
.intro__facts { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.section-heading{gap:36px}.section-heading>p{max-width:310px}
.service__hint{display:none}.service summary{grid-template-columns:38px minmax(0,1fr) 36px}.service__body{padding-left:56px;gap:36px}
.journey{gap:48px}.chapter h3{font-size:29px}
.collaboration__grid{gap:14px}.engagement{padding:28px 22px}.engagement h3{font-size:23px}
.contact__layout{gap:36px}.contact-form{padding:26px}.contact-form__row{grid-template-columns:1fr;gap:0}
.team__photo img{height:480px}.team__story{gap:44px}.security{gap:48px}
}
@media(max-width:900px){
.header__inner{height:74px;flex-wrap:wrap}.header__menu{display:flex;font-size:14px}
.header__inner:has(.header__menu[hidden]){height:auto;min-height:74px;padding-block:14px}
.header__inner:has(.header__menu:not([hidden])) .nav{display:none}
html[data-boot="pending"] .header__inner{height:74px;padding-block:0}
html[data-boot="pending"] .nav{display:none}
.nav{width:100%;flex-wrap:wrap;gap:8px 20px}
.header__inner:has(.header__menu[aria-expanded="true"]) .nav{display:flex;position:absolute;top:74px;left:0;right:0;background:#101a2b;padding:20px var(--sw-margin);box-shadow:0 15px 22px #0005;border-bottom:1px solid #496082;flex-direction:column;align-items:stretch}
.nav>a{font-size:15px;padding:12px}.nav .nav__contact{padding:12px}.nav__contact span{float:right}
.section-heading{display:block}.section-heading>p{max-width:58ch;margin-top:24px}
.collaboration__grid{grid-template-columns:1fr}.engagement{padding:30px}.engagement h3 br{display:none}.engagement h3{font-size:28px}.engagement__symbol{margin-bottom:24px}
.engagement>p:not(.eyebrow){max-width:65ch}
.contact__layout{grid-template-columns:1fr;gap:36px}.contact__details{max-width:600px}.contact-form__row{grid-template-columns:1fr 1fr;gap:20px}
.footer__top-row {
  grid-template-columns: 1.1fr 1fr;
  gap: 40px 36px;
  align-items: start;
}
.footer__col--brand { grid-column: 1; grid-row: 1; max-width: none; }
.footer__col--contact { grid-column: 2; grid-row: 1; }
.footer__col--nav { grid-column: 1; grid-row: 2; }
.footer__col--services { grid-column: 2; grid-row: 2; }
}
@media(max-width:700px){
html{scroll-padding-top:96px}.section{padding-block:38px}.brand__name{font-size:18px}.header__inner{gap:10px}.brand{gap:7px}
h2{font-size:clamp(30px,7.8vw,44px)}
.intro { margin-block: 22px; padding: 26px 20px; }
.intro__inner { grid-template-columns: 1fr; gap: 28px; }
.intro__facts { grid-template-columns: 1fr; gap: 14px; }
.fact-card { padding: 18px; }
.fact-card__value { font-size: 34px; }
.fact-card__value--text { font-size: 22px; }
.section-heading{margin-bottom:34px}.section-heading .eyebrow{margin-bottom:18px}.section-heading>p{font-size:16px}
.service summary{grid-template-columns:25px minmax(0,1fr) 32px;gap:9px;padding-block:24px}.service__title{font-size:21px}.service__toggle{width:30px;height:30px}
.service__body{display:block;padding:0 0 30px}.service__body p{font-size:16px}.service__deliverables{font-size:15px}
.software-art{margin:28px 4px 4px}.software-art__caption{font-size:11px}
.tech-line{display:block;padding-top:24px}.tech-line p{margin-top:10px;line-height:2}.tech-line i{margin-inline:5px}
.journey{display:flex;flex-direction:column;gap:16px}.journey__stage{position:relative;top:0;width:100%;height:260px;margin:0}
.chapter{padding-block:28px;max-width:none}.chapter h3{font-size:28px}.chapter__outcome{margin-top:20px}.journey__chapters{padding-bottom:0}
.partners { grid-template-columns: 1fr; gap: 32px; padding: 26px 20px; }
.partners__cards { grid-template-columns: 1fr; gap: 16px; }
.team__photo img{height:360px;object-position:48% center}.team__photo figcaption{left:20px;right:20px;bottom:20px;align-items:flex-start;flex-direction:column;gap:6px}
.team__photo figcaption>span:first-child{font-size:23px}.team__photo figcaption>span:last-child{font-size:12px}
.team__story{grid-template-columns:1fr;gap:28px;margin-top:36px}.team__story h3{font-size:28px}
.security{grid-template-columns:1fr;gap:36px}.security h2{font-size:clamp(29px,7.8vw,43px)}.security__intro{font-size:16px}.security__list article{gap:18px}
.contact__heading{gap:18px;align-items:flex-start}.contact h2{font-size:clamp(30px,7.7vw,44px)}.contact__arrow{width:48px;margin-top:4px}
.contact__layout{margin-top:32px}.contact__details{padding-top:26px}.contact__details br{display:none}.contact__email{font-size:16px}
.contact-form{padding:24px 20px}.contact-form h3{font-size:24px}.contact-form__row{grid-template-columns:1fr;gap:0}.contact-form .button{width:100%}
.contact__person span:last-child{margin-top:8px}
.footer { padding-top: 48px; padding-bottom: 28px; }
.footer__top-row {
  grid-template-columns: 1fr;
  gap: 32px;
}
.footer__col--brand { grid-column: auto; grid-row: auto; }
.footer__col--contact { grid-column: auto; grid-row: auto; }
.footer__col--nav { grid-column: auto; grid-row: auto; }
.footer__col--services { grid-column: auto; grid-row: auto; }
.footer__bottom-row { margin-top: 36px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__top { width: 100%; justify-content: center; }
}
@media(max-width:360px){
.service__title{font-size:19px}.eyebrow{letter-spacing:.055em}.contact__heading{gap:10px}.contact h2{font-size:28px}.engagement{padding:24px}.header .brand__name{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
[data-reveal].is-pending{opacity:1;transform:none}.journey__stage{position:relative;top:0}.software-art{transform:none}
}


@media (max-width: 1050px) and (min-width: 701px) {
  .partners { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 500px) {
  .partner-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .partner-card__brand {
    width: 100%;
  }
  .partner-card__chip {
    align-self: flex-start;
  }
}


/* ==========================================================================
   SADAWEB GLOBAL STITCH ELEVATION - TASTE DESIGN & COMPONENT HARMONIZATION
   Preserving Nocturne Cobalt Identity, Elevating Craft & Visual Hierarchy
   ========================================================================== */

/* --- 1. HEADER GLASS & NAVIGATION ENHANCEMENT --- */
.header {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(5, 9, 18, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.header__nav a {
  position: relative;
  transition: color 0.2s ease;
}
.header__nav a:hover {
  color: #f8fafc !important;
}
.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #5eead4);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.header__nav a:hover::after {
  width: 100%;
}
.header .brand:hover .brand__logo {
  filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.5));
}

/* --- 2. SECTION 01: TECH LINE PILL BAR --- */
.tech-line {
  margin-top: 24px;
  padding: 14px 22px;
  background: linear-gradient(90deg, rgba(14, 22, 42, 0.75) 0%, rgba(9, 15, 30, 0.85) 100%);
  border: 1px solid rgba(75, 140, 255, 0.18);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.tech-line__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7ea5ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tech-line__dot {
  color: #5eead4;
  font-size: 11px;
}
.tech-line__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tech-line__chip {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-line__chip:hover {
  background: rgba(75, 140, 255, 0.12);
  border-color: rgba(94, 234, 212, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.service {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.65), rgba(8, 13, 26, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: border-color .45s ease, box-shadow .5s ease;
  margin-bottom: 16px;
}
.service::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 0 0, #2563eb18, transparent 65%);
  opacity: 0;
  transition: opacity .6s ease;
}
.service::after {
  content: '';
  position: absolute;
  inset: 0 28px auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, #60a5fa00, #93c5fd, #38bdf855, #38bdf800);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.service:hover, .service:focus-within {
  border-color: rgba(75, 140, 255, 0.3);
}
.service[open]:not([data-expanded="false"]) {
  border-color: rgba(75, 140, 255, 0.45);
  box-shadow: 0 18px 44px -20px #2563eb35, inset 2px 0 0 #7bc9ff;
}
.service[open]:not([data-expanded="false"])::before,
.service[open]:not([data-expanded="false"])::after {
  opacity: 1;
  transform: scaleX(1);
}
.service[open]:not([data-expanded="false"]) .service__number {
  color: #a3d6ff;
}
.service summary {
  padding: 24px 28px;
  grid-template-columns: 44px minmax(0, 1fr) 225px 38px;
}
.service summary:focus-visible {
  outline-offset: -6px;
  border-radius: 17px;
}
.service__body {
  padding: 0 28px 36px 88px;
}
.service__toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #93c5fd;
  font-size: 0;
  transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .5s ease;
}
.service__toggle::before, .service__toggle::after {
  content: '';
  position: absolute;
  inset: calc(50% - 1px) auto auto calc(50% - 6px);
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.service__toggle::after { transform: rotate(90deg); }
.service:hover .service__toggle { border-color: #7bc9ff66; }
.service[open]:not([data-expanded="false"]) .service__toggle {
  background: #38bdf818;
  border-color: #7bc9ff88;
  color: #c4e7ff;
  box-shadow: 0 0 24px #38bdf81a;
}
.service[open]:not([data-expanded="false"]) .service__toggle::after {
  transform: rotate(180deg);
  opacity: 0;
}
.service[data-expanded] .service__body :is(p, .service__deliverables li, .tags span, .software-art) {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .18s ease, translate .26s ease;
}
.service[data-expanded="true"] .service__body :is(p, .service__deliverables li, .tags span, .software-art) {
  opacity: 1;
  translate: 0 0;
  transition-duration: .42s, .6s;
  transition-timing-function: ease, cubic-bezier(.22,1,.36,1);
  transition-delay: var(--service-delay, 70ms);
}
.service__deliverables li:nth-child(1) { --service-delay: 110ms; }
.service__deliverables li:nth-child(2) { --service-delay: 150ms; }
.service__deliverables li:nth-child(3) { --service-delay: 190ms; }
.service .tags span:nth-child(1) { --service-delay: 180ms; }
.service .tags span:nth-child(2) { --service-delay: 210ms; }
.service .tags span:nth-child(3) { --service-delay: 240ms; }
.service .tags span:nth-child(4) { --service-delay: 270ms; }
.service .software-art { --service-delay: 140ms; }
.service.service--reduced, .service.service--reduced *,
.service.service--reduced::before, .service.service--reduced::after,
.service.service--reduced *::before, .service.service--reduced *::after { transition: none !important; }
@media (max-width: 1100px) {
  .service summary { grid-template-columns: 38px minmax(0,1fr) 38px; }
  .service__body { padding-left: 82px; gap: 30px; }
}
@media (max-width: 700px) {
  .service summary { grid-template-columns: 22px minmax(0,1fr) 34px; gap: 10px; padding: 22px 18px; }
  .service__toggle { width: 34px; height: 34px; }
  .service__body { padding: 0 20px 28px; }
  .service__body p { line-height: 1.85; }
  .service::after { inset-inline: 18px; }
}

/* --- 3. SECTION 02: NOTRE APPROCHE (CHAPTERS) --- */
.journey__chapters {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.chapter {
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.65) 0%, rgba(8, 13, 26, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.chapter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(75, 140, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.chapter:hover {
  border-color: rgba(94, 234, 212, 0.32);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -12px rgba(94, 234, 212, 0.12);
}
.chapter:hover::before {
  opacity: 1;
}
.chapter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.chapter__index {
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(135deg, #7ea5ff, #5eead4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.chapter__step-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5eead4;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.22);
  padding: 4px 12px;
  border-radius: 999px;
}
.chapter h3 {
  font-size: 22px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 12px;
  line-height: 1.35;
}
.chapter p {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.65;
  margin-bottom: 24px;
}
.chapter__outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: #93c5fd;
}
.chapter__outcome-icon {
  color: #5eead4;
  font-size: 12px;
  flex-shrink: 0;
}

/* --- 4. SECTION 03: COLLABORATION (ENGAGEMENT CARDS) --- */
.collaboration__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.engagement {
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.65) 0%, rgba(8, 13, 26, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.engagement:hover {
  border-color: rgba(126, 165, 255, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.65);
}
.engagement--featured {
  border-color: rgba(94, 234, 212, 0.35) !important;
  background: linear-gradient(180deg, rgba(17, 30, 58, 0.85) 0%, rgba(9, 18, 38, 0.95) 100%) !important;
  box-shadow: 0 16px 40px -10px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(94, 234, 212, 0.25) !important;
}
.engagement--featured:hover {
  border-color: rgba(94, 234, 212, 0.55) !important;
  box-shadow: 0 24px 54px -12px rgba(6, 182, 212, 0.25), inset 0 1px 0 rgba(94, 234, 212, 0.4) !important;
}
.engagement__featured-ribbon {
  position: absolute;
  top: -11px;
  right: 24px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.4);
}
.engagement__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.engagement__badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75, 140, 255, 0.1);
  border: 1px solid rgba(75, 140, 255, 0.22);
  color: #7ea5ff;
}
.engagement__badge-icon--featured {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.32);
  color: #5eead4;
}
.engagement__category {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}
.engagement h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #f8fafc;
  margin-bottom: 14px;
}
.engagement p {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.6;
  margin-bottom: 28px;
  flex-grow: 1;
}
.engagement__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
}
.engagement__pill {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

/* --- 5. SECTION 04: L'ÉQUIPE (TEAM VALUES & VISUAL FRAME) --- */
.team__values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.team__value-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(14, 23, 44, 0.7);
  border: 1px solid rgba(75, 140, 255, 0.22);
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.team__value-chip:hover {
  background: rgba(75, 140, 255, 0.16);
  border-color: rgba(94, 234, 212, 0.45);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(75, 140, 255, 0.3);
}
.team__value-dot {
  color: #5eead4;
  font-size: 11px;
}
.team__figure {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

/* --- 6. SECTION 05: SÉCURITÉ & CONFIANCE (FLUID HORIZONTAL ARCHITECTURE) --- */
.security {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  gap: 60px !important;
  align-items: start !important;
}
@media (max-width: 992px) {
  .security {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }
  .security__header {
    position: static !important;
  }
}
.security__header {
  position: sticky;
  top: 110px;
}
.security .eyebrow {
  margin-bottom: 20px;
}
.security h2 {
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.12;
}
.security__intro {
  font-size: 16.5px;
  margin-top: 24px;
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.75;
  max-width: 440px;
}
.security__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.security__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(75, 140, 255, 0.22);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.security__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 6px #5eead4;
}

.security__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin-top: 0 !important;
}
.security-card {
  background: linear-gradient(135deg, rgba(14, 23, 44, 0.72) 0%, rgba(8, 14, 28, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 28px 30px !important;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.security-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6, #5eead4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.security-card:hover {
  border-color: rgba(94, 234, 212, 0.35) !important;
  transform: translateY(-3px) translateX(3px) !important;
  box-shadow: 0 20px 44px -12px rgba(37, 99, 235, 0.22) !important;
}
.security-card:hover::before {
  opacity: 1;
}

.security-card__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.security-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(94, 234, 212, 0.09);
  border: 1px solid rgba(94, 234, 212, 0.24);
  color: #5eead4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.12);
  transition: all 0.25s ease;
}
.security-card:hover .security-card__icon {
  background: rgba(94, 234, 212, 0.18);
  border-color: rgba(94, 234, 212, 0.45);
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.35);
}
.security-card__number {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.5);
  letter-spacing: 0.05em;
}

.security-card__content {
  flex: 1;
  min-width: 0;
}
.security-card__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.security-card h3 {
  font-size: 21px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.01em;
}
.security-card p {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.7;
  margin: 0;
}
.security-card__guarantee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5eead4;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.2);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.security-card__check {
  font-weight: 800;
  font-size: 12px;
}

/* --- 7. SECTION 06: CONTACT (FOUNDER CARD & FORM ELEVATION) --- */
.contact__card {
  background: linear-gradient(180deg, rgba(14, 23, 44, 0.75) 0%, rgba(8, 13, 26, 0.9) 100%);
  border: 1px solid rgba(75, 140, 255, 0.22);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}
.contact__person-box {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
  flex-shrink: 0;
}
.contact__person-name {
  display: block;
  font-size: 17px;
  color: #f8fafc;
  font-weight: 700;
}
.contact__person-role {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  margin-top: 2px;
}
.contact__person-city {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #5eead4;
  margin-top: 4px;
}
.contact__email-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__email {
  font-size: 15px;
  color: #93c5fd;
  text-decoration: none;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.2s ease;
}
@media (max-width: 480px) {
  .contact__card {
    padding: 20px 16px !important;
  }
  .contact__email {
    font-size: 13.5px !important;
    letter-spacing: -0.01em;
  }
}
.contact__email:hover {
  color: #5eead4;
}
.contact__card .copy-button {
  align-self: flex-start;
  background: rgba(75, 140, 255, 0.1);
  border: 1px solid rgba(75, 140, 255, 0.25);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.contact__card .copy-button:hover {
  background: rgba(75, 140, 255, 0.2);
  border-color: rgba(94, 234, 212, 0.4);
  color: #fff;
}
.contact__reassurance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}
.contact__reassurance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  display: inline-block;
  flex-shrink: 0;
}

/* Contact Form Input Glow & Polish */
.contact-form {
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.7) 0%, rgba(8, 13, 26, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6) !important;
}
.field input, .field select, .field textarea {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #f8fafc !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(94, 234, 212, 0.5) !important;
  background: rgba(14, 23, 44, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12) !important;
  outline: none !important;
}

/* --- 8. RESPONSIVE BREAKPOINTS (TABLET & MOBILE) --- */
@media (max-width: 1024px) {
  .collaboration__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .security__list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .tech-line {
    border-radius: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }
  .chapter {
    padding: 24px 20px;
  }
  .engagement {
    padding: 28px 22px;
  }
  .security-card {
    padding: 24px 20px !important;
  }
  .contact-form {
    padding: 26px 20px !important;
  }
}

@media (max-width: 380px) {
  .security-card { flex-direction: column !important; }
  .security-card__aside { flex-direction: row; }
  .security-card__guarantee { max-width: 100%; white-space: normal; }
}