/* GeniusFormers Build landing
 * Verbatim copy of the mockup stylesheet from design-export/genius_landing/build.html.
 * Do NOT reformat or "clean up": this file is the pixel reference, and
 * client/scripts/landing-diff.mjs compares the rendered page against that
 * mockup. Every deviation from the source is marked with a GF-EDIT comment.
 */
:root{
    --bg:#222c33;
    --teal:#40A2C0;
    --magenta:#EA226C;
    --gold:#BEA674;
    --white:#FFFFFF;
    --muted:rgba(255,255,255,0.66);
    --muted-soft:rgba(255,255,255,0.40);
    --card:rgba(255,255,255,0.05);
    --card-border:rgba(255,255,255,0.12);
    --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
    --maxw:1240px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{min-height:100%;}
  body{
    font-family:var(--font);
    background:var(--bg); color:var(--white);
    line-height:1.6; -webkit-font-smoothing:antialiased;
    letter-spacing:-0.01em; overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  em{font-style:normal; font-weight:600; color:inherit;}

  /* ===== FOND DYNAMIQUE (magenta réduit à ~5%) ===== */
  .bg{ position:fixed; inset:0; z-index:-2; overflow:hidden;
       background:radial-gradient(130% 120% at var(--gx,50%) var(--gy,-8%), #2b3841 0%, #222c33 44%, #19222a 100%);
       transition:background .2s linear; }
  .bg-parallax{ position:absolute; inset:-8%; will-change:transform; }
  .orb{ position:absolute; border-radius:50%; filter:blur(96px); will-change:transform; }
  .orb.o1{ width:620px; height:620px; background:var(--magenta); top:-220px; left:-160px; opacity:.05; animation:driftA 22s ease-in-out infinite; }
  .orb.o2{ width:700px; height:700px; background:var(--teal);    bottom:-300px; right:-180px; opacity:.50; animation:driftB 26s ease-in-out infinite, pulseB 11s ease-in-out infinite; }
  .orb.o3{ width:440px; height:440px; background:var(--magenta); top:44%; right:12%; opacity:.05; animation:driftC 30s ease-in-out infinite; }
  .orb.o4{ width:420px; height:420px; background:var(--teal);    top:22%; left:30%; opacity:.30; animation:driftD 34s ease-in-out infinite, pulseB 10s ease-in-out infinite; }
  .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  @keyframes driftA{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(150px,90px) scale(1.14);} }
  @keyframes driftB{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-170px,-80px) scale(1.18);} }
  @keyframes driftC{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-110px,130px) scale(0.88);} }
  @keyframes driftD{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(130px,-90px) scale(1.1);} }
  @keyframes pulseB{ 0%,100%{opacity:.44;} 50%{opacity:.62;} }

  /* ===== NAV ===== */
  .topbar{ position:sticky; top:0; z-index:30; }
  .nav{ background:rgba(28,37,43,0.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--card-border); }
  .subbar{ background:rgba(28,37,43,0.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--card-border); }
  .subbar-inner{ max-width:var(--maxw); margin:0 auto; padding:9px 28px;
    font-size:13.5px; font-weight:600; letter-spacing:0.02em; color:var(--muted); }
  .subbar-inner .prod{ color:var(--teal); }
  .nav-inner{ max-width:var(--maxw); margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .logo{ display:flex; align-items:center; gap:12px; }
  .logo-badge{ position:relative; width:40px; height:40px; border-radius:8px; background:#242b31; color:var(--white);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,0.28); flex:none; }
  .logo-frame{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .logo-g{ position:relative; z-index:1; line-height:1; font-weight:600; font-style:italic; }
  .logo-text{ display:flex; flex-direction:column; line-height:1.05; }
  .logo-name{ font-weight:600; font-size:15px; letter-spacing:0.04em; text-transform:uppercase; font-style:italic; }
  .logo-tagline{ font-size:11.5px; color:var(--muted); }
  .nav-right{ display:flex; align-items:center; gap:10px; }
  .nav-link{ color:var(--muted); font-size:14.5px; font-weight:500; padding:10px 12px; border-radius:10px;
    min-height:44px; display:inline-flex; align-items:center; transition:color .2s; }
  .nav-link:hover{ color:var(--white); }
  /* GF-EDIT: the mockup has no language control (the page was French only).
     These rules add one built from the existing .nav-link vocabulary - same
     colour, size and hover - so it reads as part of the mocked nav.

     Below 600px the mocked nav is already full: logo + "Toutes les offres"
     leaves ~28px, and three language links need ~109px, which wraps the nav onto
     a second row and pushes the whole page down. So on small screens the nav
     group is hidden and an identical group in the footer takes over - the footer
     already wraps and already carries "Toutes les offres". Exactly one of the
     two is ever rendered. */
  .nav-langs, .foot-langs{ display:inline-flex; align-items:center; gap:2px; }
  .nav-langs{ margin-right:4px; }
  .foot-langs{ display:none; }
  .nav-langs a, .foot-langs a{ color:var(--muted-soft); font-size:13px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; padding:10px 8px; border-radius:8px;
    min-height:44px; display:inline-flex; align-items:center; transition:color .2s, background .2s; }
  .nav-langs a:hover, .foot-langs a:hover{ color:var(--white); }
  .nav-langs a[aria-current="page"], .foot-langs a[aria-current="page"]{
    color:var(--white); background:rgba(255,255,255,0.08); }
  @media (max-width:600px){
    .nav-langs{ display:none; }
    .foot-langs{ display:inline-flex; margin-top:10px; }
  }
  .nav-cta{ background:var(--teal); color:#10242b; font-weight:600; font-size:14.5px;
    padding:0 20px; min-height:44px; border-radius:999px; display:inline-flex; align-items:center;
    transition:transform .2s, box-shadow .2s, background .2s; box-shadow:0 10px 26px -8px rgba(64,162,192,0.7); }
  .nav-cta:hover{ transform:translateY(-2px); background:#4fb4d3; }

  /* ===== LAYOUT ===== */
  .section{ max-width:var(--maxw); margin:0 auto; padding:88px 28px; position:relative; z-index:1; }
  .eyebrow{ display:inline-flex; align-items:center; gap:9px; text-transform:uppercase;
    letter-spacing:0.18em; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:20px; }
  .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--magenta); }
  .eyebrow.teal::before{ background:var(--teal); }
  .s-title{ font-size:clamp(24px,4.4vw,35px); font-weight:600; line-height:1.08; letter-spacing:-0.02em; max-width:42ch; }
  .s-lead{ color:var(--muted); font-size:clamp(16px,1.9vw,18.5px); font-weight:400; margin-top:20px; max-width:60ch; }

  /* ===== HERO ===== */
  .hero{ padding-top:60px; padding-bottom:60px; }
  .hero-title{ font-size:clamp(32px,6vw,54px); font-weight:600; line-height:1.05; letter-spacing:-0.03em; max-width:34ch; }
  .hero-lead{ color:var(--muted); font-size:clamp(17px,2.2vw,22px); font-weight:400; margin-top:26px; max-width:64ch; }

  /* ===== CARTES / GRILLES ===== */
  .glass{ background:var(--card); border:1px solid var(--card-border);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:22px;
    box-shadow:0 18px 50px rgba(0,0,0,0.32); position:relative; overflow:hidden; }
  .glass::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), transparent 44%); }

  .force-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
  .force{ padding:28px 24px; display:flex; flex-direction:column; gap:12px; transition:transform .3s, border-color .3s; }
  .force:hover{ transform:translateY(-6px); border-color:rgba(64,162,192,0.5); }
  .force h3{ font-weight:600; font-size:19px; letter-spacing:-0.02em; }
  .force p{ color:var(--muted); font-size:15px; line-height:1.55; font-weight:400; }

  /* ===== MÉTHODE 4D ===== */
  .method-q{ font-weight:500; font-size:clamp(22px,3.2vw,32px); color:var(--white); margin:6px 0 8px; letter-spacing:-0.02em; }
  .method-q .accent{ color:var(--magenta); }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
  .step{ padding:30px 24px 26px; display:flex; flex-direction:column; gap:14px; transition:transform .3s, border-color .3s; }
  .step:hover{ transform:translateY(-6px); border-color:rgba(64,162,192,0.5); }
  .step-top{ display:flex; align-items:baseline; gap:12px; }
  .step-num{ font-size:40px; font-weight:700; line-height:1; letter-spacing:-0.03em; color:var(--magenta); }
  .step-d{ text-transform:uppercase; letter-spacing:0.16em; font-size:11px; font-weight:700; color:var(--muted-soft); }
  .step h4{ font-weight:600; font-size:20px; letter-spacing:-0.02em; }
  .w-w{ color:var(--white); }
  .w-c{ color:var(--teal); }
  .w-m{ background:var(--magenta); color:var(--white); padding:1px 8px; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .step p{ color:var(--muted); font-size:15px; line-height:1.55; font-weight:400; }
  .method-note{ margin-top:30px; padding:22px 26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .method-note .badge{ flex:none; padding:7px 15px; border-radius:999px; background:rgba(64,162,192,0.16);
    border:1px solid rgba(64,162,192,0.4); color:var(--teal); font-size:13px; font-weight:600; letter-spacing:0.01em; }
  .method-note p{ color:var(--muted); font-size:15.5px; font-weight:400; }

  /* ===== EXEMPLES ===== */
  .cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
  .case{ padding:30px 26px; display:flex; flex-direction:column; gap:12px; transition:transform .3s, border-color .3s; }
  .case:hover{ transform:translateY(-6px); border-color:rgba(64,162,192,0.5); }
  .case-tag{ align-self:flex-start; text-transform:uppercase; letter-spacing:0.14em; font-size:11px; font-weight:700;
    color:var(--teal); padding:5px 12px; border-radius:999px; background:rgba(64,162,192,0.12); border:1px solid rgba(64,162,192,0.32); }
  .case h3{ font-weight:600; font-size:21px; letter-spacing:-0.02em; }
  .case p{ color:var(--muted); font-size:15px; line-height:1.6; font-weight:400; }
  .case-icons{ margin-top:auto; padding-top:18px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .case-icons svg{ width:22px; height:22px; color:var(--teal); opacity:.9; flex:none; }

  /* ===== CONTACT ===== */
  .contact-wrap{ padding:56px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .contact-wrap h2{ font-weight:600; font-size:clamp(24px,3.4vw,34px); line-height:1.1; letter-spacing:-0.02em; }
  .contact-wrap p{ color:var(--muted); font-size:clamp(16px,1.9vw,18.5px); font-weight:400; margin-top:16px; max-width:52ch; }
  .contact-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:52px; padding:0 26px; border-radius:999px; font-size:16px; font-weight:600; font-family:var(--font);
    cursor:pointer; border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }
  .btn-magenta{ background:var(--magenta); color:var(--white); box-shadow:0 14px 34px -10px rgba(234,34,108,0.7); }
  .btn-magenta:hover{ transform:translateY(-2px); background:#f43d7e; }
  .btn-wa{ background:#25D366; color:#08331b; box-shadow:0 14px 34px -10px rgba(37,211,102,0.6); }
  .btn-wa:hover{ transform:translateY(-2px); background:#33e074; }
  .btn-ico{ width:20px; height:20px; flex:none; }
  .contact-note{ display:inline-flex; align-items:center; gap:9px; margin-top:26px; color:var(--muted-soft); font-size:14px; }
  .contact-note .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }

  /* ===== FOOTER ===== */
  .foot{ text-align:center; color:var(--muted-soft); font-size:13px; letter-spacing:0.03em;
    padding:40px 28px 52px; position:relative; z-index:1; }
  .foot .sep{ display:inline-block; width:4px; height:4px; background:var(--gold); border-radius:50%; margin:0 12px; vertical-align:middle; }
  .foot a:hover{ color:var(--white); }

  /* ===== RESPONSIVE ===== */
  @media (max-width:980px){
    .force-grid, .steps{ grid-template-columns:repeat(2,1fr); }
    .cases{ grid-template-columns:1fr; }
    .section{ padding:72px 24px; }
  }
  @media (max-width:600px){
    .nav-inner{ padding:12px 18px; }
    .logo-tagline{ display:none; }
    .subbar-inner{ padding:8px 18px; font-size:12px; letter-spacing:0.01em; }
    .force-grid, .steps{ grid-template-columns:1fr; }
    .section{ padding:60px 20px; }
    .hero{ padding-top:44px; }
    .contact-wrap{ padding:44px 22px; }
    .contact-ctas .btn{ width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .orb{ animation:none; }
    .bg{ transition:none; }
    .btn:hover, .force:hover, .step:hover, .case:hover, .nav-cta:hover{ transform:none; }
  }