/* =========================================================
   SAYAMA CUSTOM — CSS PREMIUM MAX
   Objectif : attirer les entreprises, valoriser le devis,
   renforcer la confiance et garder une identité bleu/violet.
   ========================================================= */

:root{
  --bg:#020617;
  --bg-soft:#06112f;
  --navy:#071b45;
  --blue:#2563eb;
  --blue-2:#0ea5e9;
  --cyan:#38bdf8;
  --purple:#7c3aed;
  --violet:#5b21b6;
  --indigo:#312e81;

  --text:#ffffff;
  --text-soft:rgba(255,255,255,.82);
  --muted:rgba(255,255,255,.66);
  --muted-2:rgba(255,255,255,.48);

  --glass:rgba(255,255,255,.085);
  --glass-strong:rgba(255,255,255,.13);
  --stroke:rgba(255,255,255,.16);
  --stroke-blue:rgba(56,189,248,.38);
  --stroke-purple:rgba(124,58,237,.42);

  --shadow:0 28px 80px rgba(0,0,0,.48);
  --shadow-blue:0 22px 65px rgba(37,99,235,.34);
  --shadow-purple:0 22px 65px rgba(124,58,237,.30);

  --radius:20px;
  --radius-lg:32px;
  --radius-xl:42px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  font-family:"Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(56,189,248,.24), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(124,58,237,.34), transparent 32%),
    radial-gradient(circle at 50% 48%, rgba(37,99,235,.20), transparent 42%),
    linear-gradient(180deg, #020617 0%, #06112f 32%, #0b1d52 62%, #180b45 100%);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg, black, transparent 86%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(120deg, transparent 0%, rgba(56,189,248,.07) 35%, transparent 70%);
  animation:pageGlow 9s ease-in-out infinite alternate;
}

@keyframes pageGlow{
  from{ opacity:.25; transform:translateX(-3%); }
  to{ opacity:.72; transform:translateX(3%); }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
  position:relative;
  z-index:2;
}

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

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:0%;
  height:4px;
  z-index:9999;
  background:linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow:0 0 22px rgba(56,189,248,.9);
}

.header{
  position:sticky;
  top:0;
  z-index:900;
  background:rgba(2,6,23,.70);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 45px rgba(0,0,0,.26);
}

.header__inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  font-weight:1000;
}

.brand__logo,
.footer__logo{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:17px;
  padding:6px;
  background:linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.045));
  border:1px solid rgba(56,189,248,.26);
  box-shadow:0 12px 35px rgba(37,99,235,.22);
}

.brand__name{
  font-size:20px;
  letter-spacing:.9px;
  background:linear-gradient(90deg, #fff, #bfeeff, #c4b5fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.nav a{
  position:relative;
  padding:11px 15px;
  border-radius:999px;
  color:var(--text-soft);
  font-weight:900;
  font-size:14px;
  transition:.25s ease;
}

.nav a:hover,
.nav a.is-active{
  color:white;
  background:rgba(56,189,248,.12);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.20);
}

.nav a::after{ display:none; }

.nav__cta{
  color:white !important;
  background:linear-gradient(135deg, var(--blue), var(--purple)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 12px 34px rgba(37,99,235,.32);
}

.burger{
  display:none;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  border-radius:16px;
  cursor:pointer;
}

.burger span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  border-radius:10px;
  background:white;
}

.mobile-nav{
  display:none;
  padding:10px 20px 20px;
  background:rgba(2,6,23,.92);
  border-top:1px solid rgba(255,255,255,.10);
}

.mobile-nav a{
  display:block;
  padding:13px 10px;
  color:var(--text-soft);
  font-weight:900;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* =========================================================
   HERO BUSINESS
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 78px);
  display:flex;
  align-items:center;
  padding:98px 0 86px;
  background:
    radial-gradient(circle at 78% 44%, rgba(124,58,237,.46), transparent 33%),
    radial-gradient(circle at 15% 20%, rgba(56,189,248,.32), transparent 28%),
    linear-gradient(135deg, rgba(2,6,23,.92), rgba(7,27,69,.82) 48%, rgba(36,17,96,.90));
}

.hero::before{
  content:"";
  position:absolute;
  inset:34px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:44px;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-190px;
  top:70px;
  border-radius:50%;
  background:conic-gradient(from 180deg, rgba(56,189,248,.0), rgba(56,189,248,.48), rgba(124,58,237,.52), rgba(56,189,248,0));
  filter:blur(10px);
  opacity:.58;
  animation:spinGlow 16s linear infinite;
}

@keyframes spinGlow{
  to{ transform:rotate(360deg); }
}

.hero__inner{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:56px;
  align-items:center;
}

.hero__left,
.hero__right{ position:relative; z-index:3; }

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 17px;
  border-radius:999px;
  color:#eaf8ff;
  font-weight:1000;
  letter-spacing:.2px;
  background:linear-gradient(90deg, rgba(14,165,233,.22), rgba(124,58,237,.22));
  border:1px solid rgba(56,189,248,.38);
  box-shadow:0 16px 45px rgba(37,99,235,.22);
}

.hero__badge::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--purple));
  color:white;
  font-size:13px;
}

.hero__title{
  margin:22px 0 18px;
  max-width:850px;
  font-size:clamp(42px, 6vw, 82px);
  line-height:.96;
  letter-spacing:-2.8px;
  font-weight:1000;
  background:linear-gradient(92deg, #fff 0%, #dff7ff 35%, #7dd3fc 62%, #c4b5fd 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}

.hero__subtitle{
  margin:0 0 30px;
  max-width:62ch;
  color:var(--text-soft);
  font-size:19px;
  line-height:1.75;
  font-weight:650;
}

.hero__subtitle strong,
.important,
.highlight{
  position:relative;
  color:#dff7ff;
  font-weight:1000;
  white-space:nowrap;
}

.hero__subtitle strong::after,
.important::after,
.highlight::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.28), rgba(124,58,237,.30));
  z-index:-1;
}

.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:28px;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:14px 21px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  color:white;
  font-weight:1000;
  cursor:pointer;
  overflow:hidden;
  background:rgba(255,255,255,.075);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.24) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}

.btn:hover::before{ transform:translateX(120%); }

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(37,99,235,.34);
  border-color:rgba(56,189,248,.42);
}

.btn--primary,
.btn:not(.btn--ghost){
  background:linear-gradient(135deg, var(--blue), var(--blue-2) 45%, var(--purple));
  border-color:rgba(255,255,255,.24);
  box-shadow:var(--shadow-blue);
}

.btn--primary::after{
  content:"→";
  font-weight:1000;
  font-size:18px;
}

.btn--ghost{
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
}

#downloadQuotePdf::after{ content:"PDF"; font-size:12px; opacity:.8; }
a[href*="wa.me"]{ border-color:rgba(56,189,248,.32); }
a[href*="wa.me"]::after{ content:"↗"; font-weight:1000; }

.hero__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:13px;
}

.stat{
  position:relative;
  overflow:hidden;
  padding:17px 16px;
  border-radius:22px;
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.26);
}

.stat::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--cyan), var(--purple));
}

.stat__value{
  font-size:24px;
  font-weight:1000;
  color:#dff7ff;
}

.stat__label{
  margin-top:2px;
  color:var(--muted);
  font-size:12.5px;
  font-weight:850;
}

/* =========================================================
   HERO IMAGE + TAGS
   ========================================================= */

.hero__visual{
  position:relative;
  min-height:570px;
  z-index:3;
}

.hero__shape{
  position:absolute;
  inset:58px 12px 26px 22px;
  border-radius:38% 62% 55% 45% / 45% 38% 62% 55%;
  background:
    linear-gradient(135deg, rgba(56,189,248,.24), rgba(124,58,237,.18)),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 44px 100px rgba(0,0,0,.46), 0 0 80px rgba(56,189,248,.20);
  backdrop-filter:blur(12px);
  animation:blobMove 10s ease-in-out infinite;
}

.hero__mainImg{
  position:absolute;
  right:-20px;
  top:48px;
  width:min(760px, 105%);
  height:500px;
  object-fit:cover;
  border-radius:38% 62% 55% 45% / 45% 38% 62% 55%;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 42px 105px rgba(0,0,0,.58), 0 0 0 10px rgba(255,255,255,.035);
  filter:saturate(1.12) contrast(1.05);
}

.hero__tag{
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 20px;
  border-radius:20px;
  color:white;
  font-weight:1000;
  background:linear-gradient(135deg, rgba(14,165,233,.92), rgba(37,99,235,.86), rgba(124,58,237,.90));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 20px 50px rgba(0,0,0,.34), 0 0 32px rgba(56,189,248,.20);
  backdrop-filter:blur(14px);
}

.hero__tag::before{
  content:"✓";
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
}

.hero__tag--top{ top:82px; left:18px; }
.hero__tag--right{ top:232px; right:4px; }
.hero__tag--bottom{ bottom:102px; left:260px; }

.hero__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.mini{
  position:relative;
  overflow:hidden;
  padding:17px;
  border-radius:22px;
  border:1px solid rgba(56,189,248,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  transition:.25s ease;
}

.mini::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg, var(--cyan), var(--purple));
  opacity:.8;
}

.mini:hover{
  transform:translateY(-5px);
  border-color:rgba(56,189,248,.45);
  box-shadow:0 24px 60px rgba(37,99,235,.25);
}

.mini__k{
  color:#bfeeff;
  font-weight:1000;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.mini__v{
  margin-top:5px;
  color:white;
  font-weight:850;
}

.hero__cardBottom{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.pill,
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  color:#eaf8ff;
  font-size:13px;
  font-weight:950;
  border:1px solid rgba(56,189,248,.24);
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(124,58,237,.12));
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.pill::before{
  content:"•";
  color:var(--cyan);
  font-size:18px;
  line-height:0;
}

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

.section{
  position:relative;
  overflow:hidden;
  padding:82px 0;
}

.section--alt{
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.section__head{
  margin-bottom:30px;
  text-align:left;
}

.section__title{
  position:relative;
  display:inline-block;
  margin:0 0 12px;
  font-size:clamp(30px, 3.3vw, 46px);
  line-height:1.04;
  letter-spacing:-1px;
  font-weight:1000;
  background:linear-gradient(90deg, #fff, #9be8ff, #c4b5fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.section__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:92px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow:0 0 22px rgba(56,189,248,.55);
}

.section__desc{
  max-width:760px;
  color:var(--text-soft);
  line-height:1.7;
  font-weight:650;
}

/* =========================================================
   CARTES / TRUST / PARTENAIRES / SOCIALS
   ========================================================= */

.card,
.review-card__inner,
.form,
.about__card,
.faq__item,
.partner-card,
.trustItem,
.sideCard,
.formBlock,
.itemCard,
.social-card,
.article-card,
.trust{
  position:relative;
  z-index:2;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}

.card:hover,
.partner-card:hover,
.trustItem:hover,
.social-card:hover,
.formBlock:hover,
.article-card:hover,
.sideCard:hover{
  border-color:rgba(56,189,248,.42);
  box-shadow:0 28px 80px rgba(37,99,235,.28);
}

.partners-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  z-index:2;
}

.partners-viewport{ overflow:hidden; width:100%; }
.partners-track{ display:flex; gap:20px; transition:transform .5s ease; }

.partner-card{
  flex:0 0 auto;
  width:220px;
  height:130px;
  border-radius:26px;
  overflow:hidden;
  transition:.28s ease;
}

.partner-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.04);
  transition:.28s ease;
}

.partner-card:hover{ transform:translateY(-7px) scale(1.02); }
.partner-card:hover img{ transform:scale(1.06); }

.carousel-btn,
.icon-btn{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(56,189,248,.28);
  background:linear-gradient(135deg, rgba(37,99,235,.70), rgba(124,58,237,.62));
  color:white;
  font-size:28px;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(37,99,235,.25);
  transition:.25s ease;
}

.carousel-btn:hover,
.icon-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 24px 60px rgba(124,58,237,.34);
}

.trust{
  overflow:hidden !important;
  cursor:grab;
  touch-action:none;
  border-radius:var(--radius-lg);
}

.trust:active{ cursor:grabbing; }

.trust__track{
  display:flex;
  gap:20px;
  padding:20px;
  width:max-content;
  will-change:transform;
  user-select:none;
}

.trustItem{
  flex:0 0 auto;
  width:260px;
  height:175px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-radius:24px;
  overflow:hidden;
  transition:.25s ease;
}

.trustItem img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:none !important;
  opacity:1 !important;
}

.socials{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:22px;
  margin-top:34px;
}

.social-card{
  height:130px;
  border-radius:28px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.28s ease;
}

.social-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.28s ease;
}

.social-card:hover{
  transform:translateY(-7px);
}

.social-card:hover img{ transform:scale(1.07); }

/* =========================================================
   FORMULAIRE DEVIS — ZONE LA PLUS IMPORTANTE
   ========================================================= */

.contact{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(290px, .65fr);
  gap:30px;
  align-items:start;
}

.contact .form,
.contact .contact__side{
  width:100%;
}

.form{
  border-radius:var(--radius-xl);
  padding:24px;
  border-color:rgba(56,189,248,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
    radial-gradient(circle at top right, rgba(56,189,248,.14), transparent 38%);
}

.form::before{
  content:"Demande de devis rapide";
  display:inline-flex;
  margin-bottom:18px;
  padding:10px 14px;
  border-radius:999px;
  color:#eaf8ff;
  font-size:13px;
  font-weight:1000;
  background:linear-gradient(90deg, rgba(56,189,248,.20), rgba(124,58,237,.20));
  border:1px solid rgba(56,189,248,.30);
}

.formBlock{
  border-radius:26px;
  padding:18px;
  margin-bottom:16px;
  border-color:rgba(255,255,255,.13);
}

.formBlock__title,
.itemCard__title,
.sideCard__title{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:#eaf8ff;
  font-size:17px;
  font-weight:1000;
}

.formBlock__title::before,
.sideCard__title::before{
  content:"";
  width:10px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--cyan), var(--purple));
  box-shadow:0 0 18px rgba(56,189,248,.48);
}

.formBlock__titleRow{
  justify-content:space-between;
  flex-wrap:wrap;
}

.formBlock__actions,
.form__actions,
.sideCard__row{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}

.field label,
.sizes label{
  display:block;
  margin-bottom:8px;
  color:#cdefff;
  font-size:13px;
  font-weight:950;
}

.field input,
.field textarea,
.field select,
.sizes-grid input,
.sizes__cell input{
  width:100%;
  min-height:48px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.15);
  outline:none;
  color:white;
  font-weight:800;
  background:rgba(2,6,23,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.22s ease;
}

.field textarea{
  resize:vertical;
  min-height:135px;
}

.field input::placeholder,
.field textarea::placeholder,
.sizes-grid input::placeholder{
  color:rgba(255,255,255,.44);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.sizes-grid input:focus,
.sizes__cell input:focus{
  border-color:rgba(56,189,248,.72);
  background:rgba(2,6,23,.48);
  box-shadow:0 0 0 4px rgba(56,189,248,.14), 0 18px 42px rgba(37,99,235,.16);
}

select{
  appearance:none;
  background-color:rgba(8,18,52,.92) !important;
}

select option{
  color:white;
  background:#071b45;
}

.hint,
.rgpd{
  display:block;
  margin-top:6px;
  color:var(--muted-2);
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.error{
  display:block;
  margin-top:6px;
  min-height:16px;
  color:#fda4af;
  font-size:12px;
  font-weight:900;
}

.itemsWrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.article-card,
.itemCard{
  border-radius:26px;
  padding:18px;
  margin-bottom:12px;
  border-color:rgba(56,189,248,.18);
}

.article-head,
.itemCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.article-head h4{
  color:#eaf8ff;
  font-size:17px;
  font-weight:1000;
}

.btn-delete,
.itemRemove{
  border:1px solid rgba(129,140,248,.34);
  background:rgba(124,58,237,.14);
  color:#e0e7ff;
  padding:10px 13px;
  border-radius:999px;
  font-weight:1000;
  cursor:pointer;
  transition:.22s ease;
}

.btn-delete:hover,
.itemRemove:hover{
  transform:translateY(-2px);
  background:rgba(124,58,237,.24);
  border-color:rgba(56,189,248,.45);
}

.sizes{
  margin:4px 0 14px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.14);
}

.sizes-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
  margin-top:8px;
}

.form__actions{
  margin-top:18px;
}

.form__status{
  margin-top:14px;
  color:#cdefff;
  font-weight:950;
}

.sideCard{
  position:sticky;
  top:100px;
  border-radius:var(--radius-xl);
  padding:24px;
  border-color:rgba(124,58,237,.28);
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.20), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
}

.sideCard__title{
  font-size:24px;
  margin-bottom:12px;
}

.sideCard__text{
  color:var(--text-soft);
  font-weight:850;
  line-height:1.65;
}

.sideCard__hint{
  margin-top:18px;
  padding:15px;
  border-radius:20px;
  color:#eaf8ff;
  line-height:1.65;
  font-weight:850;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.22);
}

/* =========================================================
   AVIS GOOGLE / ELFSIGHT
   ========================================================= */

#reviews .reviews,
#reviews .reviews__viewport,
#reviews [class*="elfsight"],
#reviews [class*="eapps"],
#reviews iframe{
  width:100% !important;
  max-width:100% !important;
}

#reviews .reviews__viewport{
  overflow:visible !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

#reviews .reviews__track{
  display:block !important;
  transform:none !important;
}

#reviews .review-card,
#reviews .reviewCard{
  min-width:0 !important;
  width:100% !important;
  padding:0 !important;
}

.review-card__stars,
.reviewStars{ color:#93c5fd; }

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.12);
  padding:24px 0 30px;
  background:rgba(2,6,23,.50);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.footer__left{
  display:flex;
  align-items:center;
  gap:13px;
}

.footer__name{
  font-weight:1000;
  letter-spacing:.7px;
}

.footer__small,
.footer__right a{
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}

.footer__right a:hover{ color:white; }

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes blobMove{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-20px) rotate(3deg); }
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease, transform .65s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

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

@media(max-width:1080px){
  .hero__inner,
  .contact{
    grid-template-columns:1fr;
  }

  .hero__visual{
    min-height:460px;
  }

  .hero__mainImg{
    right:0;
    width:100%;
    height:410px;
  }

  .sideCard{
    position:relative;
    top:auto;
  }
}

@media(max-width:820px){
  .nav{ display:none; }
  .burger{ display:block; }
  .mobile-nav.is-open{ display:block; }

  .header__inner{ min-height:70px; }

  .hero{
    min-height:auto;
    padding:76px 0 62px;
  }

  .hero::before{ inset:18px; border-radius:30px; }

  .hero__title{
    font-size:clamp(39px, 11vw, 56px);
    letter-spacing:-1.7px;
  }

  .hero__subtitle{
    font-size:16px;
  }

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

  .hero__visual{
    min-height:345px;
  }

  .hero__mainImg{
    height:305px;
    border-radius:34px;
  }

  .hero__shape{
    inset:34px 4px 14px;
    border-radius:34px;
  }

  .hero__tag{
    padding:10px 12px;
    font-size:12px;
    border-radius:15px;
  }

  .hero__tag--top{ top:35px; left:10px; }
  .hero__tag--right{ top:145px; right:8px; }
  .hero__tag--bottom{ bottom:30px; left:18px; }

  .hero__grid,
  .grid2{
    grid-template-columns:1fr;
  }

  .section{
    padding:62px 0;
  }

  .section__title::after{
    width:70px;
  }

  .form{
    padding:18px;
    border-radius:30px;
  }

  .formBlock,
  .article-card,
  .sideCard{
    border-radius:24px;
    padding:16px;
  }

  .sizes-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .social-card{ height:110px; }
  .partner-card{ width:170px; height:105px; }
  .trustItem{ width:220px; height:150px; }
}

@media(max-width:500px){
  .container{
    width:min(1200px, calc(100% - 26px));
  }

  .hero__actions,
  .form__actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .sizes-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .brand__name{ font-size:18px; }
  .brand__logo{ width:46px; height:46px; }
}