/* TRADEX "Fracht" round 3: e-commerce data, seal badges, partners, tech-stack graphic. */
@layer components {
  .section--data { background: var(--paper-2); }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .8rem; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
  .kpi { background: var(--white); border: 1px solid var(--border); padding: 1.2rem 1.3rem; display: grid; gap: .5rem; }
  .kpi dt { font-family: var(--f-d); font-weight: 900; font-size: var(--s-4); line-height: .8; color: var(--blue); }
  .kpi dd b { display: block; font-weight: 700; }
  .kpi dd small { color: var(--mut); font-size: .82rem; }
  .charts { display: grid; gap: .8rem; }
  @media (min-width: 64rem) { .charts { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
  .chart { background: var(--white); border: 1px solid var(--border); padding: 1.2rem 1.3rem 1rem; display: grid; gap: .8rem; align-content: start; margin: 0; }
  .chart figcaption { display: grid; gap: .25rem; }
  .chart figcaption b { font-size: 1.05rem; }
  .chart figcaption .mono { color: var(--mut); font-size: .64rem; }
  .chart__plot { position: relative; }
  .chart__note { color: var(--mut); font-size: .88rem; }
  .ch { display: block; width: 100%; height: auto; overflow: visible; }
  .ch text { font: 500 10px/1 var(--f-m); fill: var(--mut); }
  .ch__grid line { stroke: var(--border); stroke-width: 1; }
  .ch__area { fill: rgb(35 97 141 / .1); }
  .ch__line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .ch__cross { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
  .ch__dot { fill: var(--blue); stroke: var(--white); stroke-width: 2; opacity: 0; }
  .ch__hits rect, .ch__hit { fill: transparent; cursor: crosshair; }
  .chart__plot.hov .ch__cross, .chart__plot.hov .ch__dot { opacity: 1; }
  .ch__bar path { fill: var(--blue); transition: fill .15s; }
  .ch__bar:hover path { fill: var(--blue-d); }
  .ch .ch__lbl { font: 600 12px/1 var(--f-s); fill: var(--text); }
  .ch .ch__val { font: 700 11px/1 var(--f-m); fill: var(--text); }
  .ch__base { stroke: var(--text); stroke-width: 1; }
  .ch__tip { position: absolute; z-index: 5; pointer-events: none; background: var(--g1); color: #f4f3f1; padding: .45rem .6rem;
    font: 500 .72rem/1.4 var(--f-m); white-space: nowrap; translate: -50% calc(-100% - 12px); box-shadow: var(--shadow); }
  .ch__tip b { display: block; color: #fff; }
  .ch__table summary { cursor: pointer; color: var(--blue); font-size: .66rem; }
  .ch__table table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .8rem; }
  .ch__table th, .ch__table td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
  .ch__table { max-height: 18rem; overflow: auto; }

  /* seals: our own designs (see parts.py for why not the official marks) */
  .sl { width: 100%; height: auto; display: block; }
  .sl__ring { fill: var(--c); }
  .sl__in { fill: #fff; }
  .sl__dash { fill: none; stroke: var(--c); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: .6; }
  .sl__ringtxt { font: 700 8.2px/1 var(--f-m); letter-spacing: .12em; fill: #fff; }
  .sl__pip { fill: #fff; }
  .sl__big { font: 900 30px/1 var(--f-d); fill: var(--c); letter-spacing: .01em; }
  .sl__big--s { font-size: 19px; }
  .sl__sub { font: 700 8.5px/1 var(--f-m); fill: #1c1b1b; letter-spacing: .04em; }
  .sl__ce { fill: var(--c); }
  .sl--blue { --c: #23618D; } .sl--navy { --c: #1d3557; } .sl--graphite { --c: #3c3a3a; }
  .sl--green { --c: #2f6b4f; } .sl--red { --c: #c8102e; }
  .seal-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.6rem 1.2rem; }
  .slw { display: grid; justify-items: center; gap: .7rem; text-align: center; }
  .slw svg { width: min(100%, 7.6rem); transition: rotate .8s var(--ease); }
  .slw:hover svg { rotate: -8deg; }
  .slw span { font-size: .8rem; color: var(--mut); line-height: 1.35; max-width: 16ch; }
  .minis { display: flex; flex-wrap: wrap; gap: .6rem; }
  .minis li { width: 4.4rem; }

  /* partners + stack */
  .section--partners { padding-top: clamp(2rem, 5vw, 4rem); }
  .partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8rem; }
  .pl { background: var(--white); border: 1px solid var(--border); display: grid; grid-template-rows: 6.5rem auto; }
  .pl__logo { display: grid; place-items: center; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--border); }
  .pl__logo img { max-height: 3.4rem; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; }
  .pl:hover .pl__logo img { filter: none; opacity: 1; }
  .pl__role { padding: .7rem 1rem; color: var(--mut); font-size: .64rem; }
  .tk__head { color: var(--blue); margin: clamp(1.8rem, 4vw, 2.8rem) 0 .9rem; }
  .stackrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .6rem; }
  .tk { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border: 1px solid var(--border); background: var(--white); color: var(--text); }
  .tk svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--grey); transition: color .2s; }
  .tk:hover svg { color: var(--blue); }
  .tk b { display: block; font-size: .88rem; line-height: 1.2; }
  .tk small { color: var(--mut); font-size: .74rem; }

  /* tech-stack graphic: 3 phases cycled by site.js (.p1 .p2 .p3) */
  .sk { background: var(--g1); color: #f4f3f1; padding: clamp(.8rem, 2vw, 1.4rem); display: grid; gap: .8rem; margin: 0; }
  .sk svg { width: 100%; height: auto; display: block; overflow: visible; }
  .sk__orbit { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1; stroke-dasharray: 3 5; }
  .sk__odoo { fill: none; stroke: #875A7B; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9;
    transition: stroke-dashoffset 2.4s var(--ease); transform: rotate(-90deg); transform-origin: 300px 250px; }
  .sk__spoke { stroke: rgb(255 255 255 / .16); stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke .5s; }
  .sk__agent { fill: var(--blue-l); opacity: 0; transition: opacity .5s; }
  .sk__hub circle { fill: var(--blue); stroke: rgb(255 255 255 / .3); stroke-width: 6; }
  .sk__hub text { font: 800 19px/1 var(--f-d); fill: #fff; text-transform: uppercase; }
  .sk__hub .sk__hubsub { font: 500 10px/1 var(--f-m); letter-spacing: .08em; fill: rgb(255 255 255 / .8); }
  .sk__node > circle { fill: var(--g3); stroke: rgb(255 255 255 / .2); stroke-width: 1.5; transition: stroke .4s; }
  .sk__node svg { color: #d9d6d3; }
  .sk__node > text { font: 600 10px/1 var(--f-m); fill: #d9d6d3; text-transform: uppercase; letter-spacing: .04em; }
  .sk__tag { opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i) * .25s); }
  .sk__tag rect { fill: #875A7B; } .sk__tag text { font: 700 9px/1 var(--f-m); fill: #fff; }
  .sk.p1 .sk__agent, .sk.p2 .sk__agent, .sk.p3 .sk__agent { opacity: 1; }
  .sk.p1 .sk__node > circle, .sk.p2 .sk__node > circle, .sk.p3 .sk__node > circle { stroke: var(--blue-l); }
  .sk.p2 .sk__spoke, .sk.p3 .sk__spoke { stroke: var(--blue-l); stroke-dasharray: none; }
  .sk.p3 .sk__odoo { stroke-dashoffset: 0; }
  .sk.p3 .sk__tag { opacity: 1; }
  .sk__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; font-size: .66rem; }
  .sk__steps li { border-top: 3px solid rgb(255 255 255 / .15); padding-top: .5rem; color: #b9b5b2; transition: border-color .4s, color .4s; }
  .sk__steps b { display: block; color: #fff; font-size: .78rem; }
  .sk.p1 .sk__steps li:nth-child(1), .sk.p2 .sk__steps li:nth-child(-n+2), .sk.p3 .sk__steps li { border-color: var(--blue-l); color: #f4f3f1; }
  .sk.p3 .sk__steps li:nth-child(3) { border-color: #875A7B; }
  @media (prefers-reduced-motion: reduce) { .sk .sk__agents { display: none; } }

  .cmp { display: grid; gap: .7rem; margin-top: .9rem; }
  .cmp__row { display: grid; gap: .3rem; }
  .cmp__lbl { font-size: .64rem; color: var(--mut); }
  .cmp__bar { display: flex; height: 2.1rem; background: var(--white); border: 1px solid var(--border); overflow: clip; }
  .cmp__seg { font-style: normal; display: flex; align-items: center; padding: 0 .7rem; font: 600 .72rem/1.1 var(--f-s); white-space: nowrap; overflow: hidden; }
  .cmp__seg--wait { flex: 3; background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--white) 8px 16px); color: var(--mut); }
  .cmp__seg--gain { flex: 1; background: var(--blue); color: #fff; }
  .cmp__seg--now { flex: 1 1 100%; background: linear-gradient(90deg, var(--blue), #3f7aa6 70%, #875A7B); }
}

@layer components { @media (max-width: 40rem) { .sk__node > text { font-size: 12px; } .sk__steps { grid-template-columns: 1fr; } .fmap__ctl button { width: 1.8rem; height: 1.8rem; font-size: .85rem; } } }
@layer components { @media (max-width: 40rem) { .chart__plot { overflow-x: auto; } .ch--bars { min-width: 25rem; } .ch--line { min-width: 32rem; } } }