/* ============================================
   SYNAPS LLC — PREMIUM SELECT DESIGN v3
   Luxe, sobriété, précision, élégance.
   ============================================ */

/* ------------------------------
   COLOR SYSTEM — High-End Palette
   ------------------------------ */
:root {
  --ink: #0d0d0f;               /* Noir profond */
  --ink-soft: #2a2a32;
  --muted: #6e7585;             /* Gris chic */
  --line: rgba(255,255,255,0.08);

  --bg: #f8f9fb;                /* Blanc premium */
  --panel: #ffffff;             /* Card white */
  --panel-soft: rgba(255,255,255,0.7);

  /* Branding premium */
  --brand: #4f67ff;             /* Bleu royal élégant */
  --brand-2: #7c8bff;
  --brand-glow: rgba(79,103,255,0.18);

  /* Radius + Shadow */
  --radius: 18px;
  --shadow-soft: 0 10px 40px rgba(0,0,0,0.06);
  --shadow-strong: 0 20px 60px rgba(0,0,0,0.12);

  /* Spacing system */
  --space: clamp(1rem, 2vw, 1.6rem);
}

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Utilities */
.container { width: min(1120px, 92%); margin: auto; }
.narrow { width: min(820px, 90%); margin: auto; }
.center { text-align: center; }

/* ============================================
   HEADER — Premium Glass Bar
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--brand-glow);
}

/* NAV */
.nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: .98rem;
  transition: .15s;
}

.nav a:hover { opacity: .65; }

/* Mobile Menu */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:#fff;
  border: 1px solid #e5e7ec;
  box-shadow: var(--shadow-soft);
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
  margin: 6px auto;
}

/* ============================================
   BUTTONS — Premium System
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-weight: 600;
  border-radius: 14px;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  border:1px solid rgba(0,0,0,0.08);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px var(--brand-glow);
}

.btn-ghost {
  background: rgba(255,255,255,0.6);
  border:1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* ============================================
   HERO — Luxe, spacing, élégance
   ============================================ */
.hero {
  padding: 120px 0 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -1px;
}

.lead {
  color: var(--muted);
  font-size: 1.18rem;
  max-width: 640px;
}

.hero-cta { margin-top: 28px; display: flex; gap: 14px; }

/* Stats premium */
.stats {
  display: flex;
  gap: 22px;
  margin-top: 32px;
}

.stat {
  background: var(--panel);
  padding: 16px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.stat span {
  font-size: 1.6rem;
  font-weight: 800;
}

.stat small { color: var(--muted); }

/* Side Card */
.hero-card {
  position: relative;
}

.card-content {
  background: var(--panel);
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-soft);
}

.card-content h3 { margin-bottom: 12px; }

/* ============================================
   SECTION SYSTEM
   ============================================ */
.section { padding: 100px 0; }
.section-alt { background: #fff; }

.h2 {
  font-size: 2rem;
  margin-bottom: 14px;
  font-weight: 700;
}
.sub { color: var(--muted); margin-bottom: 30px; }

/* Services grid — premium cards */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 24px;
}

.svc-card {
  background: var(--panel);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
  transition: .2s ease;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}

/* Proof */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 24px;
}

.proof {
  background: var(--panel);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

/* Steps – Process */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap: 24px;
}

.step {
  background: var(--panel);
  padding: 26px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.badge {
  width: 32px; height: 32px;
  background: linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius: 12px;
  color:#fff;
  font-weight:700;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
}

/* ============================================
   FAQ
   ============================================ */
.faq {
  max-width: 820px;
  margin: auto;
}

.faq-item {
  background: var(--panel);
  padding: 20px 22px;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,0.06);
  margin:12px 0;
  box-shadow: var(--shadow-soft);
}

.faq summary {
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
}

/* ============================================
   CTA
   ============================================ */
.cta {
  background: linear-gradient(135deg,#eef3ff,#ffffff);
  padding: 90px 0;
  text-align:center;
}

.cta-wrap { max-width: 700px; margin:auto; }

/* ============================================
   SUB-HERO for service pages
   ============================================ */
.sub-hero {
  text-align:center;
  padding:110px 0 40px;
  background:linear-gradient(135deg,#eef4ff,#ffffff);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* ============================================
   PRICING — Ultra Select
   ============================================ */
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
  margin-top:40px;
}

.p-card {
  background: var(--panel);
  padding:32px;
  border-radius:22px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-soft);
  text-align:center;
  display:flex;
  flex-direction:column;
  min-height:420px;
  transition:.25s;
}

.p-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
}

.p-card h3 { color:var(--brand); margin-bottom:6px; }

.p-card .price {
  font-size:1.8rem;
  font-weight:800;
  margin:16px 0 22px;
  color:var(--ink);
}

.p-card ul { list-style:none; margin:0; padding:0; }
.p-card li { color:var(--muted); margin:6px 0; }

/* ============================================
   CONTACT FORM — Premium Inputs
   ============================================ */
#contact {
  padding:100px 0;
  background:linear-gradient(135deg,#fbfcff,#ffffff);
  border-top:1px solid rgba(0,0,0,0.04);
}

.contact-form {
  display:grid;
  gap:26px;
  margin-top:36px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.form-group label {
  font-weight:600;
  margin-bottom:8px;
  color:var(--ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
  font-size:1rem;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  transition:.2s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color:var(--brand);
  outline:none;
  box-shadow:0 0 0 3px rgba(79,103,255,0.18);
}

/* ============================================
   FOOTER — Luxury Black Level
   ============================================ */
.site-footer {
  background:#0b0b0d;
  color:#bfc1c7;
  padding:70px 0;
}

.foot-grid {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:30px;
  align-items:start;
}

.foot-links a {
  display:inline-block;
  margin-bottom:6px;
  text-decoration:none;
  color:#d3d4d8;
  font-size:.95rem;
}

.foot-contact .link {
  color:var(--brand);
  text-decoration:none;
}

.social-links {
  margin-top:16px;
  display:flex;
  gap:14px;
}

.social-links img {
  width:24px; height:24px;
  opacity:.8; transition:.2s;
}
.social-links img:hover { opacity:1; transform:scale(1.12); }

/* ============================================
   RESPONSIVE — Minimal & Perfect
   ============================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .stats { justify-content:center; }

  .steps, .grid-4, .proof-grid {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px) {

  .nav {
    display:none;
    flex-direction:column;
    background:#fff;
    border-radius:16px;
    border:1px solid rgba(0,0,0,0.06);
    padding:22px;
    box-shadow:var(--shadow-soft);
    position:absolute;
    top:64px; right:4%; left:4%;
  }
  
  .hamburger { display:block; }

  .grid-4, .steps, .proof-grid,
  .pricing-grid, .form-grid {
    grid-template-columns:1fr;
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn .8s ease forwards;
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .8s ease forwards;
}

.fade-slide {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlide .4s ease forwards;
}

@keyframes fadeIn {
  to { opacity:1; transform:translateY(0); }
}

@keyframes fadeUp {
  to { opacity:1; transform:translateY(0); }
}

@keyframes fadeSlide {
  to { opacity:1; transform:translateY(0); }
}
.site-footer .social-links img {
    width: 32px;
    height: 32px;
    padding: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-right: 10px;
    transition: 0.25s ease;
}
.site-footer .social-links img:hover {
    transform: scale(1.12);
    background: #f5f5f5;
}