/* =========================================================
   Global reset + font (1 seule police : Inter)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root{
  /* Palette principale */
  --primary: #27a8b3;
  --secondary: #132646;
  --accent: #44c1ca;
  --success: #20a3ae;
  --warning: #f59e0b;

  --white: #ffffff;
  --bg-light: #f7fbff;
  --text-dark: #132646;
  --text-muted: #5b6b80;

  /* Ombres */
  --shadow-soft: 0 10px 40px rgba(39,168,179,.10);
  --shadow-medium: 0 20px 50px rgba(39,168,179,.15);
  --shadow-strong: 0 30px 80px rgba(39,168,179,.20);

  /* Alias pour sections existantes (compat) */
  --c-primary: var(--primary);
  --c-primary-dark: var(--secondary);
  --c-white: var(--white);
  --c-muted: rgba(255,255,255,.78);

  --faq-primary: var(--primary);
  --faq-dark: var(--secondary);
  --faq-muted: #667085;
  --faq-border: #e7eef7;

  --ct-primary: var(--primary);
  --ct-dark: var(--secondary);
  --ct-muted: #667085;
  --ct-border: #e7eef7;
  --ct-bg: #f7fbff;
}

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-light);
}

/* Utilitaires */
.sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;

}

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  background: #fff;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 2rem;
  position:relative;
  z-index:10;
}

.logo img{
    height:50px;
    width:80px;
    display:block;
}

.mobile-menu-btn{
  display:none;
  background:none;
  border:0;
  color:var(--secondary);
  font-size:1.5rem;
  cursor:pointer;
  padding:.5rem;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:2rem;
}

.nav-links a{
    color:var(--secondary);
    text-decoration:none;
    font-weight:500;
    transition:opacity .3s;
}

.nav-links a:hover{
    opacity:.8;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:1rem;
}

.call-info{
    display:flex;
    align-items:center;
    gap:.5rem;
    color:var(--text-dark);
}

.call-icon{
  width:40px;
  height:40px;
  background:#10B981;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}

.call-text{
    display:flex;
    flex-direction:column;
}

.call-label{
    font-size:.8rem;
    opacity:.8;
}

.call-number{
    font-weight:700;
    font-size:1rem;
}

.signup-btn{
  background: linear-gradient(45deg, var(--primary), #1a8993);
  color:#fff; border:none;
  padding:.7rem 1.5rem;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
  transition:transform .3s;
}
.signup-btn:hover{
    transform: translateY(-2px);
}

@media (max-width: 968px){
  .navbar{
    overflow: visible;
    }

  .mobile-menu-btn{
    display:block;
    }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:1rem 2rem;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    z-index:1000;
  }

  .nav-links.mobile-open{
    display:flex;
  }

  .nav-right{
    gap:.5rem;
   }

  .call-text{
    display:none;
  }

  .call-icon{
    width:35px;
    height:35px;
    }

  .signup-btn{
    padding:.5rem 1rem;
    font-size:.9rem;
  }

}

/* =========================================================
   HERO
========================================================= */
.hero-kycare{
  position:relative;
  isolation:isolate;
  min-height:92vh;
  display:grid;
  place-items:center;
  padding: clamp(2rem,4vw,3rem) 1.25rem;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(39,168,179,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(19,38,70,.25), transparent 60%),
    linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 60%, #0d2134 100%);
  color: var(--c-white); overflow:hidden;
}

.hero-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 80%);
  pointer-events:none;
}

@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
.hero-blob{
    position:absolute;
    filter:blur(30px);
    opacity:.35;
    pointer-events:none;
    animation: floatY 12s ease-in-out infinite;
}

.hero-blob--a{
    width:360px;
    height:360px;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #4cd0db, rgba(76,208,219,.2));
    top:-80px; left:-80px;
}

.hero-blob--b{
    width:480px;
    height:480px;
    border-radius:50%;
    background: radial-gradient(circle at 70% 60%, #244573, rgba(36,69,115,.15));
    bottom:-140px;
    right:-120px;
    animation-delay:.4s;
}

.hero-wrap{
  max-width:1200px;
  width:100%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,3.5vw,4rem);
  align-items:center;
  z-index:2;
}

.hero-badges{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-bottom:.6rem;
}

.badge-free{
  background: linear-gradient(45deg, #37c2cd, var(--c-primary));
  color:#06262a;
  font-weight:900;
  border:1px solid rgba(255,255,255,.15);
  padding:.4rem .75rem;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(39,168,179,.35);
}

.badge-secure{
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  padding:.4rem .7rem;
  border-radius:999px;
  backdrop-filter: blur(6px);
}

.hero-title{
    font-size:clamp(2rem,4.2vw,3.5rem);
    line-height:1.15;
    font-weight:800;
    margin:.3rem 0 1rem;
}


.hero-title span{
  background: linear-gradient(45deg, #e9ffff, #a9f2f7 50%, #e9ffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-subtitle{
    font-size:clamp(1rem,1.5vw,1.15rem);
    color:var(--c-muted);
    max-width:60ch;
    margin-bottom:1.2rem;
}

.hero-cta{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    margin-top:.25rem; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.2rem;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}

.btn:active{
    transform: translateY(1px);
}

.btn-primary{
    background: linear-gradient(45deg,#37c2cd,var(--primary));
    color:#fff;
    box-shadow:0 12px 28px rgba(39,168,179,.35);
}
.btn-primary:hover{
    box-shadow:0 16px 36px rgba(39,168,179,.45);
}
.btn-contrast{
    background: linear-gradient(45deg,#fff,#dff8fb);
    color:var(--secondary);
    box-shadow:0 10px 24px rgba(255,255,255,.18);
}
.btn-contrast:hover{
    box-shadow:0 14px 32px rgba(255,255,255,.22);
}

.btn-block{
    width:100%;
    margin-top:.5rem;
}

.hero-right{
    display:flex;
    justify-content:center;
}

.glass-card{
  width:min(420px,90vw);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  border-radius:22px;
  overflow:hidden;
  transform: rotate(-2deg);
  animation: floatY 9s ease-in-out infinite;
}

.gc-header{
    display:flex;
    align-items:center;
    gap:.35rem;
    padding:.75rem .9rem;
    background: rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.16);
}

.gc-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.35));
}

.gc-body{
    padding: 1rem .9rem 1.1rem;
}

.gc-line{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:.85rem;
}
.gc-avatar{
    width:52px;
    height:52px;
    border-radius:16px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    border:2px solid rgba(255,255,255,.25);
}

.gc-name{
    font-weight:800;
}

.gc-spec{
    color: rgba(255,255,255,.85);
}

.gc-badge{
    font-size:.8rem;
    color:#0b2c20;
    background:#b7ffe5;
    padding:.35rem .55rem;
    border-radius:999px;
    font-weight:700;
}

.gc-kpi{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:.75rem;
    margin:.75rem 0 .5rem;
}

.gc-kpi-item{
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    padding:.75rem;
    text-align:center;
}

.gc-kpi-item strong{
    font-size:1.05rem;
}

.gc-kpi-item span{
    display:block;
    color: rgba(255,255,255,.85);
    font-size:.85rem;
}

@media (max-width:1024px){
  .hero-wrap{
    grid-template-columns:1fr;
   }
  .glass-card{
    transform:none;
   }
  .hero-right{
    order:-1;
    margin-bottom:1.25rem;
  }
}

@media (max-width:640px){
  .btn{
    padding:.85rem 1rem;
    border-radius:12px;
   }
  .hero-subtitle{
    margin-bottom:1rem;
  }

}

/* =========================================================
   HOW SECTION (timeline)
========================================================= */
.how-section{
  padding:6rem 1.5rem;
  background:#1e2b45;
  position:relative;
}

.bg-decoration{
  position:absolute;
  inset:0;
  opacity:.1;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.how-container{
    max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:1;
}

.section-header{
    text-align:center;
    margin-bottom:4rem;
    color:#fff;
}
.how-title{ font-size:clamp(2.5rem,5vw,4rem);
    font-weight:800;
    margin:0 0 1rem;
    letter-spacing:-.02em;
    text-shadow:2px 2px 4px rgba(0,0,0,.1);
}
.how-subtitle{
    font-size:1.25rem;
    opacity:.9;
    font-weight:300;
}

.steps-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:3rem;
    max-width:900px;
    margin:0 auto;
}

.timeline-line{
  position:absolute;
  left:50%;
  top:100px;
  bottom:100px;
  width:4px;
  background:linear-gradient(to bottom, var(--accent), var(--secondary));
  transform:translateX(-50%); border-radius:2px; box-shadow:0 0 20px rgba(6,182,212,.3);
}

.step-item{
    display:flex;
    align-items:center;
    gap:2rem;
    position:relative;
}

.step-item:nth-child(even){
    flex-direction:row-reverse;
}

@keyframes slideInView{ from{
    opacity:0;
    transform:translateY(50px);
}
to{
    opacity:1;
    transform:translateY(0);
} }

.step-content{
  flex:1;
  background:#fff;
  border-radius:24px;
  padding:2.5rem;
  box-shadow:var(--shadow-medium);
  position:relative;
  transform:translateY(50px);
  opacity:0;
  animation: slideInView .8s ease-out forwards;
  border-left:5px solid var(--primary);
}

.step-item:nth-child(2)
.step-content{
    animation-delay:.2s;
    border-left-color:var(--accent);
}
.step-item:nth-child(3)
.step-content{
    animation-delay:.4s;
    border-left-color:var(--success);
}
.step-item:nth-child(4)
.step-content{
    animation-delay:.6s;
    border-left-color:var(--warning);
}

.step-content::before{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-style:solid;
}
.step-item:nth-child(odd)
.step-content::before{
    right:-15px;
    border-color:transparent transparent transparent #fff;
    border-width:15px 0 15px 15px;
}
.step-item:nth-child(even)
.step-content::before{
    left:-15px;
    border-color:transparent #fff transparent transparent;
    border-width:15px 15px 15px 0;
}

.step-icon-wrapper{
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  box-shadow:var(--shadow-strong);
}
.step-item:nth-child(1)
.step-icon-wrapper{
    background:linear-gradient(135deg, var(--primary), #4f46e5);
}
.step-item:nth-child(2)
.step-icon-wrapper{
    background:linear-gradient(135deg, var(--accent), #0891b2);
}
.step-item:nth-child(3)
.step-icon-wrapper{
    background:linear-gradient(135deg, var(--success), #059669);
}
.step-item:nth-child(4)
.step-icon-wrapper{
    background:linear-gradient(135deg, var(--warning), #d97706);
}

.step-number{
  position:absolute;
  top:-10px;
  right:-10px;
  width:40px;
  height:40px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.1rem;
  color:var(--text-dark);
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.step-title{
    font-size:1.75rem;
    font-weight:700;
    color:var(--text-dark);
    margin:0 0 1rem;
    display:flex;
    align-items:center;
    gap:1rem;
}

.step-description{
    color:var(--text-muted);
    font-size:1.1rem;
    line-height:1.7;
    margin-bottom:2rem;
}

.step-features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.feature-card{
  background:#f8fafc;
  padding:1rem;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.9rem;
  color:var(--text-muted);
  border:1px solid #e2e8f0;
  transition:.3s;
}

.feature-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
    border-color:var(--primary);
}

.step-stats{
    display:flex;
    justify-content:space-between;
    gap:1rem;
}
.stat-item{
  text-align:center;
  padding:1rem;
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  border-radius:12px;
  flex:1;
  border:2px solid transparent;
  transition:.3s;
}

.stat-item:hover{
    border-color:var(--primary);
    transform:scale(1.05);
}
.stat-number{
    display:block;
    font-size:1.5rem;
    font-weight:800;
    color:var(--primary);
}
.stat-label{
    font-size:.85rem;
    color:var(--text-muted);
    margin-top:.25rem;
}

@media (max-width:768px){
  .how-section{
    padding:4rem 1rem;
    }
  .steps-timeline{
    max-width:100%;
    }
  .timeline-line{
    display:none;
    }
  .step-item, .step-item:nth-child(even){
    flex-direction:column;
    text-align:center;
    }
  .step-content::before{
    display:none;
   }
  .step-content{
    border-left:none;
    border-top:5px solid var(--primary);
    }
  .step-item:nth-child(2)
  .step-content{
    border-top-color:var(--accent);
    }
  .step-item:nth-child(3)
  .step-content{
    border-top-color:var(--success);
    }
  .step-item:nth-child(4)
  .step-content{
    border-top-color:var(--warning);
    }
  .step-features{
    grid-template-columns:1fr;
    }
  .step-stats{
    flex-direction:column;
    }

    .step-features{
        display:grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap:.75rem;
    }
  .feature-card{
    padding:4rem;
    font-size:.95rem;
  }

  .step-stats{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:.75rem;
  }

  .stat-item{
    padding:.9rem;
  }
  .stat-number{ font-size:1.35rem; }
}

@media (max-width:480px){
  .step-features,
  .step-stats{
    gap:.6rem;
  }
  .feature-card{ padding:.65rem; font-size:.9rem; }
  .stat-item{ padding:.75rem; }
}

/* =========================================================
   FAQ
========================================================= */
.kc-faq{
    background: #F2FBFC;
    padding: clamp(3rem,5vw,5rem) 1.25rem;
}


.faq-container{
    max-width:900px;
    margin:0 auto;
}

.faq-title{
    text-align:center;
    font-size:clamp(2rem,4vw,2.6rem);
    font-weight:900;
    color:var(--faq-dark);
    margin:0 0 .5rem;
}

.faq-title span{
    color:var(--faq-primary);
}


.faq-subtitle{
    text-align:center;
    color:var(--faq-muted);
    margin:0 auto 2rem;
    max-width:60ch;
}

.faq-accordion{
    display:grid;
    gap:.75rem;
}

.faq-item{
  width:100%;
  text-align:left;
  cursor:pointer;
  background:#fff;
  color:var(--faq-dark);
  border:1px solid var(--faq-border);
  border-radius:14px;
  padding:1rem 1rem 1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.faq-item:hover{
    border-color: rgba(39,168,179,.35);
    box-shadow: 0 10px 26px rgba(39,168,179,.08);
}

.faq-q{
    font-weight:800;
    font-size:1.02rem;
}

.chev{
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative;
    background: rgba(39,168,179,.12);
}

.chev::before{
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid var(--faq-primary);
    border-bottom:2px solid var(--faq-primary);
    transform: rotate(-45deg);
    transition: transform .25s ease;
}

.faq-panel{
  overflow:hidden;
  max-height:0;
  background:#fff;
  border:1px solid var(--faq-border);
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:0 1.1rem;
  color:var(--faq-muted);
  transition: max-height .35s ease, padding .25s ease;
}

.faq-panel p{
    margin:1rem 0 1.1rem;
    line-height:1.65;
}

.faq-panel a{
    color:var(--faq-primary);
    text-decoration:underline;
}

.faq-item[aria-expanded="true"]{
    background:#faffff;
    border-color:
    rgba(39,168,179,.45);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.faq-item[aria-expanded="true"] + .faq-panel{
    max-height:320px;
    padding-top:.25rem;
    padding-bottom:1rem;
}
.faq-item[aria-expanded="true"] .chev::before{
    transform: rotate(135deg);
}

/* =========================================================
   CONTACT
========================================================= */
.kc-contact{
  position:relative;
  isolation:isolate;
  background: linear-gradient(180deg, #132646 80%, var(--accent) 20%);
  padding: clamp(3rem,5vw,5rem) 1.25rem;
    /* --secondary: #132646;
  --accent: #44c1ca;
  --success: #20a3ae; */
}
.kc-contact__wrap{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(1.5rem,4vw,3rem);
    align-items:start;
}

.kc-contact__title{
    font-size:clamp(2rem,4vw,2.6rem);
    font-weight:900;
    color:#fff;
    margin:0 0 .4rem;
}

.kc-contact__title span{
    color:var(--ct-primary);
}
.kc-contact__subtitle{
    color:#fff;
    margin:0 0 1.2rem;
    max-width:50ch;
}

.kc-contact__cards{
    display:grid;
    gap:.8rem;
    margin-bottom:.75rem;
}
.kc-card{
    display:flex;
    align-items:center;
    gap:.9rem;
    background:#fff;
    border:1px solid var(--ct-border);
    border-radius:14px;
    padding:.9rem 1rem;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.kc-card__icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background: rgba(39,168,179,.12);
    color:var(--ct-dark);
    font-size:1.1rem;
    flex:0 0 42px;
    border:1px solid rgba(19,38,70,.08);
}
.kc-card h3{
    margin:0;
    font-size:1.02rem;
    color:var(--ct-dark);
}
.kc-card p{
    margin:.1rem 0 0;
}
.kc-card a{
    color:var(--ct-dark);
    text-decoration:none;
}
.kc-card a:hover{
    text-decoration:underline;
}
.kc-contact__note{
    margin-top:.5rem;
    color:#36506b;
    background: rgba(39,168,179,.1);
    border:1px solid rgba(39,168,179,.25);
    border-radius:10px;
    padding:.6rem .75rem;
    font-size:.95rem;
}

.kc-contact .kc-socials{
    display:flex;
    gap:.5rem;
    margin-top:.9rem;
}

.kc-contact .kc-social{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--ct-border);
  color:var(--ct-dark);
  text-decoration:none;
  font-weight:800;
  transition: transform .15s ease, box-shadow .2s ease;
}
.kc-contact .kc-social:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.kc-contact__form{
    background:#fff;
    border:1px solid var(--ct-border);
    border-radius:16px;
    padding:1.2rem;
    box-shadow:0 12px 28px rgba(0,0,0,.05);
}
.kc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.85rem;
}
.kc-field{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}

.kc-field--full{ grid-column:1 / -1; }
label{
    font-weight:700;
    color:var(--ct-dark);
    font-size:.96rem;
}
input, textarea{
  border:1px solid var(--ct-border);
  border-radius:12px;
  padding:.8rem .9rem;
  font-size:1rem;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus{
    border-color: rgba(39,168,179,.6);
    box-shadow: 0 0 0 3px rgba(39,168,179,.12);
}

.kc-btn{
    display:inline-block;
    padding:12px 16px;
    border-radius:12px;
    border:0;
    cursor:pointer;
    font-weight:800;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow:0 10px 24px rgba(39,168,179,.18);
}

.kc-btn--ghost{
    background:transparent;
    color:#e2e8f0;
    border:1px solid rgba(0,0,0,.1);
}

.kc-btn--small{
    padding:10px 12px;
    font-weight:700;
}

.kc-success{
  display:none;
  margin-top:.8rem;
  color:#0f5132;
  background:#d1f5e4;
  border:1px solid #92e0c1;
  padding:.6rem .75rem;
  border-radius:10px;
}

@media (max-width:960px){
  .kc-contact__wrap{
    grid-template-columns:1fr;
}
  .kc-grid{
    grid-template-columns:1fr;
}
}

/* =========================================================
   FOOTER
========================================================= */
.kc-footer{
  --ink:#e2e8f0;
  --muted:#93a4b8;
  --line:rgba(255,255,255,.10);
  --bg1:#0b1f33;
  --bg2:#112a46;
  --accent:var(--primary);
  background: radial-gradient(1200px 700px at 100% -10%, rgba(39,168,179,.15), transparent 50%),
              linear-gradient(180deg, var(--bg2), var(--bg1));
  color:var(--ink); padding:56px 16px 18px; position:relative;
}
.kc-footer::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:10px;
    opacity:.5;
    background:linear-gradient(90deg, transparent, rgba(39,168,179,.35), transparent);
}
.kc-footer__container{
    max-width:1200px;
    margin:0 auto;
}
.kc-footer__grid{
    display:grid;
    gap:28px;
    grid-template-columns:1.1fr .9fr .9fr 1.1fr;
    align-items:start;
}
@media (max-width:1000px){
    .kc-footer__grid{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width:640px){
    .kc-footer__grid{
        grid-template-columns:1fr;
    }
}

.kc-footer__logo img{
    display:block;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.kc-footer__desc{
    color:var(--muted);
    line-height:1.6;
    margin:12px 0 16px;
}
.kc-footer__title{
    font-size:16px;
    font-weight:800;
    margin:4px 0 12px;
    color:#f1f5f9;
}

.kc-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
}
.kc-list a{
    color:var(--ink);
    opacity:.9;
    text-decoration:none;
}
.kc-list a:hover{
    color:#fff;
}

.kc-list--contact li{
    color:var(--ink);
    opacity:.95;
}
.kc-list--contact a{
    color:#fff;
}

.kc-footer .kc-newsletter__row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.kc-footer .kc-newsletter__row input{
  flex:1 1 220px;
  min-width:0;
  border:1px solid #284259;
  border-radius:12px;
  background:#0f2a42;
  color:#e6edf5;
  padding:12px 14px;
  outline:none;
}
.kc-footer .kc-newsletter__row input::placeholder{
    color:#8aa0b5;
}
.kc-footer .kc-newsletter__row input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(39,168,179,.25);
}

.kc-footer .kc-socials{
    display:flex;
    gap:12px; margin:14px 0 0;
    padding:0;
    list-style:none;
}

.kc-footer .kc-social{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#dbe7f3;
  background:#0f2a42;
  border:1px solid #284259;
  text-decoration:none;
}

.kc-footer .kc-social:hover{
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 6px 18px rgba(39,168,179,.18);
}

.kc-footer__bottom{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}

.kc-footer__bottom p{
    margin:0;
    color:var(--muted);
    flex:1 1 260px;
}

.kc-legal{
    display:flex;
    gap:14px;
    list-style:none;
    margin:0;
    padding:0;
}

.kc-legal a{
    color:var(--muted);
    text-decoration:none;
}
.kc-legal a:hover{
    color:#fff;
}
@media (max-width:900px){
  .kc-footer__bottom{
    justify-content:center;
    text-align:center;
}
  .kc-footer__bottom p, .kc-legal{
    flex:1 1 100%;
    justify-content:center;
}

}

/* =========================================================
   DOWNLOAD / BADGES (kc-download)
========================================================= */
.kc-download{
  position:relative;
  overflow:clip;
  --g1:var(--primary);
  --g2:var(--secondary);
  --ink:#e6edf5;
  --muted:#9fb2c6;
  --line:rgba(255,255,255,.14);
  --r:18px;
  --glow:0 18px 48px rgba(39,168,179,.22);
  color:var(--ink);
  background: linear-gradient(135deg, #f9fafc, #eef2f7);
}
.kc-download__wrap{ max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:2;
}
.kc-download__grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:42px;
    align-items:center;
}
@media (max-width:980px){
    .kc-download__grid{ grid-template-columns:1fr;
    }
}

.kc-pill-badge{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 12px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.4px;
  color:#d3f7ff;
  border:1px solid rgba(39,168,179,.45);
  border-radius:999px;
  background:linear-gradient(90deg, #1a6e77, #14305d); box-shadow:var(--glow);
}
.kc-download__head h2{
    font-size:clamp(30px,4.6vw,44px);
    margin:0 0 8px;
    line-height:1.05;
}
.kc-download__head h2 span{
    background:linear-gradient(90deg,var(--g1),var(--g2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.kc-download__head p{
    color:var(--muted);
    margin:0 0 20px;
}

.kc-download__points{
    list-style:none;
    padding:0;
    margin:0 0 22px;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.kc-download__points li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  backdrop-filter: blur(6px);
}
.kc-download__points .ico{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg, var(--g1), var(--g2)); box-shadow:0 8px 20px rgba(39,168,179,.25);
}

.kc-badges{
    display:flex;
    flex-wrap:wrap;
    gap:14px; margin:8px 0 22px;
}
.kc-badge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--line);
  box-shadow:var(--glow);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; will-change: transform;
}
.kc-badge:hover{
    transform:translateY(-4px);
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}

/* =========================================================
   APP SHOWCASE (maquette téléphone) – conflits résolus
========================================================= */
.app-showcase{
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #f0fdfa 70%, #ecfdf5 100%);
  position:relative;
  padding:6rem 2rem;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.app-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(39,168,179,.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(102,126,234,.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2327a8b3' fill-opacity='0.03'%3E%3Cpath d='m0 40l40-40h-40v40zm40 0v-40h-40l40 40z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.showcase-container{
    max-width:1400px;
    margin:0 auto;
    position:relative;
    z-index:2;
}
.showcase-header{
    text-align:center;
    margin-bottom:4rem;
}
.app-badge{
  display:inline-block;
  background: rgba(39,168,179,.1);
  backdrop-filter: blur(10px);
  padding:.8rem 2rem;
  border-radius:50px;
  font-size:.9rem;
  font-weight:600;
  margin-bottom:1.5rem;
  border:1px solid rgba(39,168,179,.2);
  color:var(--primary);
}
.showcase-title{
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 50%, var(--secondary) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.showcase-subtitle{
    font-size:1.2rem;
    color:#64748b;
    max-width:600px;
    margin:0 auto;
    line-height:1.6;
}

.app-demo-layout{
    display:grid;
    grid-template-columns:1fr auto 1fr; gap:4rem;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
}
.app-mockup{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.phone-frame{
  width:300px;
  height:600px;
  background: linear-gradient(145deg,#ffffff,#f8fafc);
  border-radius:40px;
  padding:20px;
  position:relative;
  box-shadow: 0 25px 80px rgba(39,168,179,.15), 0 0 0 8px rgba(39,168,179,.05), inset 0 2px 0 rgba(255,255,255,.8);
  animation: float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-15px) rotate(1deg);} }


.app-demo-layout .phone-screen{
  width:100%;
  height:100%;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.1);
}
.status-bar{
    height:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    color:#fff;
    font-size:.8rem;
    font-weight:600;
}
.screen-content{
    flex:1;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}
.app-logo{
    width:80px;
    height:80px;
    background: rgba(255,255,255,.2);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    margin-bottom:20px;
    backdrop-filter: blur(10px);
}
.app-name{
    font-size:1.8rem;
    font-weight:800;
    margin-bottom:10px;
}
.app-tagline{
    font-size:.9rem;
    opacity:.9;
    margin-bottom:30px;
}
.demo-features{
    display:flex;
    flex-direction:column;
    gap:15px; width:100%;
}
.demo-feature{
    background: rgba(255,255,255,.1);
    border-radius:15px; padding:15px;
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.2);
    transition:.3s;
}
.demo-feature:hover{
    background: rgba(255,255,255,.15);
    transform: scale(1.02);
}
.floating-dot{
    position:absolute;
    width:12px;
    height:12px;
    background: rgba(255,255,255,.3);
    border-radius:50%;
    animation: pulse 3s ease-in-out infinite;
}
.floating-dot:nth-child(1){
    top:10%;
    left:-20%;
    animation-delay:0s;
}
.floating-dot:nth-child(2){
    top:30%;
    right:-25%;
    animation-delay:1s;
}
.floating-dot:nth-child(3){
    bottom:20%;
    left:-15%;
    animation-delay:2s;
}
.floating-dot:nth-child(4){
    bottom:40%;
    right:-20%;
    animation-delay:.5s;
}
@keyframes pulse{ 0%,100%{ transform: scale(1); opacity:.3;} 50%{ transform: scale(1.5); opacity:.8;} }

.features-left, .features-right{
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.feature-card-modern{
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(20px);
  border:1px solid rgba(39,168,179,.1);
  border-radius:20px;
  padding:2rem;
  color:#1e293b;
  position:relative;
  transition:.4s cubic-bezier(.25,.8,.25,1);
  box-shadow:0 4px 20px rgba(39,168,179,.08);
}
.feature-card-modern::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: linear-gradient(90deg, var(--primary), #667eea, #764ba2);
  border-radius:20px 20px 0 0;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.feature-card-modern:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow:0 20px 50px rgba(39,168,179,.15);
    border-color: rgba(39,168,179,.3);
}
.feature-card-modern:hover::before{
    transform: scaleX(1);
}

.feature-icon-modern{
  width:60px;
  height:60px;
  background: linear-gradient(135deg, var(--primary), #667eea);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:1rem;
  color:#fff;
  box-shadow:0 8px 25px rgba(39,168,179,.2);
}
.feature-title-modern{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:.8rem;
    color:#1e293b;
}
.feature-desc-modern{
    font-size:.95rem;
    line-height:1.6;
    color:#64748b;
}

@media (max-width:1024px){
  .app-demo-layout{
    grid-template-columns:1fr;
    gap:3rem;
    text-align:center;
}
  .features-left, .features-right{
    max-width:500px;
    margin:0 auto;
  }
}

/* =========================================================
   SECTION FLUIDE (arrière-plan animé) – police unifiée & animations dédoublées
========================================================= */
.fluid-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:80px 0;
  overflow:hidden;
  background:#1a1a2e;
}
.fluid-bg{
  position:absolute;
  inset:0;
  background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460); overflow:hidden;
}
.fluid-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(120,119,198,.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,119,198,.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120,219,255,.15) 0%, transparent 50%);
}
.wave{ position:absolute; border-radius:50%; filter:blur(40px); mix-blend-mode:multiply; animation: wave 20s ease-in-out infinite; }
.wave:nth-child(1){ width:400px; height:400px; background: radial-gradient(circle, #ff6b6b 0%, transparent 70%); top:10%; left:-10%; animation-delay:0s; }
.wave:nth-child(2){ width:350px; height:350px; background: radial-gradient(circle, #4ecdc4 0%, transparent 70%); top:60%; right:-10%; animation-delay:-7s; }
.wave:nth-child(3){ width:300px; height:300px; background: radial-gradient(circle, #45b7d1 0%, transparent 70%); bottom:20%; left:20%; animation-delay:-14s; }
.wave:nth-child(4){ width:450px; height:450px; background: radial-gradient(circle, #96ceb4 0%, transparent 70%); top:-20%; right:30%; animation-delay:-3s; }
.wave:nth-child(5){ width:250px; height:250px; background: radial-gradient(circle, #ffeaa7 0%, transparent 70%); bottom:-10%; right:10%; animation-delay:-10s; }
.wave:nth-child(6){ width:380px; height:380px; background: radial-gradient(circle, #dda0dd 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:-5s; }
@keyframes wave{
  0%,100%{ transform: translate(0,0) scale(1) rotate(0deg); opacity:.4; }
  25%{ transform: translate(30px,-20px) scale(1.1) rotate(90deg); opacity:.6; }
  50%{ transform: translate(-15px,15px) scale(.9) rotate(180deg); opacity:.3; }
  75%{ transform: translate(20px,-30px) scale(1.05) rotate(270deg); opacity:.7; }
}

.particles{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.particle{
    position:absolute;
    width:4px;
    height:4px;
    background: rgba(255,255,255,.6); border-radius:50%; animation: particle-float 15s linear infinite;
}
.particle:nth-child(odd){
    background: rgba(255,182,193,.8); animation-duration:20s;
}
.particle:nth-child(3n){
    background: rgba(173,216,230,.8);
    animation-duration:18s;
}
@keyframes particle-float{
  0%{ transform: translateY(100vh) rotate(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform: translateY(-100vh) rotate(360deg); opacity:0; }
}

.content-container{
    position:relative;
    z-index:10;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}
.content-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}
@media (max-width:1024px){ .content-grid{ grid-template-columns:1fr; gap:50px; text-align:center; } }

.text-content{ color:#fff; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background: rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:50px;
  font-size:14px;
  font-weight:600;
  margin-bottom:30px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2); transition:.3s;
}
.badge:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.badge-icon{
  width:20px;
  height:20px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  animation: pulse-scale 2s ease-in-out infinite;
}
/* nouvelle animation pour éviter doublon de 'pulse' */
@keyframes pulse-scale{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.2);} }

.main-title{
  font-size:clamp(40px,6vw,68px);
  font-weight:800;
  line-height:1.1;
  margin:0 0 20px;
  background: linear-gradient(135deg, #fff 0%, #f0f9ff 30%, #e0e7ff 60%, #c7d2fe 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
}
.main-title::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:0;
  width:100px;
  height:4px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
  border-radius:2px;
  animation: line-expand 3s ease-in-out infinite;
}
@keyframes line-expand{ 0%,100%{ width:100px;} 50%{ width:200px;} }

.main-subtitle{
    font-size:18px;
    line-height:1.7;
    color: rgba(255,255,255,.8);
    margin:0 0 40px;
    font-weight:400;
    max-width:480px;
}

.features{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:50px;
}
.feature{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    backdrop-filter: blur(20px);
    transition:.4s cubic-bezier(.4,0,.2,1);
}
.feature:hover{
    transform: translateX(10px);
    background: rgba(255,255,255,.1);
    box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.feature-icon{
    width:50px;
    height:50px;
    background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    box-shadow:0 8px 20px rgba(255,107,107,.3);
}
.feature-text h3{
    font-size:16px;
    font-weight:600; margin:0 0 4px;
    color:#fff;
}
.feature-text p{
    font-size:14px;
    margin:0;
    color: rgba(255,255,255,.7);
}

.download-area{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.download-btn{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 28px;
  background: rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:18px; color:#fff;
  text-decoration:none;
  font-weight:600;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
  transition:.4s cubic-bezier(.4,0,.2,1);
  min-width:200px;
  position:relative;
  overflow:hidden;
}
.download-btn::before{ content:"";
    position:absolute;
    inset:0; left:-100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transition:left .6s;
}
.download-btn:hover::before{
    left:100%;
}
.download-btn:hover{
    transform: translateY(-4px) scale(1.05);
    background: rgba(255,255,255,.15);
    box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.3);
}

.phone-area{
    display:flex;
    justify-content:center;
    position:relative;
}
.phone-mockup{
    width:300px;
    height:600px;
    position:relative;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
}
.phone-body{
  width:100%;
  height:100%;
  background: linear-gradient(145deg, #2a2a3e, #1a1a2e);
  border-radius:45px;
  padding:10px;
  position:relative;
  border:3px solid rgba(255,255,255,.1);
}
.phone-body::before{
    content:"";
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    width:50px;
    height:5px;
    background: rgba(255,255,255,.3);
    border-radius:3px;
}

/* >>> Scopé : seconde implémentation .phone-screen sans conflit */
.phone-mockup .phone-screen{
  width:100%;
  height:100%;
  border-radius:35px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, var(--primary) 100%);
}
.screen-glow{
    position:absolute;
    inset:0;
    background: linear-gradient(45deg, rgba(255,255,255,.1), transparent, rgba(255,255,255,.1));
    animation: screen-shimmer 3s ease-in-out infinite;
}
@keyframes screen-shimmer{ 0%,100%{ opacity:.5;} 50%{ opacity:.8;} }

.app-preview{ position:relative; z-index:2; text-align:center; color:#fff; }
.screen-elements{ width:100%; max-width:200px; display:flex; flex-direction:column; gap:10px; }
.screen-card{ height:40px; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:10px; backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.screen-button{ height:45px; background:#fff; color:#333; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-top:10px; box-shadow:0 8px 20px rgba(0,0,0,.2); }

@media (max-width:768px){
  .app-showcase{ padding:3rem 1rem; }
  .phone-frame{ width:250px; height:500px; }
  .feature-card-modern{ padding:1.5rem; }
  .app-demo-layout{ gap:2rem; }
  .download-area{ flex-direction:column; align-items:center; }
  .download-btn{ width:100%; justify-content:center; max-width:300px; }
  .phone-mockup{ width:250px; height:500px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ================== Variables globales ================== */
:root{
  --primary:#27a8b3;
  --secondary:#132646;
  --ink:#1f2937;
  --muted:#64748b;
}

/* ============ Screens (gallery) ============ */
.kc-screens-pro{
  --primary:#27a8b3;
  --secondary:#132646;
  --ink:#1f2937;
  --muted:#64748b;

background: linear-gradient(180deg, #132646 100%, #1f4d63 90%, #27a8b3 100%);

  /* padding: clamp(3rem,5vw,5rem) 1.25rem; */
  position: relative;
}
.kc-screens-pro .wrap{
  max-width:1100px;
  margin:0 auto;
  position:relative;
}
.kc-screens-pro .head{

  text-align:center;
  margin-bottom:1.2rem;

}
.kc-screens-pro .head h2{
  font-size: clamp(2rem,4vw,2.6rem);
  font-weight:900;
  color:#fff;
  margin:0 0 .4rem;
}
.kc-screens-pro .head p{
  color:#fff;
  margin:.25rem 0 .35rem;
}
.kc-screens-pro .head .hint{ color:#94a3b8; }

.kc-screens-pro .rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,1fr);
  gap: clamp(.85rem,2.5vw,1.25rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:.5rem .25rem 1rem;
}
.kc-screens-pro .rail::-webkit-scrollbar{ display:none; }

.kc-screens-pro .shot{
  /* scroll-snap-align:center; */
  /* position:relative; */
  /* background:#fff; */
  /* border:1px solid #e7eef7; */
  /* border-radius:18px; */
  /* padding:14px 14px 12px; */
  /* box-shadow:0 12px 28px rgba(0,0,0,.05); */
  /* transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; */
}
.kc-screens-pro .shot:hover{
  transform: translateY(-4px);
  border-color: rgba(39,168,179,.35);
  box-shadow:0 16px 36px rgba(39,168,179,.12);
}
.kc-screens-pro .shot figcaption{
  margin:.6rem 0 0;
  color:#fff;
  font-size:.95rem;
  text-align:center;
}

/* Phone frame */
.kc-screens-pro .phone{
  position:relative;
  border-radius:24px;
  /* background: linear-gradient(145deg,#ffffff,#f8fafc); */
  /* border:1px solid #e5eef7; */
  /* padding:10px; */
  overflow:hidden;
  /* box-shadow: 0 25px 60px rgba(39,168,179,.12), 0 0 0 6px rgba(39,168,179,.06); */
}
.kc-screens-pro .phone::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  padding:1px;
  /* background:linear-gradient(90deg, var(--primary), var(--secondary)); */
  /* Masque (peut ne pas être supporté partout, ce n'est pas bloquant) */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
.kc-screens-pro .notch{
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  width:64px;
  height:6px;
  border-radius:6px;
  background:rgba(0,0,0,.12);
}
.kc-screens-pro .phone img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  /* background:#0e1f33; */
}


/* Nav arrows */
.kc-screens-pro .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:2;
}


.kc-screens-pro .nav.prev{
    left:-6px;
}
.kc-screens-pro .nav.next{
    right:-6px;
}
@media (max-width: 900px){
  .kc-screens-pro .nav{ display:none; }
}

/* Lightbox (dialog) */
.kc-screens-pro .lightbox{
  width:min(96vw,1200px);
  border:0;
  padding:0;
  background:transparent;
}

.kc-screens-pro .lightbox::backdrop{
  background: rgba(10,17,28,.75);
}

/* Fallback backdrop */
@supports not (backdrop-filter: blur(0)){
  .kc-screens-pro .lightbox::backdrop{ background: rgba(0,0,0,.7); }
}

.kc-screens-pro #lbImg{
  display:block;
  max-width:92vw;
  max-height:78vh;
  margin:10vh auto 8px;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.kc-screens-pro .lbCaption{
  color:#e2e8f0;
  text-align:center;
  margin:0 0 24px;
}

.kc-screens-pro .lbClose,
.kc-screens-pro .lbPrev,
.kc-screens-pro .lbNext{
  position:fixed;
  top:18px;
  width:44px;
  height:44px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:#0f1f33;
  color:#e6edf5;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.kc-screens-pro .lbClose{
    right:18px;
    font-size:20px;
}
.kc-screens-pro .lbPrev, .kc-screens-pro .lbNext{
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
}
.kc-screens-pro .lbPrev{ left:18px; }
.kc-screens-pro .lbNext{ right:18px; }

/* ============ Pricing ============ */
.kc-pricing{
  background: linear-gradient(180deg,#f7fbff 0%, #ffffff 100%);
  padding: clamp(3rem,5vw,5rem) 1.25rem;
}
.kc-pricing__wrap{
    max-width:1200px;
    margin:0 auto;
}
.kc-pricing__head{
    text-align:center;
    margin-bottom:2rem;
}
.kc-pricing__head h2{
  font-size: clamp(2rem,4vw,2.6rem);
  font-weight:900;
  color: var(--secondary);
  margin:0 0 .4rem;
}
.kc-pricing__head p{
    color:#5b6b80;
}


.kc-pricing__grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3, minmax(250px,1fr));
  align-items:stretch;
}
@media (max-width: 980px){
  .kc-pricing__grid{
    grid-template-columns: 1fr;
}

}

.kc-price-card{
  position:relative;
  background:#fff;
  border:1px solid #e8eff6;
  border-radius:16px;
  box-shadow: 0 12px 28px rgba(39,168,179,.06);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.kc-price-card:hover{
  transform: translateY(-4px);
  border-color: rgba(39,168,179,.28);
  box-shadow: 0 16px 36px rgba(39,168,179,.10);
}

.kc-price-card__badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  font-size:.76rem;
  font-weight:800;
  color:#06262a;
  background: linear-gradient(45deg, #37c2cd, var(--primary));
  padding:.3rem .6rem;
  border-radius:999px;
  box-shadow: 0 10px 24px rgba(39,168,179,.22);
}
.kc-price-card.is-featured{
  border-color: rgba(39,168,179,.45);
  box-shadow: 0 18px 42px rgba(39,168,179,.18);
}

.kc-price-card__title{
  font-size:1.25rem;
  font-weight:800;
  color: var(--secondary);
  margin:0 0 .25rem;
}
.kc-price-card__price{
  font-size:2rem;
  font-weight:900;
  color: var(--primary);
  margin:.25rem 0 .5rem;
}
.kc-price-card__price small{
    font-size:1rem;
    color:#5b6b80;
}

.kc-price-card__list{
  list-style:none;
  padding:0;
  margin:.25rem 0 .5rem;
  display:grid;
  gap:.5rem;
}
.kc-price-card__list li{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#5b6b80;
}
.kc-price-card__list li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 10px;
  background: radial-gradient(circle at 30% 30%, #37c2cd, var(--primary));
  box-shadow: 0 6px 16px rgba(39,168,179,.25);
}

.kc-price-card__cta{
    width:100%;
    text-align:center;
}

.kc-price-card__note{
    margin:0;
    font-size:.9rem;
    color:#667085;
}

.kc-btn--ghost{
  background:transparent;
  color: var(--secondary);
  border:1px solid rgba(19,38,70,.15);
}
.kc-btn--ghost:hover{
  border-color: var(--primary);
  box-shadow: 0 10px 22px rgba(39,168,179,.12);
}

/* Fond très léger pour la section Tarifs */
.kc-pricing--soft{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(39,168,179,.08), transparent 55%),
    radial-gradient(700px 360px at 110% 0%, rgba(19,38,70,.05), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 60%, #ffffff 100%);
  border-top: 1px solid #e9f2f8;
}