/* Brands — «مسیر داده»: data travels from the internet through security → network → compute into the organisation.
   Frosted rack-plate stations over the shared atmosphere, one teal path (SVG, built in brands.js). */
.brands{position:relative;isolation:isolate;padding:120px 0;overflow:clip}
.brands-inner{width:var(--container);margin:0 auto}

.brands-head{max-width:640px;margin:0 auto 88px;text-align:center}
.brands-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:var(--cyan);font-size:12px;line-height:1.6}
.brands-eyebrow span{display:block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(132,233,227,.1),0 0 17px rgba(132,233,227,.7)}
.brands-title{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.3;letter-spacing:-.05em;font-weight:700;color:var(--white);text-wrap:balance}
.brands-sub{margin:14px auto 0;max-width:560px;color:var(--muted);font-size:15px;line-height:1.9;text-wrap:pretty}

/* --brands-conn: distance from a station's top to its connector (centre of the logo zone). Endpoints share it. */
.brands-path{--brands-pad-t:30px;--brands-logo-h:84px;--brands-conn:calc(var(--brands-pad-t) + var(--brands-logo-h) / 2);position:relative}


.brands-line,.brands-fx{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.brands-line{z-index:1}
.brands-fx{z-index:3}

.brands-track{position:relative;z-index:2;display:flex;align-items:flex-start;gap:40px}

/* End points */
.brands-end{flex:0 0 80px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:calc(var(--brands-conn) - 4px);color:var(--muted);font-size:12px;line-height:1.6;text-align:center}
.brands-end__node{display:block;width:8px;height:8px;border-radius:50%;background:var(--navy);border:1px solid rgba(13,184,168,.7);box-shadow:0 0 0 4px rgba(13,184,168,.06);transition:background .9s var(--ease),box-shadow .9s var(--ease)}
.brands-end__node.brands-end__node--on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,209,193,.12),0 0 12px rgba(0,209,193,.5)}
.brands-end--end .brands-end__label{color:#a9bdc0}

/* Stations */
.brands-stations{flex:1 1 0;min-width:0;display:grid;grid-template-columns:repeat(var(--brands-n,3),minmax(0,1fr));column-gap:clamp(56px,8.4vw,104px);margin:0;padding:0;list-style:none}
.brands-station{position:relative;display:flex}

.brands-panel{--brands-frost:blur(24px) saturate(160%);--brands-shadow:0 24px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14);position:relative;isolation:isolate;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;padding:var(--brands-pad-t) 24px 30px;border-radius:16px;overflow:hidden;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,19,29,.34);box-shadow:var(--brands-shadow);-webkit-backdrop-filter:var(--brands-frost);backdrop-filter:var(--brands-frost);transition:box-shadow .45s var(--ease),opacity .8s var(--ease)}
.brands-panel:before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.brands-panel:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.075) 40%,rgba(255,255,255,.02) 52%,transparent 64%) 0 0/160% 100% no-repeat;-webkit-mask:linear-gradient(180deg,#000,transparent 62%);mask:linear-gradient(180deg,#000,transparent 62%);transition:background-position 2.4s var(--ease)}
.brands-panel:hover,.brands-panel:focus-visible{box-shadow:var(--brands-shadow),inset 0 0 0 1px rgba(0,209,193,.4)}
.brands-panel:hover:after,.brands-panel:focus-visible:after{background-position:20% 0}
.brands-panel:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* Hardware cues: rack-ear screws at both sides, status LEDs in the top (inline-end) corner. */
.brands-panel__ear{position:absolute;top:50%;z-index:1;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(230,243,241,.34),rgba(123,139,151,.14) 55%,rgba(5,13,20,.45));box-shadow:0 0 0 1px rgba(255,255,255,.05),inset 0 -1px 1px rgba(0,0,0,.35)}
.brands-panel__ear--s{inset-inline-start:11px}
.brands-panel__ear--e{inset-inline-end:11px}
.brands-panel__leds{position:absolute;top:16px;inset-inline-end:16px;z-index:1;display:flex;gap:4px}
.brands-panel__leds i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(0,209,193,.24)}
.brands-panel__leds i:last-child{background:rgba(0,209,193,.68);box-shadow:0 0 5px rgba(0,209,193,.45)}

.brands-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.brands-logos{position:relative;z-index:1;width:100%;height:var(--brands-logo-h);display:flex;align-items:center;justify-content:center;gap:20px}
.brands-meta{position:relative;z-index:1;width:100%;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
.brands-layer{margin:0 0 8px;color:var(--cyan);font-size:12px;font-weight:700;line-height:1.6}
.brands-text{margin:0;color:#a9bdc0;font-size:13px;line-height:2;text-wrap:pretty}

/* Logos are masks: any fill, gradient, glow or sweep renders exactly in the logo's shape. */
.brands-logo{position:relative;display:block;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(0,209,193,.2));transition:filter 1.2s var(--ease)}
.brands-logo__glyph{position:relative;display:block;width:0;height:0;overflow:hidden;opacity:.85;background:linear-gradient(180deg,#e6f3f1,#9fd3d0);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-size:contain;transition:opacity 1.2s var(--ease)}
.brands-logo__fill{position:absolute;inset:0;background:linear-gradient(180deg,#6ff3e9,var(--cyan) 70%);opacity:0;transition:opacity 1.2s var(--ease)}
.brands-logo__sweep{position:absolute;inset:0;opacity:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) 0 0/250% 100% no-repeat}
.brands-logo--lit,.brands-panel:hover .brands-logo,.brands-panel:focus-visible .brands-logo{filter:drop-shadow(0 0 8px rgba(0,209,193,.55)) drop-shadow(0 0 22px rgba(0,209,193,.24));transition-duration:.3s}
.brands-logo--lit .brands-logo__glyph,.brands-panel:hover .brands-logo__glyph,.brands-panel:focus-visible .brands-logo__glyph{opacity:1;transition-duration:.3s}
.brands-logo--lit .brands-logo__fill{opacity:var(--brands-lit,1);transition-duration:.3s}
.brands-panel:hover .brands-logo__fill,.brands-panel:focus-visible .brands-logo__fill{opacity:1;transition-duration:.3s}

/* Connectors on the station edges (in = inline-start / right, out = inline-end / left). */
.brands-port{position:absolute;top:calc(var(--brands-conn) - 3px);z-index:3;width:6px;height:6px;border-radius:50%;background:var(--cyan-2);opacity:.6;pointer-events:none}
.brands-port--in{inset-inline-start:-3px}
.brands-port--out{inset-inline-end:-3px}

/* Path */
.brands-line__base{fill:none;stroke:var(--cyan-2);stroke-width:1;opacity:.34}
.brands-line__fade{fill:none;stroke-width:1}
.brands-line__lane{fill:none;stroke:var(--cyan-2);stroke-width:1;opacity:.16}
.brands-line__glow{opacity:0}
.brands-line__glow path,.brands-line__sweep path{fill:none;stroke:var(--cyan);stroke-linecap:round}
.brands-line__g-blur{stroke-width:5;opacity:.4}
.brands-line__g-core{stroke-width:1.3}
.brands-line__sweep path{opacity:0}

/* Packets */
.brands-pk{opacity:0}
.brands-pk__glow{fill:var(--cyan);opacity:.5}
.brands-pk__tl,.brands-pk__ts{fill:none;stroke:var(--cyan);stroke-linecap:round;stroke-linejoin:round}
.brands-pk__tl{stroke-width:1.4;opacity:.22}
.brands-pk__ts{stroke-width:1.8;opacity:.6}
.brands-pk__head{fill:var(--cyan)}
.brands-pk--threat .brands-pk__glow,.brands-pk--threat .brands-pk__head{fill:#c8505a}
.brands-pk--threat .brands-pk__tl,.brands-pk--threat .brands-pk__ts{stroke:#c8505a}
.brands-pk--threat .brands-pk__glow{opacity:.35}
.brands-pk--pulse .brands-pk__head{fill:#d6fffb}
.brands-pk--pulse .brands-pk__glow{opacity:.7}
.brands-pk--pulse .brands-pk__tl{stroke-width:2;opacity:.3}
.brands-pk--pulse .brands-pk__ts{stroke-width:2.4;opacity:.75}

/* Shield (front layer) */
.brands-shield{opacity:0}
.brands-shield__glow{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;opacity:.32}
.brands-shield__core{fill:none;stroke:var(--cyan);stroke-width:1.4;stroke-linecap:round}
.brands-shield__ripple{fill:none;stroke:var(--cyan);stroke-width:1;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}

/* Entrance: stations wait dimmed until the first packet reaches them. Only armed by JS when motion is allowed. */
.brands--armed .brands-panel{opacity:.35}
.brands--armed .brands-station--lit .brands-panel{opacity:1}

@media (max-width:980px) and (min-width:681px){
  .brands-head{margin-bottom:72px}
  .brands-path{--brands-pad-t:22px;--brands-logo-h:64px}
  .brands-track{gap:20px}
  .brands-end{flex-basis:56px}
  .brands-panel{padding:var(--brands-pad-t) 14px 22px}
  .brands-panel__leds{top:11px;inset-inline-end:11px;gap:3px}
  .brands-panel__ear--s{inset-inline-start:6px}
  .brands-panel__ear--e{inset-inline-end:6px}
  .brands-meta{margin-top:16px;padding-top:14px}
  .brands-text{font-size:12.5px;line-height:1.9}
}
@media (max-width:680px){
  .brands{padding:80px 0}
  .brands-head{margin-bottom:56px}
  .brands-title{font-size:30px}
  .brands-sub{font-size:14px}
  .brands-path{--brands-pad-t:22px;--brands-logo-h:64px}
  /* Vertical path: the line runs down the right-hand (RTL start) gutter, 22px from the edge. */
  .brands-track{flex-direction:column;align-items:stretch;gap:28px}
  .brands-end{flex:0 0 auto;flex-direction:row;align-items:center;gap:12px;padding:0;padding-inline-start:18px;text-align:start}
  .brands-stations{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-inline-start:44px}
  .brands-panel{--brands-frost:blur(16px) saturate(160%);padding:var(--brands-pad-t) 22px 24px}
  .brands-port--out{display:none}
}
@media (prefers-reduced-motion:reduce){
  .brands-panel,.brands-panel:after,.brands-logo,.brands-logo__glyph,.brands-logo__fill,.brands-end__node{transition:none}
  .brands-shield{opacity:.55}
  .brands-end--end .brands-end__node{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,209,193,.12),0 0 12px rgba(0,209,193,.5)}
}