/* ============================================================
   despre.css — linked only from despre.html: what the shared components
   (host.css §12) do not cover. Tokens only, so every rule works on black
   and on the white sheets (.inv).
   Page order (11.09.2026): hero · band · who we are (white) · what it runs
   on (black: the map) · how we work (white: the step line) · contact.
   Draw-in states sit under @media (scripting:enabled): with no script the
   map and the step line show finished, never half-drawn.
   ============================================================ */
.ab-copy h2,.shead h2{text-wrap:balance}

/* ---- hero card: after the four rows, the one number that answers for all of them ---- */
.ab-one{display:grid;gap:4px;padding:18px 20px 20px;border-top:1px solid var(--w05)}
.ab-one .l{font-family:var(--fd);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--w30)}
.ab-one a{justify-self:start;margin-top:6px;font-family:var(--fd);font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color var(--t1) var(--e)}
.ab-one a:hover{color:var(--w72)}
.ab-one small{font-size:12px;line-height:1.5;color:var(--w42)}

/* ---- who we are: eyebrow, title and text outside a .shead, beside the company sheet ---- */
.ab-copy .eyebrow{margin-bottom:26px}
.ab-copy h2{margin-bottom:24px}
.ab-copy .lead{margin-bottom:22px}
.ab-p{max-width:60ch;margin-bottom:16px;font-size:15px;line-height:1.72;color:var(--w56)}
.ab-copy .tlink{margin-top:14px}
.ab-firm-n{margin:16px 0 10px;font-family:var(--fd);font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.1;
  letter-spacing:-.01em;color:var(--ink)}
.ab-firm .nbtx-rows div{align-items:baseline}
.ab-firm .nbtx-rows b{font-weight:400;text-align:right;color:var(--w96)}
@media (max-width:520px){
  .ab-firm .nbtx-rows div{flex-direction:column;gap:2px}
  .ab-firm .nbtx-rows b{text-align:left}
}

/* ---- what it runs on: the map. Row 1 = a visit's path (domain → DNS → server → your account);
        under the server, the backup's path (daily copy → encrypted copy, kept apart).
        Seven columns: node · wire · node · wire · node · wire · node; the backup row reuses
        columns 5–7, so it hangs exactly under the server and the account ---- */
.ab-map{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;padding:clamp(24px,3.2vw,48px)}
.ab-map>*{position:relative;z-index:2}
.ab-grid{--wg:clamp(32px,3.4vw,52px);display:grid;align-items:center;row-gap:14px;
  grid-template-columns:minmax(0,1fr) var(--wg) minmax(0,1fr) var(--wg) minmax(0,1fr) var(--wg) minmax(0,1fr)}
.ab-row-l{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--w56)}
.ab-row-l::before{content:"";flex:none;width:20px;height:1px;background:var(--w30)}
.ab-row-l.r1{grid-column:1/-1;grid-row:1;margin-bottom:6px}
.ab-row-l.r2{grid-column:1/4;grid-row:4;justify-self:end;flex-direction:row-reverse}

.ab-n{--nd:0s;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:3px;
  align-items:center;align-content:center;align-self:stretch;min-width:0;padding:18px;border-radius:18px;border:1px solid var(--w08);
  background:linear-gradient(180deg,rgb(255 255 255/.05),rgb(255 255 255/.012));
  transition:opacity .7s var(--e) var(--nd),border-color .7s var(--e) var(--nd)}
.ab-ic{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  border:1px solid var(--w12);background:var(--w03);color:var(--w72)}
.ab-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ab-n .k{align-self:end;min-width:0;font-family:var(--fd);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w56);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-n b{align-self:start;min-width:0;font-family:var(--fm);font-size:13px;font-weight:400;line-height:1.4;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the server is the hub: brighter rim, a lift of light under it, three activity LEDs */
.ab-n.hub{border-color:var(--w30);background:linear-gradient(180deg,rgb(255 255 255/.1),rgb(255 255 255/.025));
  box-shadow:0 22px 50px -26px rgb(255 255 255/.3)}
.ab-n.hub .ab-ic{color:#fff;border-color:var(--w30);background:var(--w05)}
.ab-leds{position:absolute;top:12px;right:12px;display:flex;gap:4px}
.ab-leds i{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.2;animation:abLed 2.4s var(--e-soft) infinite}
.ab-leds i:nth-child(2){animation-delay:.3s}
.ab-leds i:nth-child(3){animation-delay:.6s}
@keyframes abLed{0%,100%{opacity:.2;box-shadow:none}30%{opacity:1;box-shadow:0 0 6px rgb(255 255 255/.8)}}

/* wires: dashed, with an arrow head and one packet riding them */
.ab-w{--wd:0s;position:relative;display:block;transition:transform .9s var(--e) var(--wd)}
.ab-w.h{align-self:center;height:1px;margin-inline:8px;transform-origin:left center;
  background:repeating-linear-gradient(90deg,var(--w42) 0 4px,transparent 4px 9px)}
.ab-w.h::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid var(--w72);border-right:1px solid var(--w72);transform:rotate(45deg)}
.ab-w.v{justify-self:center;width:1px;transform-origin:center top;
  background:repeating-linear-gradient(180deg,var(--w42) 0 4px,transparent 4px 9px)}
.ab-w.v::after{content:"";position:absolute;bottom:0;left:-3.5px;width:8px;height:8px;
  border-right:1px solid var(--w72);border-bottom:1px solid var(--w72);transform:rotate(45deg)}
.ab-w>i{position:absolute;opacity:0;animation:var(--pk,abPktX) var(--pd,2.8s) var(--e-soft) var(--pl,0s) infinite}
.ab-w.h>i{left:0;right:0;top:-3px;height:7px}
.ab-w.v>i{--pk:abPktY;top:0;bottom:0;left:-3px;width:7px}
.ab-w>i::before{content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px rgb(255 255 255/.75)}
.ab-w.v>i::before{left:0;top:-3px}
@keyframes abPktX{0%{transform:translateX(0);opacity:0}14%,84%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@keyframes abPktY{0%{transform:translateY(0);opacity:0}14%,84%{opacity:1}100%{transform:translateY(100%);opacity:0}}

/* places + the order the map lights up in (a visit first, then the backup) */
.ab-n1{grid-column:1;grid-row:2;--nd:.1s}
.ab-w1{grid-column:2;grid-row:2;--wd:.25s}
.ab-n2{grid-column:3;grid-row:2;--nd:.4s}
.ab-w2{grid-column:4;grid-row:2;--wd:.55s}
.ab-n3{grid-column:5;grid-row:2;--nd:.7s}
.ab-w3{grid-column:6;grid-row:2;--wd:.85s}
.ab-n4{grid-column:7;grid-row:2;--nd:1s}
/* 84px tall, 28px of it inside the two row gaps: the wire runs from the server's edge to the backup's */
.ab-w4{grid-column:5;grid-row:3;height:84px;margin-block:-14px;--wd:1s}
.ab-n5{grid-column:5;grid-row:4;--nd:1.2s}
.ab-w5{grid-column:6;grid-row:4;--wd:1.35s}
.ab-n6{grid-column:7;grid-row:4;--nd:1.5s}
.ab-w2>i{--pl:.55s}
.ab-w3>i{--pl:1.1s}
.ab-w4>i{--pd:4.2s;--pl:.4s}
.ab-w5>i{--pd:4.2s;--pl:2.3s}
@media (scripting:enabled){
  .ab-map:not(.in) .ab-n{opacity:.16}
  .ab-map:not(.in) .ab-w.h{transform:scaleX(0)}
  .ab-map:not(.in) .ab-w.v{transform:scaleY(0)}
}
@media (max-width:1180px) and (min-width:901px){
  .ab-ic{display:none}
  .ab-n{grid-template-columns:minmax(0,1fr);padding:14px}
}
.ab-cap{margin-top:clamp(20px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--w05);
  font-size:11.5px;line-height:1.5;color:var(--w56)}

/* one column below 900px: the nodes stack, every wire turns vertical, the backup row follows */
@media (max-width:900px){
  .ab-grid{grid-template-columns:minmax(0,1fr);row-gap:0;max-width:440px;margin-inline:auto}
  .ab-grid>*{grid-column:1!important;grid-row:auto!important}
  .ab-w.h,.ab-w.v{justify-self:center;align-self:auto;width:1px;height:34px;margin:0;transform-origin:center top;
    background:repeating-linear-gradient(180deg,var(--w42) 0 4px,transparent 4px 9px)}
  .ab-w.h::after{top:auto;right:auto;bottom:0;left:-3.5px;border:0;
    border-right:1px solid var(--w72);border-bottom:1px solid var(--w72)}
  .ab-w.h>i{--pk:abPktY;left:-3px;right:auto;top:0;bottom:0;width:7px;height:auto}
  .ab-w.h>i::before{left:0;top:-3px}
  .ab-w4{display:none}
  .ab-row-l{margin:0 0 14px}
  .ab-row-l.r2{justify-self:start;flex-direction:row;margin-top:32px}
}
@media (scripting:enabled) and (max-width:900px){.ab-map:not(.in) .ab-w.h{transform:scaleY(0)}}

/* the legend: one sentence per point of the map, numbered like it */
.ab-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,3vw,48px);
  margin-top:clamp(40px,5vw,64px)}
.ab-legend>li{padding-top:20px;border-top:1px solid var(--w08)}
.ab-legend b{display:block;margin-bottom:14px;font-family:var(--fm);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--w56)}
.ab-legend h3{margin-bottom:10px;font-size:17px;font-weight:500;letter-spacing:-.018em;line-height:1.25}
.ab-legend p{font-size:14px;line-height:1.65;color:var(--w56)}
.ab-legend a{color:var(--w72);text-decoration:underline;text-underline-offset:3px;transition:color var(--t1) var(--e)}
.ab-legend a:hover{color:#fff}
@media (max-width:980px){.ab-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab-legend{grid-template-columns:1fr}}

/* leaving: no lock-in, said once, as the section's last word */
.ab-exit{display:flex;align-items:center;gap:18px;margin-top:clamp(40px,4.6vw,60px);padding:18px 24px 18px 18px;
  border-radius:var(--r-m);border:1px solid var(--w12);background:linear-gradient(90deg,var(--w05),var(--w03) 60%,transparent)}
.ab-exit-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--w18);background:var(--w05);color:#fff}
.ab-exit-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ab-exit p{font-size:14.5px;line-height:1.6;color:var(--w72)}
.ab-exit b{font-weight:500;color:#fff}
.ab-exit a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ab-infra .cmp-note{margin-top:26px}
@media (max-width:560px){.ab-exit{align-items:flex-start;padding:16px}}

/* ---- how we work: six steps on one line that draws itself (vertical below 1100px) ---- */
.ab-how{padding:var(--sec) var(--pad)}
.ab-how-in{max-width:var(--maxw);margin-inline:auto}
.ab-steps{--dot:46px;--gp:clamp(16px,2vw,30px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gp)}
.ab-steps>li{--sd:0s;position:relative}
.ab-steps>li:nth-child(2){--sd:.3s}
.ab-steps>li:nth-child(3){--sd:.6s}
.ab-steps>li:nth-child(4){--sd:.9s}
.ab-steps>li:nth-child(5){--sd:1.2s}
.ab-steps>li:nth-child(6){--sd:1.5s}
/* the line to the next dot: a faint rail (::before) and the ink drawn over it (::after) */
.ab-steps>li:not(:last-child)::before,.ab-steps>li:not(:last-child)::after{content:"";position:absolute;
  top:calc(var(--dot) / 2);left:calc(var(--dot) + 10px);right:calc(10px - var(--gp));height:1px}
.ab-steps>li:not(:last-child)::before{background:var(--w12)}
.ab-steps>li:not(:last-child)::after{background:var(--ink);transform-origin:left center;
  transition:transform .7s var(--e) calc(var(--sd) + .25s)}
/* the dot: a black bead once reached (the same bead as the open FAQ row) */
.ab-dot{position:relative;display:grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;
  border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;font-family:var(--fd);font-size:11px;letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 -2px 5px rgb(0 0 0/.5),0 8px 18px -10px rgb(0 0 0/.5);
  transition:background .5s var(--e) var(--sd),color .5s var(--e) var(--sd),border-color .5s var(--e) var(--sd),
    box-shadow .5s var(--e) var(--sd)}
@media (scripting:enabled){
  .ab-steps:not(.in)>li::after{transform:scaleX(0)}
  .ab-steps:not(.in) .ab-dot{background:rgb(255 255 255/.8);border-color:var(--w12);color:var(--w72);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px rgb(10 10 10/.08),0 4px 10px -4px rgb(0 0 0/.2)}
}
.ab-steps>li.you .ab-dot{background:#fff;border:1.5px solid #0a0a0a;color:#0a0a0a;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgb(0 0 0/.35)}
.ab-key{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:-18px 0 clamp(34px,4vw,54px);
  font-size:12.5px;color:var(--w56)}
.ab-key span{display:inline-flex;align-items:center;gap:9px}
.ab-key i{width:12px;height:12px;border-radius:50%;background:#0a0a0a}
.ab-key i.you{background:#fff;border:1.5px solid #0a0a0a}
.ab-steps h3{margin:22px 0 8px;font-size:16.5px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.ab-steps p{font-size:13.5px;line-height:1.62;color:var(--w56)}
.ab-steps p a:not(.ast){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){
  .ab-steps{grid-template-columns:minmax(0,1fr);gap:0;max-width:620px;margin-inline:auto}
  .ab-steps>li{display:grid;grid-template-columns:var(--dot) minmax(0,1fr);column-gap:22px;align-content:start;padding-bottom:30px}
  .ab-steps>li:last-child{padding-bottom:0}
  .ab-dot{grid-row:1/3}
  .ab-steps h3{margin:12px 0 6px}
  .ab-steps>li:not(:last-child)::before,.ab-steps>li:not(:last-child)::after{top:calc(var(--dot) + 8px);bottom:8px;
    left:calc(var(--dot) / 2);right:auto;width:1px;height:auto}
  .ab-steps>li:not(:last-child)::after{transform-origin:center top}
}
@media (scripting:enabled) and (max-width:1100px){.ab-steps:not(.in)>li::after{transform:scaleY(0)}}
.ab-note{max-width:74ch;margin:clamp(40px,5vw,64px) auto 0;padding-top:22px;border-top:1px solid var(--w08);
  text-align:center;font-size:13px;line-height:1.65;color:var(--w56)}
.ab-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ab-w>i,.ab-leds i{animation:none}
  .ab-leds i{opacity:.6}
  .ab-n,.ab-w,.ab-dot,.ab-steps>li::after{transition:none}
}