/* EdgeLogia brand kit — shared tokens, mark + wordmark styling */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --blue: #2776EA;
  --blue-light: #5AA0F5;
  --blue-hi: #7FB6F8;
  --blue-deep: #1A4FB0;
  --navy: #14346A;
  --navy-deep: #0E2550;
  --bg: #EDF1F7;
  --card: #FFFFFF;
  --line: #E2E8F1;
  --muted: #6B7A92;
  --sans: 'Poppins', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- arrow facet colors (set per context) ---- */
.ar { --c1: var(--blue); --c2: var(--blue-deep); --c3: var(--blue-hi); display: block; }
.ar.rev    { --c1: var(--blue-light); --c2: var(--blue); --c3: var(--blue-hi); }
.ar.mono   { --c1: var(--navy); --c2: var(--navy); --c3: var(--navy); }
.ar.white  { --c1: #FFFFFF; --c2: #FFFFFF; --c3: #FFFFFF; }
.ar.onblue { --c1: #FFFFFF; --c2: #CFE0FA; --c3: #FFFFFF; }
.mk { width: 100%; height: 100%; display: block; overflow: visible; }
.ar-light { fill: var(--c1); }
.ar-dark  { fill: var(--c2); }
.ar-hi    { fill: var(--c3); }
.gr-s { stroke: var(--c1); fill: none; }
.gr-f { fill: var(--c1); }

/* raster brand icon — navy by default, white in reversed contexts */
.mk-img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.ar .ic-w { display: none; }
.ar .ic-n { display: block; }
.ar.rev .ic-n, .ar.onblue .ic-n, .ar.white .ic-n { display: none; }
.ar.rev .ic-w, .ar.onblue .ic-w, .ar.white .ic-w { display: block; }

/* ---- wordmark ---- */
.word { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.word .w1 { color: var(--blue); }
.word .w2 { color: var(--navy); }
.tag { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); line-height: 1.25; }

/* colour modifiers on lockups */
.rev .w1 { color: var(--blue-light); }
.rev .w2 { color: #fff; }
.rev .tag { color: rgba(255,255,255,0.72); }
.mono-lk .w1, .mono-lk .w2, .mono-lk .tag { color: var(--navy); }
.white-lk .w1, .white-lk .w2, .white-lk .tag { color: #fff; }
.white-lk .w1 { color: var(--blue-hi); }

/* rounded app tile */
.tile { border-radius: 22%; display: flex; align-items: center; justify-content: center; }
.tile.blue { background: linear-gradient(150deg, #2F84F2, #1A57C8); }
.tile.navy { background: var(--navy); }
.tile .ar { width: 60%; height: 60%; }

.label { font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   ARTBOARDS — true-size assets (shared by artboard files + index)
   ============================================================ */

/* ---- Logo lockups (1600 wide) ---- */
.ab-logo { width: 1600px; }
.ab-logo .row { width: 1600px; height: 440px; display: flex; align-items: center; justify-content: center; }
.ab-logo .row.light { background: radial-gradient(120% 150% at 70% 0%, #FFFFFF 0%, #F3F7FC 55%, #E9EFF7 100%); }
.ab-logo .row.dark  { background: radial-gradient(120% 150% at 30% 0%, #1A4FB0 0%, #14346A 45%, #0E2550 100%); }
.ab-logo .row.paper { background: #FFFFFF; }
.ab-logo .lh { display: flex; align-items: center; gap: 44px; }
.ab-logo .lh .ar { width: 150px; height: 150px; flex: none; filter: drop-shadow(0 18px 30px rgba(20,52,106,0.18)); }
.ab-logo .lh.dark .ar { filter: drop-shadow(0 0 46px rgba(90,160,245,0.55)); }
.ab-logo .lh .txt { display: flex; flex-direction: column; gap: 16px; }
.ab-logo .lh .word { font-size: 132px; }
.ab-logo .lh .tag { font-size: 23px; letter-spacing: 0.07em; }
.ab-logo .ls { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.ab-logo .ls .ar { width: 132px; height: 132px; filter: drop-shadow(0 14px 26px rgba(20,52,106,0.16)); }
.ab-logo .ls .word { font-size: 104px; }
.ab-logo .ls .tag { font-size: 20px; letter-spacing: 0.09em; margin-top: 4px; }

/* ---- Favicon 512 ---- */
.ab-fav { width: 512px; height: 512px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #3A8BF4 0%, #2776EA 48%, #1A57C8 100%); }
.ab-fav::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(closest-side at 30% 22%, rgba(255,255,255,0.28), transparent 60%); }
.ab-fav::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 120%; height: 70%;
  background: linear-gradient(180deg, transparent, rgba(14,37,80,0.30)); transform: skewY(-8deg); }
.ab-fav .ar { position: relative; width: 320px; height: 320px;
  filter: drop-shadow(0 14px 22px rgba(14,37,80,0.32)); }

/* ---- YouTube 2560×1440 ---- */
.ab-yt { width: 2560px; height: 1440px; position: relative; overflow: hidden;
  background: radial-gradient(140% 120% at 50% 18%, #1F5BC4 0%, #14346A 46%, #0E2550 100%); }
.ab-yt .grid { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(115deg, rgba(122,182,248,0.05) 1px, transparent 1px),
                    linear-gradient(65deg,  rgba(122,182,248,0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px; }
.ab-yt .glow { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58,139,244,0.30), transparent 70%); }
.ab-yt .ribbon { position: absolute; left: -6%; bottom: -34%; width: 112%; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(8,24,56,0.55)); transform: skewY(-5deg); }
.ab-yt .safe { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 1546px; height: 423px; display: flex; align-items: center; justify-content: center; gap: 60px; }
.ab-yt .safe .ar { width: 230px; height: 230px; flex: none; filter: drop-shadow(0 0 60px rgba(90,160,245,0.6)); }
.ab-yt .safe .txt { display: flex; flex-direction: column; gap: 22px; }
.ab-yt .safe .word { font-size: 168px; }
.ab-yt .safe .tag { font-size: 30px; letter-spacing: 0.16em; font-weight: 600; }
.ab-yt .safe .rule { width: 96px; height: 5px; background: var(--blue-light); border-radius: 3px; margin: 4px 0 2px; }

/* ---- Facebook 1640×624 ---- */
.ab-fb { width: 1640px; height: 624px; position: relative; overflow: hidden;
  background: radial-gradient(130% 150% at 78% 12%, #FFFFFF 0%, #F1F6FC 52%, #E4ECF7 100%); }
.ab-fb .blob { position: absolute; right: -120px; top: -160px; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(39,118,234,0.14), transparent 70%); }
.ab-fb .grid { position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(115deg, rgba(20,52,106,0.04) 1px, transparent 1px),
                    linear-gradient(65deg,  rgba(20,52,106,0.04) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px; }
.ab-fb .inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 70px; }
.ab-fb .inner .ar { width: 240px; height: 240px; flex: none; filter: drop-shadow(0 24px 40px rgba(20,52,106,0.22)); }
.ab-fb .inner .txt { display: flex; flex-direction: column; gap: 20px; }
.ab-fb .inner .word { font-size: 130px; }
.ab-fb .inner .rule { width: 84px; height: 5px; background: var(--blue); border-radius: 3px; }
.ab-fb .inner .tag { font-size: 25px; letter-spacing: 0.1em; }

/* ---- LinkedIn 1584×396 ---- */
.ab-li { width: 1584px; height: 396px; position: relative; overflow: hidden;
  background: radial-gradient(150% 160% at 72% 6%, #1F5BC4 0%, #14346A 48%, #0E2550 100%); }
.ab-li .grid { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(115deg, rgba(122,182,248,0.06) 1px, transparent 1px),
                    linear-gradient(65deg,  rgba(122,182,248,0.06) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px; }
.ab-li .glow { position: absolute; right: 6%; top: 50%; width: 760px; height: 760px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58,139,244,0.30), transparent 70%); }
.ab-li .ribbon { position: absolute; left: -6%; bottom: -40%; width: 112%; height: 64%;
  background: linear-gradient(180deg, transparent, rgba(8,24,56,0.5)); transform: skewY(-5deg); }
.ab-li .inner { position: absolute; right: 96px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 52px; }
.ab-li .inner .txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; text-align: right; }
.ab-li .inner .word { font-size: 96px; }
.ab-li .inner .rule { width: 70px; height: 4px; background: var(--blue-light); border-radius: 3px; }
.ab-li .inner .tag { font-size: 20px; letter-spacing: 0.13em; font-weight: 600; }
.ab-li .inner .ar { width: 168px; height: 168px; flex: none; filter: drop-shadow(0 0 46px rgba(90,160,245,0.6)); }

/* ---- scaled-preview wrapper (index) ---- */
.scaler { position: relative; overflow: hidden; }
.scaler > * { transform-origin: top left; }