/* ============================================================
   C3n7ral051nt4g3ncy — Intelligence UI
   Black & white · cyber/intelligence type · animated, sober
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --bg:#070708; --bg2:#0e0e10; --panel:#101012; --panel2:#141417;
  --line:#242428; --line2:#333339;
  --ink:#f4f4f5; --ink2:#d2d2d6; --muted:#90909a; --dim:#64646e;
  --disp:'Chakra Petch',sans-serif;
  --sans:'Chakra Petch',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-size:16px;letter-spacing:.2px;overflow-x:hidden}
/* faint intelligence grid */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1100px 520px at 50% -8%, rgba(255,255,255,.05), transparent 60%),
  linear-gradient(var(--bg),var(--bg))}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 24%,#000 58%,transparent 100%)}
/* scanlines + moving sweep (monochrome, subtle) */
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.10) 3px);opacity:.5;mix-blend-mode:multiply}
.scan::after{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);animation:sweep 9s linear infinite}
@keyframes sweep{to{top:100%}}
@keyframes blink{50%{opacity:.25}}

/* scanning line sweeping top -> bottom */
.scanline{position:fixed;left:0;right:0;top:-4px;height:2px;z-index:55;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  box-shadow:0 0 14px rgba(255,255,255,.3);animation:scanmove 6.5s linear infinite}
@keyframes scanmove{0%{top:-4px;opacity:0}5%{opacity:.6}95%{opacity:.6}100%{top:100%;opacity:0}}

/* boot / login intro */
#boot{position:fixed;inset:0;z-index:9999;background:#060608;display:flex;align-items:center;justify-content:center;font-family:var(--mono);transition:opacity .6s ease}
#boot.done{opacity:0;pointer-events:none}
#boot .bx{width:min(620px,88vw);padding:0 22px;position:relative}
#boot .hd{color:var(--muted);font-size:11px;letter-spacing:3px;border-bottom:1px solid var(--line2);padding-bottom:10px;margin-bottom:18px;display:flex;justify-content:space-between}
#boot .bl{color:var(--ink);font-size:14px;margin:7px 0;min-height:18px;white-space:pre-wrap}
#boot .bl .g{color:var(--muted)}
#boot .bar{height:3px;background:#17171a;border:1px solid var(--line2);margin-top:18px;border-radius:2px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:var(--ink)}
#boot .bg{margin-top:20px;font-family:var(--disp);font-weight:700;letter-spacing:5px;font-size:clamp(20px,4vw,30px);color:#fff;text-align:center;opacity:0}
#boot .bg.show{opacity:1;animation:blink .2s 3 steps(2)}
#boot .sk{position:absolute;bottom:-66px;right:0;color:var(--dim);font-size:11px;cursor:pointer;letter-spacing:1px}
html.lock,body.lock{overflow:hidden}

/* BDL footer logo */
footer.site .bdl{height:42px;width:auto;filter:grayscale(1) contrast(1.05);opacity:.8;transition:.2s}
footer.site a:hover .bdl{opacity:1}
@media (prefers-reduced-motion: reduce){.scanline{display:none}}

img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none;transition:.15s}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
::selection{background:#2b2b31;color:#fff}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(7,7,8,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-family:var(--mono);font-size:14px;letter-spacing:1px;color:var(--ink);display:flex;align-items:center;gap:9px}
.logo .sq{width:8px;height:8px;background:var(--ink);display:inline-block;animation:blink 2.4s infinite}
.nav{display:flex;gap:2px;align-items:center}
.nav a{color:var(--muted);font-size:13.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;padding:9px 12px;border-radius:5px}
.nav a:hover,.nav a.active{color:var(--ink);background:#17171a}
.nav .soc{display:flex;gap:4px;margin-left:8px;padding-left:12px;border-left:1px solid var(--line)}
.nav .soc a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--muted)}
.nav .soc a:hover{color:var(--ink);background:#17171a}
.nav .soc svg{width:18px;height:18px;fill:currentColor}
.nav .lang{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding-left:12px;border-left:1px solid var(--line)}
.nav .lang button{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 2px;text-transform:uppercase;transition:.15s}
.nav .lang button.on{color:var(--ink)}
.nav .lang button:hover{color:var(--ink)}
.nav .lang .sep{color:var(--line2);font-size:12px}
.burger{display:none;background:none;border:1px solid var(--line2);color:var(--ink);border-radius:5px;padding:7px 11px;font-size:16px;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.5fr .9fr;gap:52px;align-items:center}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px;min-height:16px}
.kicker .cur{display:inline-block;width:8px;height:14px;background:var(--ink);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}
h1.name{font-family:var(--disp);font-weight:700;font-size:clamp(40px,7vw,78px);line-height:1;margin:0;letter-spacing:1px;text-transform:uppercase}
.role{font-family:var(--disp);font-weight:500;font-size:clamp(16px,2.2vw,21px);color:var(--ink2);margin:18px 0 0}
.pitch{color:var(--muted);margin:18px 0 0;max-width:560px;font-size:16px}
.disciplines{font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;color:var(--dim);margin:22px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.btn{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.8px;text-transform:uppercase;padding:11px 20px;border-radius:7px;
  border:1px solid var(--line2);color:var(--ink);background:transparent;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn:hover{background:#17171a;border-color:#48484f}
.btn.solid{background:var(--ink);color:#070708;border-color:var(--ink)}
.btn.solid:hover{background:#e2e2e4}
.portrait{position:relative}
.portrait::before,.portrait::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #55555d;z-index:2}
.portrait::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.portrait::after{bottom:14px;right:-6px;border-left:0;border-top:0}
.portrait img{width:100%;border-radius:10px;border:1px solid var(--line);filter:grayscale(1) contrast(1.03)}
.portrait figcaption{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:10px;letter-spacing:.6px;text-align:center}

/* ---------- section scaffolding ---------- */
section{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sec-label::before{content:"";width:26px;height:1px;background:var(--line2)}
h2.sec{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4vw,42px);margin:0 0 10px;letter-spacing:.6px;text-transform:uppercase}
.sec-intro{color:var(--muted);max-width:700px;margin:0 0 36px;font-size:16px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.about img{width:100%;border-radius:10px;border:1px solid var(--line);filter:grayscale(1)}
.bio{list-style:none;margin:0;padding:0}
.bio li{position:relative;padding:9px 0 9px 24px;border-bottom:1px solid var(--line);color:var(--ink2);font-size:15.5px}
.bio li::before{content:"▪";position:absolute;left:2px;color:var(--muted);font-size:11px;top:12px}
.bio li a{color:#fff;border-bottom:1px solid #48484f}
.bio li a:hover{border-color:#fff}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.svc{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.svc:hover{background:var(--panel2)}
.svc h3{font-family:var(--disp);font-weight:600;font-size:19px;margin:0 0 8px;letter-spacing:.4px;text-transform:uppercase}
.svc p{color:var(--muted);font-size:14.5px;margin:0}
.svc .no{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:1px}

/* ---------- rows ---------- */
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.row .flag{font-size:20px}
.row .body h3{font-family:var(--disp);font-weight:600;font-size:17px;margin:0 0 3px;letter-spacing:.3px}
.row .body p{color:var(--muted);font-size:14.5px;margin:0}
.row .body .meta{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.row a.go{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:1px;white-space:nowrap;border:1px solid var(--line2);padding:7px 12px;border-radius:6px}
.row a.go:hover{color:var(--ink);background:#17171a}

/* ---------- projects ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proj{border:1px solid var(--line);border-radius:9px;padding:20px;background:var(--panel)}
.proj:hover{border-color:var(--line2);background:var(--panel2)}
.proj h3{font-family:var(--disp);font-weight:600;font-size:16.5px;margin:0 0 7px;letter-spacing:.3px;text-transform:uppercase}
.proj p{color:var(--muted);font-size:14px;margin:0 0 10px}
.proj .k{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}

/* ---------- talks / gallery ---------- */
.talks{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.talk h3{font-family:var(--disp);font-weight:600;font-size:19px;margin:0 0 6px;letter-spacing:.3px;text-transform:uppercase}
.talk p{color:var(--muted);font-size:14.5px;margin:0 0 14px}
.embed{position:relative;padding-bottom:56.25%;height:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#000}
.embed iframe,.embed img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.embed img{filter:grayscale(.15)}
.talk{display:flex;flex-direction:column}
.talk .embed{margin-top:auto}
.embed.yt{cursor:pointer}
.embed.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:44px;z-index:2;
  background:rgba(0,0,0,.6);border:1px solid #55555d;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.embed.yt:hover .play{background:rgba(0,0,0,.85);border-color:#fff}
.embed.yt:hover img{filter:grayscale(0)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:9px;filter:grayscale(1) contrast(1.03);transition:.3s}
.gallery figure:hover img{filter:grayscale(0);border-color:var(--line2)}
.gallery figcaption{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:9px;letter-spacing:.3px}

/* ---------- media ---------- */
.media{columns:2;column-gap:22px}
.media a{break-inside:avoid;display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink2);font-size:15px}
.media a:hover{color:#fff}
.media a .src{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.8px;display:block;margin-bottom:3px;text-transform:uppercase}

/* ---------- credentials ---------- */
.vault{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vault .b{border:1px solid var(--line);border-radius:10px;padding:22px;text-align:center;background:var(--panel)}
.vault .b img{width:72px;height:72px;object-fit:contain;margin:0 auto 12px;filter:grayscale(1)}
.vault .b b{font-family:var(--disp);font-weight:600;font-size:14px;display:block;letter-spacing:.4px;text-transform:uppercase}
.vault .b span{font-family:var(--mono);font-size:10.5px;color:var(--dim);display:block;margin-top:5px}
.cred{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.cred a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 8px;border-bottom:1px solid var(--line)}
.cred a:nth-child(odd){border-right:1px solid var(--line);padding-right:22px}
.cred a .nm{font-size:15px;color:var(--ink2)}
.cred a:hover .nm{color:#fff}
.cred a .vf{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);border:1px solid var(--line2);padding:4px 9px;border-radius:4px;white-space:nowrap}
.cred a:hover .vf{color:#fff;border-color:#55555d}

/* ---------- figures (animated counters) ---------- */
.figures{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
.fig{padding:24px 14px;text-align:center;border-right:1px solid var(--line);background:var(--panel)}
.fig .n{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;letter-spacing:1px}
.fig .l{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:8px}

/* ---------- contact ---------- */
.contact-box{border:1px solid var(--line);border-radius:12px;padding:44px;text-align:center;background:var(--panel)}
.contact-box .email{font-family:var(--mono);font-size:clamp(12px,1.6vw,15px);color:#ededf2;margin:14px 0 22px;letter-spacing:.4px}
.soc-big{display:flex;gap:14px;justify-content:center}
.soc-big a{width:48px;height:48px;border:1px solid var(--line2);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:12px}
.soc-big a:hover{color:#fff;border-color:#55555d;background:#17171a}
.soc-big svg{width:21px;height:21px;fill:currentColor}

/* ---------- footer ---------- */
footer.site{padding:40px 0;color:var(--dim);font-family:var(--mono);font-size:12.5px;letter-spacing:.3px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer.site .fs{display:flex;gap:10px}
footer.site .fs a{width:34px;height:34px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
footer.site .fs a:hover{color:#fff;border-color:var(--line2)}
footer.site .fs svg{width:16px;height:16px;fill:currentColor}

/* ---------- animation utils ---------- */
.rv{opacity:0;transform:translateY(12px);transition:.55s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
h2.sec.twing::after,.kicker.twing::after{content:"";display:inline-block;width:.5ch;height:1em;background:var(--ink);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}.portrait{max-width:300px}
  .about{grid-template-columns:1fr;gap:26px}
  .services,.projects,.gallery{grid-template-columns:repeat(2,1fr)}
  .vault{grid-template-columns:repeat(2,1fr)}.talks{grid-template-columns:1fr}
  .media,.cred{columns:1;grid-template-columns:1fr}.cred a:nth-child(odd){border-right:0;padding-right:8px}
  .figures{grid-template-columns:repeat(2,1fr)}
  .nav{position:fixed;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(7,7,8,.98);
    border-bottom:1px solid var(--line);padding:10px 20px;display:none}
  .nav.open{display:flex}.nav .soc{border-left:0;padding-left:0;margin-left:0;margin-top:6px}.burger{display:inline-block}
  .nav .lang{border-left:0;padding-left:0;margin-left:0;margin-top:6px;justify-content:flex-start}
}
@media(max-width:560px){
  .services,.projects,.vault,.gallery{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr 1fr}.row{grid-template-columns:auto 1fr;gap:12px}.row a.go{grid-column:2}
}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none}.scan::after,.logo .sq{animation:none}}