/* Thème fun et coloré pour ChatTalk */
:root{
  --bg-1: #ffecd2; /* pale peach */
  --bg-2: #fcb69f; /* light coral */
  --card: #ffffff;
  --muted: #6b7280;
  --text-dark: #061826;
  --accent-a: #7c3aed; /* purple */
  --accent-b: #06b6d4; /* teal */
  --accent-c: #f97316; /* orange */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(124,58,237,0.08), transparent 20%),
              radial-gradient(900px 300px at 90% 80%, rgba(6,182,212,0.06), transparent 20%),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:28px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:800;color:var(--text-dark);text-decoration:none;font-size:1.25rem;letter-spacing:0.6px}
.nav a{color:var(--text-dark);text-decoration:none;margin-left:18px;padding:8px 10px;border-radius:10px;transition:background .18s}
.nav a:hover{background:rgba(0,0,0,0.04)}
.top-cta{margin-left:12px}
.hero{padding:56px 0}
.hero-inner{display:flex;gap:40px;align-items:center}
.hero-copy{flex:1}
.hero h1{font-size:2.4rem;margin:0 0 12px;color:var(--text-dark)}
.hero p{color:var(--muted);line-height:1.6}
.hero-ctas{margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:700;letter-spacing:0.2px}
.btn.primary{background:linear-gradient(90deg,var(--accent-a),var(--accent-b));color:white;box-shadow:0 10px 30px rgba(124,58,237,0.18), inset 0 -4px 8px rgba(0,0,0,0.06)}
.btn.outline{border:2px solid rgba(6,6,6,0.06);color:var(--text-dark);background:transparent}
.btn.playful{background:linear-gradient(90deg,var(--accent-b),var(--accent-c));padding:10px 16px;border-radius:999px;color:white}
.hero-shot{display:flex;justify-content:center}
.hero-shot img{width:260px;border-radius:28px;box-shadow:0 24px 60px rgba(6,6,6,0.12);transform:translateY(-6px)}
/* ensure hero image stays under header on mobile */
.hero-shot img{position:relative;z-index:0}
.features{padding:40px 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.feature-card{background:var(--card);padding:20px;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,0.06);transition:transform .18s}
.feature-card:hover{transform:translateY(-6px)}
.feature-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));color:white;font-weight:700;margin-bottom:12px}
.screens{padding:40px 0}
.screens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.screenshot img{width:100%;border-radius:14px;display:block;border:6px solid rgba(255,255,255,0.8)}
.contact{padding:36px 0}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:700px}
.contact-form label{display:block;font-size:0.9rem}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(6,6,6,0.08)}
.contact-form textarea{grid-column:1/-1}
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:28px 0;margin-top:40px;color:var(--muted)}

/* responsive */
@media(max-width:980px){
  .hero-inner{flex-direction:column-reverse;text-align:center}
  .hero-shot img{width:300px}
  .features-grid{grid-template-columns:1fr 1fr}
  .screens-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .features-grid{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .nav{display:none}
  .hero h1{font-size:1.6rem}
}

/* Play store badge harmonisation */
.play-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent-b),var(--accent-c));
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(6,182,212,0.12);
  transition:transform .14s, box-shadow .14s;
}
.play-badge:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,182,212,0.14)}
.play-badge img{height:28px;display:block}
.play-badge .play-text{font-weight:700;font-size:0.95rem;letter-spacing:0.2px}
@media(max-width:520px){
  .play-badge .play-text{display:none}
  .play-badge img{height:34px}
}

/* Mobile navigation (hamburger) */
.hamburger{display:none;background:transparent;border:0;font-size:1.4rem;cursor:pointer;padding:8px;border-radius:8px}
.hamburger:focus{outline:2px solid var(--accent-b)}
@media(max-width:520px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .header-inner{position:relative;z-index:60}
  .nav{display:none;position:absolute;top:calc(100% + 8px);left:8px;right:8px;padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff);box-shadow:0 10px 30px rgba(2,6,23,0.08);flex-direction:column;gap:10px;z-index:70}
  .nav.open{display:flex}
  .nav a{padding:12px;border-radius:10px}
}