/* ============================= */
/* RESET */
/* ============================= */

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

html,
body{
  height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#f5f3ff;
  color:#1e1b4b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:92%;
  max-width:1140px;
  margin:0 auto;
}

/* Offset pour header sticky (72px + marge confort) */
#solutions,
#modalbox{
  scroll-margin-top:90px;
}

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

.topnav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(124,58,237,.14);
  box-shadow:0 6px 22px rgba(124,58,237,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.topnav-inner{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
  padding:0 24px;
}

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

.brand{
  display:flex;
  align-items:center;
  height:72px;
  flex:0 0 auto;
}

.logo{
  max-height:66px;
  max-width:160px;
  width:auto;
  object-fit:contain;
  display:block;
  transition:transform .2s ease;
  transform-origin:left center;
}

.logo:hover{
  transform:scale(1.04);
}

/* ============================= */
/* BURGER */
/* ============================= */

.burger{
  display:none;
  border:none;
  outline:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  flex:0 0 auto;
}

.burger span{
  display:block;
  width:24px;
  height:2px;
  border-radius:999px;
  background:#4c1d95;
  transition:transform .2s ease, opacity .2s ease;
}

.burger span + span{
  margin-top:5px;
}

/* ============================= */
/* NAV LINKS */
/* ============================= */

.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
}

.navlink{
  padding:10px 14px;
  border-radius:999px;
  font-weight:650;
  font-size:14px;
  color:rgba(30,27,75,.72);
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.navlink:hover{
  background:rgba(124,58,237,.10);
  color:#4c1d95;
}

.navlink.active{
  background:rgba(124,58,237,.14);
  color:#4c1d95;
}

.navlink.cta{
  background:#7c3aed;
  color:#fff;
  box-shadow:0 10px 22px rgba(124,58,237,.22);
}

.navlink.cta:hover{
  background:#6d28d9;
  transform:translateY(-1px);
}

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

.site-footer{
  margin-top:80px;
  background:#0f172a;
  color:#cbd5e1;
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#7c3aed,#4f46e5);
}

.footer-container{
  width:92%;
  max-width:1140px;
  margin:0 auto;
  padding:64px 0 42px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:42px;
  position:relative;
  z-index:1;
}

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

.footer-logo{
  display:inline-flex;
  align-items:center;
}

.footer-logo img{
  height:66px;
  max-width:160px;
  width:auto;
  object-fit:contain;
  display:block;
  margin-bottom:15px;
  transition:transform .2s ease;
  transform-origin:left center;
}

.footer-logo img:hover{
  transform:scale(1.04);
}

.footer-brand h3{
  font-size:28px;
  font-weight:800;
  line-height:1;
  color:#ffffff;
  letter-spacing:-0.02em;
}

.footer-brand h3 span{
  color:#7c3aed;
}

.footer-brand p{
  margin-top:16px;
  font-size:14px;
  line-height:1.8;
  color:#94a3b8;
  max-width:320px;
}

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

.footer-socials{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-socials a{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#1e293b;
  border:1px solid rgba(255,255,255,.08);
  color:#ffffff;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.footer-socials i{
  font-size:18px;
  color:#ffffff !important;
  line-height:1;
}

.footer-socials a:hover{
  transform:translateY(-2px);
}

/* Discord */
.footer-socials a[aria-label="Discord"]:hover{
  background:#5865f2;
  border-color:#5865f2;
  box-shadow:0 14px 28px rgba(88,101,242,.28);
}

/* Instagram */
.footer-socials a[aria-label="Instagram"]:hover{
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 28px rgba(221,42,123,.26);
}

/* Facebook */
.footer-socials a[aria-label="Facebook"]:hover{
  background:#1877f2;
  border-color:#1877f2;
  box-shadow:0 14px 28px rgba(24,119,242,.28);
}

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

.footer-links h4,
.footer-contact h4{
  margin-bottom:18px;
  font-size:15px;
  font-weight:800;
  color:#ffffff;
  letter-spacing:.01em;
}

.footer-links ul{
  list-style:none;
}

.footer-links li{
  margin-bottom:12px;
  font-size:14px;
  color:#94a3b8;
}

.footer-links a{
  color:#94a3b8;
  position:relative;
  transition:color .22s ease;
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#7c3aed;
  transition:width .25s ease;
}

.footer-links a:hover{
  color:#ffffff;
}

.footer-links a:hover::after{
  width:100%;
}

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

.footer-contact p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.7;
  color:#94a3b8;
}

.footer-contact p a{
  color:#94a3b8;
  transition:color .22s ease;
}

.footer-contact p a:hover{
  color:#ffffff;
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:12px 18px;
  min-height:44px;
  border-radius:12px;
  background:#7c3aed;
  color:#ffffff;
  font-size:14px;
  font-weight:700;
  box-shadow:0 12px 26px rgba(124,58,237,.22);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.footer-cta:hover{
  background:#6d28d9;
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(124,58,237,.26);
}

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

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:1;
}

.footer-bottom-inner{
  width:92%;
  max-width:1140px;
  margin:0 auto;
  padding:20px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:#64748b;
}

.footer-signature{
  color:#94a3b8;
}

.footer-signature strong{
  color:#7c3aed;
  font-weight:700;
}

/* ============================= */
/* SCROLLBAR */
/* ============================= */

html::-webkit-scrollbar{
  width:10px;
}

html::-webkit-scrollbar-track{
  background:#ffffff;
}

html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7c3aed,#5b21b6);
  border-radius:999px;
  border:2px solid #ffffff;
}

html::-webkit-scrollbar-thumb:hover{
  background:#5b21b6;
}

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

@media (max-width:1024px){
  .footer-container{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px;
  }
}

@media (max-width:920px){
  .topnav-inner{
    padding:0 18px;
  }

  .burger{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(124,58,237,.08);
    border:1px solid rgba(124,58,237,.12);
  }

  .burger:hover{
    background:rgba(124,58,237,.12);
  }

  .navlinks{
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    right:18px;
    min-width:230px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(124,58,237,.12);
    border-radius:20px;
    box-shadow:0 20px 40px rgba(124,58,237,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .navlinks.open{
    display:flex;
  }

  .navlink{
    width:100%;
    text-align:left;
    padding:12px 14px;
    border-radius:14px;
  }

  .navlink.cta{
    text-align:center;
  }
}

@media (min-width:921px){
  .navlinks{
    display:flex !important;
    align-items:center;
    gap:10px;
  }

  .burger{
    display:none !important;
  }
}

@media (max-width:680px){
  .footer-container{
    grid-template-columns:1fr;
    gap:32px;
    padding:52px 0 32px;
  }

  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:18px 0 22px;
  }
}

@media (max-width:420px){
  .logo{
    max-width:140px;
  }

  .navlinks{
    left:12px;
    right:12px;
    min-width:auto;
  }

  .footer-brand h3{
    font-size:24px;
  }

  .footer-logo img{
    height:52px;
    max-width:140px;
  }

  .footer-socials a{
    width:40px;
    height:40px;
  }

  .footer-cta{
    width:100%;
  }
}