/* ORGX Proposition Sites — Orbicul/ORGX brand system
   Dark, premium SaaS-dashboard aesthetic, matching orbicul.com tokens:
   bg #060A0F, surface #0E141B, brand font Raleway, accent acid-green #95C11F */
/* Font itself is enqueued properly in functions.php (wp_enqueue_style,
   as a real <link>, not @import — @import blocks the CSS parser from
   fetching anything after it until the imported file has downloaded,
   which is exactly the kind of render-blocking Core Web Vitals
   penalises). Do not re-add an @import here. */

:root{
  --bg:#060A0F;
  --surface:#0E141B;
  --surface-raised:#131B24;
  --border:#1E2A35;
  --text:#F2F5F7;
  --muted:#8B96A3;
  --accent:#95C11F;
  --accent-strong:#B4E23A;
  --accent-ink:#06110A;
  --radius:10px;
  --measure:42rem;
  --wide:72rem;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Raleway',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Raleway',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
  color:var(--text);
}
h1{ font-size:clamp(2.1rem,4.4vw,3.1rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1.1em; color:var(--text); }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
ul,ol{ padding-left:1.3em; margin:0 0 1.1em; }
li{ margin-bottom:0.5em; }

.wrap{ max-width:var(--wide); margin:0 auto; padding:0 1.5rem; }
.measure{ max-width:var(--measure); }

/* ---- Header ---- */
.site-header{
  border-bottom:1px solid var(--border);
  padding:1.5rem 0;
  background:var(--bg);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{
  font-family:'Raleway',sans-serif; font-weight:800; font-size:1.05rem; color:var(--text);
  text-decoration:none; display:flex; align-items:center; gap:.65rem; letter-spacing:.01em;
  min-width:0;
}
.brand-logo{ display:block; height:56px; width:auto; flex-shrink:0; }
.brand small{ font-family:'Raleway',sans-serif; font-weight:500; font-size:.72rem; color:var(--muted); }
.header-cta{
  font-size:clamp(.78rem,2.6vw,.92rem); font-weight:600; color:var(--bg); text-decoration:none;
  background:var(--accent); border:1px solid var(--accent); padding:.55rem 1.1rem; border-radius:var(--radius);
  white-space:nowrap; transition:background .15s ease, border-color .15s ease, transform .15s ease;
  transform-origin:center;
}
.header-cta:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:scale(1.03); }

/* ---- Hero ---- */
.hero{ background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%); border-bottom:1px solid var(--border); }
.hero-inner{ padding-top:4.5rem; padding-bottom:4rem; max-width:44rem; }
.eyebrow{ font-size:.85rem; color:var(--accent); font-weight:700; margin-bottom:1rem; letter-spacing:.02em; }
.hero h1{ margin-bottom:0.55em; }
.hero .subhead{ font-size:1.15rem; color:var(--muted); max-width:38rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.btn{
  display:inline-block; font-weight:600; font-size:.98rem; padding:.85rem 1.5rem;
  text-decoration:none; border:1px solid var(--border); border-radius:var(--radius);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  transform-origin:center;
}
.btn:hover{ transform:scale(1.03); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- Section rhythm ---- */
section{ padding:3.6rem 0; border-bottom:1px solid var(--border); }
section:last-of-type{ border-bottom:none; }
.section-label{
  font-size:.8rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; letter-spacing:.02em;
}
.section-head{ max-width:40rem; margin-bottom:2rem; }
.section-head p{ color:var(--muted); font-size:1.05rem; }

/* ---- Problem list ---- */
.problem-list{ list-style:none; padding:0; margin:0; max-width:44rem; }
.problem-list li{
  padding:1.1rem 0; border-top:1px solid var(--border); margin:0; color:var(--text);
}
.problem-list li:last-child{ border-bottom:1px solid var(--border); }

/* ---- Solution blocks ---- */
.solution-block{ max-width:44rem; margin-bottom:1.8rem; }
.solution-block h3{ margin-bottom:.4rem; color:var(--accent-strong); }
.solution-block p{ color:var(--text); }
.solution-block ul{ margin-top:.6rem; }

/* ---- Cards ---- */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.card{
  background:var(--surface); padding:1.8rem 1.6rem;
  transition:background .15s ease;
}
.card:hover{ background:var(--surface-raised); }
.card .kicker{ font-size:.78rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; letter-spacing:.02em; }
.card h3{ font-size:1.08rem; margin-bottom:.5rem; color:var(--text); }
.card p{ color:var(--muted); font-size:.96rem; margin:0; }

/* ---- FAQ ---- */
.faq-list{ max-width:44rem; }
.faq-item{
  border-top:1px solid var(--border); padding:1.1rem 0;
}
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-item summary{
  cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; color:var(--text);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:'Raleway',sans-serif; font-weight:700; font-size:1.3rem; color:var(--accent); flex-shrink:0;
}
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ margin:.8rem 0 0; color:var(--muted); max-width:40rem; }

/* ---- Cluster links ---- */
.cluster-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.cluster-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; text-decoration:none; color:var(--text); display:block;
  background:var(--surface); transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.cluster-card:hover{ border-color:var(--accent); transform:translateY(-2px); background:var(--surface-raised); }
.cluster-card h3{ font-size:1rem; margin-bottom:.4rem; color:var(--text); }
.cluster-card span{ font-size:.85rem; color:var(--accent); font-weight:700; }
.cluster-card p{ font-size:.92rem; color:var(--muted); margin:.4rem 0 .8rem; }

/* ---- Lead capture ---- */
.lead-block{ background:var(--surface); border-bottom:none; border-top:1px solid var(--border); }
.lead-block .section-label{ color:var(--accent); }
.lead-block h2{ color:var(--text); }
.lead-block p{ color:var(--muted); }
.lead-form{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; max-width:36rem; }
.lead-form .field{ flex:1 1 200px; }
.lead-form input{
  width:100%; padding:.85rem 1rem; border:1px solid var(--border); background:var(--bg); border-radius:var(--radius);
  color:var(--text); font-family:'Raleway',sans-serif; font-size:.95rem;
}
.lead-form input::placeholder{ color:var(--muted); }
.lead-form .btn-primary{ flex:0 0 auto; }

/* ---- Footer ---- */
footer.site-footer{ padding:2.2rem 0; background:var(--bg); }
footer.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer.site-footer p{ margin:0; font-size:.85rem; color:var(--muted); }
footer.site-footer nav a{ font-size:.85rem; color:var(--muted); margin-left:1.2rem; text-decoration:none; }
footer.site-footer nav a:hover{ color:var(--accent); }

@media (max-width:640px){
  .hero-inner{ padding-top:3rem; padding-bottom:2.5rem; }
  section{ padding:2.6rem 0; }
  footer.site-footer .wrap{ flex-direction:column; }
  footer.site-footer nav a{ margin-left:0; margin-right:1rem; }

  /* The header previously crammed brand + language switcher + CTA button
     onto one unwrapping flex row — on narrow phones the CTA (translated
     text can run long, e.g. French/German) had nowhere to go but wrap
     into a tall, cramped, visibly misaligned stack. Splitting into two
     deliberate rows (brand row, then everything else) fixes that without
     touching any copy. */
  .site-header .wrap{ flex-wrap:wrap; row-gap:.75rem; }
  .brand{ flex:1 1 100%; }
  .header-right{ flex:1 1 100%; flex-wrap:wrap; row-gap:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}