/* 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)}