/* SPOJITI BRAND IDENTITY — ONE SOURCE (b262).
   Every spojiti.world page links this file; NO page may define these rules
   inline. Born 2026-08-26 after the CEO caught the footer wordmark not
   matching the header: 14 self-contained pages had grown two .brand img
   variants, two .grad recipes and a one-off footer size. Same cure as the
   logo (mark-v5, canonical source): brand identity is copied by REFERENCE,
   never by hand.
   Versioned name because assets cache for SEVEN DAYS — a change here ships
   under a NEW filename plus a link bump in every page, never an in-place
   edit. v1 -> v2 on the same day this file was born, because the hover
   rules were appended to v1 after v1 was already deployed: the box served
   the new bytes, every browser that had loaded the page once kept the old
   ones, and the CEO saw hovers that would not change. Third time this
   cache has bitten (mark.svg, screenshots, this) — the rule is not
   optional. Pages own their palette vars (--green/--cyan/--blue/
   --purple, light + dark); this file only consumes them. */

.grad{background:linear-gradient(100deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}

/* The lockup — header (.brand) and footer (.fbrand) are IDENTICAL:
   34px mark, 30px gradient wordmark, same gap, same glow. */
.brand,.fbrand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.brand{flex:0 0 auto}
.fbrand{margin-bottom:8px}
.brand img,.fbrand img{width:34px;height:34px;display:block;filter:drop-shadow(0 0 10px rgba(11,106,239,.45))}
.brand>span,.fbrand>span{font-size:30px;line-height:34px;letter-spacing:-.6px;background:linear-gradient(100deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.4px;color:var(--muted);margin-top:-3px}

/* The tagline — footer size (.dots) and hero size (.tagline). Green
   Private · blue Secure · purple Direct, dot before each word, everywhere. */
.dots span{font-weight:700;font-size:13px;margin-right:14px}
.dots span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.tagline{display:flex;gap:26px;justify-content:center;margin:14px 0 26px;font-weight:600;font-size:17px}
.tagline span::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px}
.dg,.tg{color:var(--green)}.dg::before,.tg::before{background:var(--green)}
.db,.tb{color:var(--blue)}.db::before,.tb::before{background:var(--blue)}
.dp,.tp{color:var(--purple)}.dp::before,.tp::before{background:var(--purple)}

/* NAV + FOOTER LINK BEHAVIOUR (CEO, 2026-08-26). Shared here for the same
   reason the wordmark is: a hover that differs per page is the same scatter.
   Menu item on hover = brand gradient TEXT, no grey plate. 90deg here,
   not the lockup's 100deg: a one-word box is wider than it is tall, and at
   100deg the sweep runs mostly vertically so the word shows only the middle
   of the ramp. Horizontal puts the whole green-to-purple sweep across it. The active item's
   gradient underline (.links a.on::after) is a child element and is
   unaffected by the text clip, so hovering the current page still shows both.
   Footer links go brand purple — var(--purple) is the deep #9003CE on the
   light theme and the bright #A504EC on dark, so it reads as dark purple
   where the CEO asked for it and stays legible where it could not. */
.links a{transition:color .16s ease,background-color .16s ease}
.links a:hover,.links a.on:hover{background:linear-gradient(90deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
footer.site a{transition:color .16s ease}
footer.site a:hover,.fcols a:hover{color:var(--purple)}

/* b266 (2026-08-27, CEO): the HEADER lockup two sizes smaller — mark 34->28,
   word 30->24. Footer (.fbrand) keeps the original scale on purpose.
   New filename (v2->v3) per the 7-day asset-cache rule. */
.brand img{width:28px;height:28px}
.brand>span{font-size:24px;line-height:28px;letter-spacing:-.45px}

/* ───────────────────────────────────────────────────────────────────────────
   v4 (2026-08-29) · THE BETA MARK.
   v3 plus one addition: a small "Beta" tag riding after the wordmark, so a
   visitor knows in the first half-second that this is not the finished
   product. CEO ask, 2026-08-29.

   NEW FILE = NEW NAME (brand-v5.css next time). Assets are cached seven days
   and this file has no fingerprint in its content, so re-cutting brand-v3.css
   in place would have left every returning visitor on the old stylesheet for
   a week while the box served the new one perfectly. That exact failure cost
   us the second-freeze logo rollout — see the Caddyfile note.

   Deliberately NOT the brand gradient. The wordmark owns the gradient; a
   status tag that competed with it would read as part of the name rather than
   a note about the build. Muted, outlined, lowercase-height — a label, not a
   badge, and it disappears the day production goes live by removing one span.
   ─────────────────────────────────────────────────────────────────────────── */
.brand .beta,.fbrand .beta{
  align-self:center;
  display:inline-block;
  margin-left:2px;
  padding:2px 7px 3px;
  border:1px solid var(--line,rgba(255,255,255,.18));
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
  -webkit-background-clip:border-box;
  background-clip:border-box;
}
@media (max-width:700px){
  .brand .beta,.fbrand .beta{font-size:9.5px;padding:2px 6px 3px;margin-left:1px}
}