@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,400;1,9..144,700;1,9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* SOLENAO — design tokens & global styles */
/* Roca One (display) and Aptos (body) are the licensed brand fonts.
   Fallbacks: Fraunces (chunky display serif) and Inter (clean body sans),
   loaded above from Google Fonts. If the brand fonts are installed
   locally on the user's machine, they take precedence automatically. */

:root {
  /* surfaces */
  --bg: #FFFFFF;
  --bg-2: #FAFAF9;
  --bg-3: #F3F4F6;
  --ink: #0B1F1A;
  --ink-2: #1F2937;
  --ink-3: #6B7280;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;

  /* SOLENAO brand palette (charte graphique v1) */
  --orange: #FF7700;
  --orange-deep: #C9450D;
  --orange-darker: #8A3500;
  --orange-soft: #FFF7ED;
  --orange-light: #FED7AA;

  --green: #047857;
  --green-deep: #065F46;
  --green-darker: #064E3B;
  --green-logo: #498F45;
  --green-soft: #ECFDF5;
  --green-light: #D1FAE5;

  --blue: #0284C7;
  --blue-deep: #075985;
  --blue-darker: #0C4A6E;
  --blue-soft: #F0F9FF;
  --blue-light: #BAE6FD;

  --yellow: #EAB308;
  --yellow-deep: #CA8A04;
  --yellow-soft: #FFFBEB;
  --yellow-light: #FDE68A;
  --amber-dark: #854D0E;

  --violet: #6D5BBE;
  --violet-soft: #F5F3FF;
  --violet-light: #DDD6FE;

  --max: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  /* Aptos (body) + Roca One (display) — fallbacks via Google Fonts */
  --display: "Roca One", "Roca", "Fraunces", "Newsreader", Georgia, serif;
  --body: "Aptos", "Inter", "Söhne", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
::selection { background: var(--orange); color: #fff; }
img { max-width: 100%; display: block; }

/* Type system */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow.with-dot::before { /* legacy alias — same style now */ }
.h-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.h-display em { font-style: italic; font-weight: 700; color: var(--orange); }
/* ============================================
   GLOBAL ANIMATIONS (cards, bubbles, hovers, reveals)
   ============================================ */

/* Filiale logo in hero */
.filiale-logo {
  height: 110px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.06));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 800px) {
  .page-hero > .wrap { grid-template-columns: 1fr !important; }
  .filiale-logo { height: 80px; max-width: 200px; }
}

/* Cards (.card and .principle and .step) lift on hover */
.card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,18,16,0.25); }
.principle { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s; }
.principle:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 18px 40px -22px rgba(237,122,44,0.35); }
.step { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s; }
.step:hover { transform: translateY(-3px); }
.si-engine { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s; }
.si-engine:hover { transform: translateY(-4px); border-color: var(--yellow); background: rgba(255,255,255,0.06); }
.person { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.person:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(237,122,44,0.25); }
.sub-detail-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s; }
.sub-detail-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.kpi { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.kpi:hover { transform: translateY(-2px); }
.kpi:hover .num em { animation: numWiggle .5s ease; }
@keyframes numWiggle { 50% { transform: scale(1.06); } }
.kpi .num em { display: inline-block; transition: transform .3s; }

/* Avatar bubble in person/team cards */
.person .ph { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.person:hover .ph { transform: scale(1.08) rotate(-3deg); box-shadow: 0 12px 28px -10px rgba(237,122,44,0.55); }

/* Generic "tag" pill bounce-in on hover */
.tag, .pill, .blk-i, .eng-tag, .pn { transition: transform .25s; }
.card:hover .tag, .card:hover .pill, .principle:hover .pn { transform: translateX(2px); }

/* CTA buttons: subtle lift + arrow slide */
.btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn .arr { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr { transform: translateX(4px); }

/* Scroll-reveal — applied via IntersectionObserver in site.js */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger.in > * { animation: revealUp .6s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal-stagger.in > *:nth-child(1) { animation-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { animation-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { animation-delay: .19s; }
.reveal-stagger.in > *:nth-child(4) { animation-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { animation-delay: .33s; }
.reveal-stagger.in > *:nth-child(6) { animation-delay: .40s; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Bubble" tags get a gentle float */
.tag {
  animation: tagPop .5s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes tagPop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hero color bar shimmer on load */
.color-bar > div { animation: barIn .9s cubic-bezier(.2,.8,.2,1) backwards; }
.color-bar > div:nth-child(1) { animation-delay: .05s; }
.color-bar > div:nth-child(2) { animation-delay: .15s; }
.color-bar > div:nth-child(3) { animation-delay: .25s; }
.color-bar > div:nth-child(4) { animation-delay: .35s; }
@keyframes barIn { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ============================================ */
.h-1 em { font-style: italic; color: var(--orange); }
.h-2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.h-2 em { font-style: italic; color: var(--orange); }
.h-3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.lede {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
p { text-wrap: pretty; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.section.tight { padding: clamp(40px, 6vw, 72px) 0; }
.section.col-bg-cream { background: var(--bg-2); }
.section.col-bg-green { background: var(--green-soft); }
.section.col-bg-orange { background: var(--orange-soft); }
.section.col-bg-yellow { background: var(--yellow-soft); }
.section.col-bg-blue { background: var(--blue-soft); }

/* ---- Header ---- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .rainbow-band { height: 4px; }
.site-head .row {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad);
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 52px; width: auto; }
@media (max-width: 1000px) { .brand img { height: 42px; } }
@media (max-width: 600px)  { .brand img { height: 36px; } }

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav > a, .nav-group > button {
  padding: 9px 14px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: 999px;
  transition: color .2s, background .2s;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.nav > a:hover, .nav-group > button:hover { color: var(--orange-deep); background: var(--orange-soft); }
.nav > a.active, .nav-group > button.active { color: var(--orange-deep); background: var(--orange-soft); }
.nav-group { position: relative; }
.nav-group > button .chev { font-size: 10px; transition: transform .25s; opacity: .6; }
.nav-group.open > button { color: var(--orange-deep); background: var(--orange-soft); }
.nav-group.open > button .chev { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 0;
  margin-top: 0;
  padding-top: 8px;
  z-index: 60;
  display: none;
}
.nav-drop .nav-drop-inner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 18px 40px -20px rgba(11,31,26,0.18);
}
.nav-group.open .nav-drop { display: block; }
.nav-drop a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  margin: 0 0;
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.nav-drop a:hover { background: var(--orange-soft); color: var(--orange-deep); }
.nav-drop a small { color: var(--ink-3); font-size: 11px; font-family: var(--body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-left: 8px;
}
.lang-toggle button { padding: 5px 10px; border-radius: 999px; color: var(--ink-3); transition: all .2s; }
.lang-toggle button.on { background: var(--ink); color: #fff; }

@media (max-width: 1200px) {
  .nav > a, .nav-group > button { padding: 8px 10px; font-size: 13px; }
  .nav-drop { min-width: 220px; }
}
@media (max-width: 900px) {
  .site-head .row { gap: 12px; padding: 10px 16px; }
  .nav > a, .nav-group > button { padding: 6px 8px; font-size: 12px; gap: 4px; }
  .nav-drop { min-width: 200px; }
  .lang-toggle { font-size: 10px; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: all .2s;
  border: 1px solid transparent;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); transform: translateY(-1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--ink-3); }
.btn .arr { transition: transform .25s; }
.btn:hover .arr { transform: translateX(3px); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 64px 0 32px; background: var(--bg-2); margin-top: 80px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; align-items: start; }
.foot-grid .brand img { height: 64px; }
.foot-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 16px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--ink-2); font-size: 14px; transition: color .2s; }
.foot-col a:hover { color: var(--orange); }
.foot-bot { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }
.foot-tag { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--ink-2); margin-top: 12px; max-width: 28ch; line-height: 1.3; }

@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* Tags + utilities */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--green);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-deep); background: var(--green-soft);
}
.tag.t-orange { color: var(--orange-deep); border-color: var(--orange); background: var(--orange-soft); }
.tag.t-blue   { color: var(--blue-deep);   border-color: var(--blue);   background: var(--blue-soft); }
.tag.t-yellow { color: #6b4d00;            border-color: var(--yellow); background: var(--yellow-soft); }
.tag .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(59,139,63,.5); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,139,63,.5); }
  70% { box-shadow: 0 0 0 8px rgba(59,139,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,139,63,0); }
}

.divider { height: 1px; background: var(--line); margin: 48px 0; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.kpi { display: grid; gap: 4px; }
.kpi .num { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; }
.kpi .num em { color: var(--orange); font-style: italic; }
.kpi .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }

.card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); padding: 28px; transition: border-color .25s, transform .25s; }
.card:hover { border-color: var(--line-strong); }

/* Page-hero (inner pages) */
.page-hero { padding: clamp(56px, 8vw, 100px) 0 clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.page-hero.kind-green  { background: linear-gradient(180deg, var(--green-soft), var(--bg)); }
.page-hero.kind-orange { background: linear-gradient(180deg, var(--orange-soft), var(--bg)); }
.page-hero.kind-blue   { background: linear-gradient(180deg, var(--blue-soft), var(--bg)); }
.page-hero.kind-yellow { background: linear-gradient(180deg, var(--yellow-soft), var(--bg)); }
.page-hero .eyebrow { display: block; margin-bottom: 14px; }
.page-hero h1 { margin: 0 0 22px; max-width: 18ch; }
.page-hero .lede { max-width: 64ch; }

.sec-head { max-width: 880px; margin-bottom: 48px; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head h2 { margin: 0 0 16px; }

/* ===== Generic content blocks used across pages ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.fc { padding: 28px 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s; }
.fc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,18,16,0.25); }
.fc.col-orange { border-color: var(--orange); background: var(--orange-soft); }
.fc.col-green  { border-color: var(--green);  background: var(--green-soft); }
.fc.col-blue   { border-color: var(--blue);   background: var(--blue-soft); }
.fc.col-yellow { border-color: var(--yellow); background: var(--yellow-soft); }
.fc.col-orange:hover { box-shadow: 0 18px 40px -22px rgba(237,122,44,0.45); }
.fc.col-green:hover  { box-shadow: 0 18px 40px -22px rgba(46,140,82,0.45); }
.fc.col-blue:hover   { box-shadow: 0 18px 40px -22px rgba(46,107,176,0.45); }
.fc.col-yellow:hover { box-shadow: 0 18px 40px -22px rgba(216,166,57,0.55); }
.fc h3 { margin: 0 0 8px; }
.fc p { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; }
.fc .num { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; margin-bottom: 12px; }
.fc.col-orange .num { color: var(--orange-deep); }
.fc.col-green  .num { color: var(--green-deep); }
.fc.col-blue   .num { color: var(--blue-deep); }
.fc.col-yellow .num { color: #6b4d00; }
.fc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fc li { font-size: 13.5px; color: var(--ink-2); padding-left: 18px; position: relative; }
.fc li::before { content: "→"; position: absolute; left: 0; color: var(--orange); }
.fc.col-green  li::before { color: var(--green-deep); }
.fc.col-blue   li::before { color: var(--blue-deep); }
.fc.col-yellow li::before { color: #b58a00; }