/* Stiluri doar pentru pagina brand book-ului. Componentele vin din app.css (copia CSS-ului aplicației). */
:root { --font-sans: "DM Sans"; --font-serif: "Fraunces"; --tab-h: 0px; }
body { padding-bottom: 0; }
.bb-nav a { text-decoration: none; font-size: 14px; color: var(--cerneala-2); padding: 6px 10px; border-radius: 8px; }
.bb-nav a:hover { background: var(--hartie-2); color: var(--cerneala); }
.bb-sec { padding: 88px 0; border-top: 1px solid var(--linie); }
.bb-sec:first-of-type { border-top: 0; }
.bb-head { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-bottom: 40px; }
.bb-head .num { font-family: var(--font-serif), serif; font-size: 15px; color: var(--ghinda-text); }
.bb-head p.lead { margin-top: 12px; max-width: 640px; }
.bb-cover { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 56px 0 88px; }
.bb-cover .insigna { justify-self: center; width: min(400px, 90%); aspect-ratio: 1; border-radius: 50%; background: var(--alb); box-shadow: var(--umbra); display: grid; place-items: center; }
.bb-cover .insigna img { width: 82%; }
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.tile { background: var(--alb); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--linie); padding: 26px; }
.tile.center { display: grid; place-items: center; text-align: center; }
.tile h3 { margin-top: 14px; }
.tile p { color: var(--cerneala-2); font-size: 14.5px; margin-top: 6px; }
.tile.dark, .tile.dark p { color: var(--alb); }
.tile.dark .soft { color: #D7E5D9; }
.ico { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.ico.lg { width: 28px; height: 28px; }
.universe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.universe > div { padding: 24px 22px 26px 0; }
.universe > div + div { padding-left: 22px; border-left: 1px solid var(--linie); }
.universe .ico { color: var(--stejar); }
.universe p { color: var(--cerneala-2); font-size: 14.5px; margin-top: 4px; }
.manifest { font-family: var(--font-serif), serif; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -.01em; max-width: 30ch; margin-top: 40px; }
.swatch { border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie); background: var(--alb); }
.swatch .chip-c { height: 120px; display: flex; align-items: flex-end; padding: 14px; font-family: var(--font-serif), serif; font-size: 22px; }
.swatch .meta { padding: 12px 14px 14px; font-size: 13px; color: var(--cerneala-2); }
.swatch .meta b { color: var(--cerneala); font-weight: 600; }
.aa { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--stejar-ton); color: var(--stejar-2); margin: 6px 4px 0 0; }
.aa.no { background: var(--maces-ton); color: var(--maces-text); }
.spec { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.spec .k { font-size: 13px; color: var(--cerneala-2); }
.spec .k b { display: block; color: var(--cerneala); font-size: 14px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.icon-grid > div { background: var(--alb); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linie); padding: 18px 8px 12px; display: grid; justify-items: center; gap: 10px; font-size: 12.5px; color: var(--cerneala-2); }
.icon-grid .ico { width: 26px; height: 26px; color: var(--cerneala); }
.demo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.label-sm { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cerneala-2); font-weight: 650; margin-bottom: 12px; }
.phones { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.phone { width: 270px; border-radius: 42px; background: #121110; padding: 10px; box-shadow: 0 40px 70px -40px rgba(31, 28, 24, .55); }
.phone img { width: 100%; border-radius: 33px; display: block; }
.phone + figcaption, figure figcaption { text-align: center; font-size: 13.5px; color: var(--cerneala-2); margin-top: 14px; max-width: 270px; }
figure { margin: 0; }
.browser { border-radius: 14px; overflow: hidden; box-shadow: var(--umbra), inset 0 0 0 1px var(--linie); background: var(--alb); }
.browser .bar { height: 34px; display: flex; gap: 7px; align-items: center; padding: 0 14px; background: var(--hartie-2); }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--kraft); }
.browser img { width: 100%; display: block; }
.do, .dont { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; font-size: 15px; color: var(--cerneala-2); }
.do li, .dont li { display: flex; gap: 10px; }
.do .ico { color: var(--stejar); width: 20px; height: 20px; flex: none; }
.dont .ico { color: var(--maces); width: 20px; height: 20px; flex: none; }
.voice { width: 100%; border-collapse: collapse; font-size: 15px; }
.voice th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cerneala-2); padding: 0 0 10px; }
.voice td { padding: 14px 16px 14px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.voice td:first-child { color: var(--cerneala-3); text-decoration: line-through; width: 34%; }
@media (max-width: 900px) {
  .bb-head, .bb-cover { grid-template-columns: 1fr; }
  .bb-cover .insigna { display: none; }
  .s3, .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; }
  .universe { grid-template-columns: 1fr 1fr; }
  .universe > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .universe > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .spec { grid-template-columns: 1fr; gap: 6px; }
  .bb-nav { display: none; }
}