/* Intellibert brand layer — derived from Nukipa/Intellibert LinkedIn assets.
   Charcoal base, blurred olive + teal glows, film grain, dot + sans/serif-italic wordmark. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --charcoal: #1b1c1b;
  --charcoal-2: #141514;
  --olive: #7f9c3b;
  --olive-2: #5d7a2c;
  --moss: #2f5a33;
  --teal: #17493d;
  --teal-2: #0f3a33;
  --paper: #f1f1ec;
  --mute: #9aa39a;
  --line: rgba(241, 241, 236, .10);
  --accent: #a8d46a;
  --sans: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
}

/* Wordmark: ● Intelli*bert* */
.wordmark { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--sans); font-weight: 400; letter-spacing: -.035em; color: var(--paper); line-height: 1; white-space: nowrap; }
.wordmark .dot { width: .62em; height: .62em; border-radius: 50%; flex: none; margin-right: .2em; align-self: center; transform: translateY(.04em);
  background: radial-gradient(circle at 35% 30%, #fff 0%, #ececec 45%, #bdbdbd 100%);
  box-shadow: inset -.04em -.06em .1em rgba(0,0,0,.25), 0 0 .25em rgba(255,255,255,.08); }
.wordmark i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.08em; }
.wordmark .tld { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: .7em; margin-left: .06em; letter-spacing: 0; }

/* Blurred glow field */
.glow { position: fixed; inset: 0; overflow: hidden; background: var(--charcoal); z-index: 0; pointer-events: none; }
.glow span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .9; will-change: transform; }
.glow .g1 { width: 46vw; height: 70vh; left: -14vw; bottom: -18vh; background: radial-gradient(circle, var(--olive) 0%, var(--moss) 45%, transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.glow .g2 { width: 60vw; height: 80vh; right: -12vw; top: -20vh; background: radial-gradient(circle, var(--teal) 0%, var(--teal-2) 50%, transparent 72%); animation: drift2 32s ease-in-out infinite alternate; }
.glow .g3 { width: 26vw; height: 36vh; right: -6vw; top: -10vh; background: radial-gradient(circle, var(--olive-2) 0%, transparent 70%); opacity: .75; animation: drift3 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(6vw, -6vh) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-8vw, 8vh) scale(.94); } }
@keyframes drift3 { to { transform: translate(-4vw, 6vh) scale(1.15); } }

/* Film grain (washed look) */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift .6s steps(3) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1.5%)} 66%{transform:translate(1.5%,-2%)} }

@media (prefers-reduced-motion: reduce) { .glow span, .grain { animation: none !important; } }